Hiding keyboard accessory bar

Ionic Framework ionic-v3
1

I’ve been following the story of iTunes rejecting apps because of the keyboard http://blog.ionic.io/pluginz-be-buggin/ and believe this is now not the case… so I’ve been trying to work out how I hide the damn accessibility bar with no success:

// app.js

@App({
    template: '<ion-nav [root]="rootPage" swipeBackEnabled="false"></ion-nav>',
    config: {
        // http://ionicframework.com/docs/v2/api/config/Config/
        tabbarPlacement: 'top'
    }
})
export class MyApp {
    static get parameters() {
        return [[Platform]];
    }

    constructor(platform) {
        this.rootPage = HomePage;

        platform.ready().then(() => {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        });
    }
}

Can anyone steer me in the right direction for this? I’ve tried a couple of different approaches from Google but none seem to work when I emulate ios. Am I supposed to import something or in an Ionic 1 example it looked like you could add this using ?

Any help would be appreciated!

2

Ah… typically moments later I’ve found the problem… for some reasons, ionic keeps downloading and installing version 2.1.0:

Fetching plugin "ionic-plugin-keyboard@~2.1.0" via npm

running npm cache clean doesn’t seem to help though… I’ve tried downloading 2.2.0 manually but the above code still does not disable the accessory bar.

3

On a related note, I’m only trying to disable the accessory bar because the < > arrows don’t seem to move focus between form elements. Is that an expected bug in ionic 2 beta 6?

1 Like
4

Damn, though I had it but still no luck :frowning:

// app.js
import {Keyboard} from 'ionic-native';

@App({
    template: '<ion-nav [root]="rootPage" swipeBackEnabled="false"></ion-nav>',
    config: {
        // http://ionicframework.com/docs/v2/api/config/Config/
        tabbarPlacement: 'top'
    }
})
export class MyApp {
    static get parameters() {
        return [[Platform]];
    }

    constructor(platform) {
        this.rootPage = HomePage;

        platform.ready().then(() => {
            Keyboard.hideKeyboardAccessoryBar(true);
        });
    }
}

Anyone? Running Ionic serve logs this to the console hideKeyboardAccessoryBar method has been removed temporarily. so maybe Ionic 2 beta 6 has removed the functionality?

5

Finally worked it out. Ionic 2 beta 6 has removed the functionality so I uninstalled it and installed:

cordova plugin add cordova-plugin-keyboard

then simply:

// app.js
@App({
    template: '<ion-nav [root]="rootPage" swipeBackEnabled="false"></ion-nav>',
    config: {
        // http://ionicframework.com/docs/v2/api/config/Config/
        tabbarPlacement: 'top'
    }
})
export class MyApp {
    static get parameters() {
        return [[Platform]];
    }

    constructor(platform) {
        this.rootPage = HomePage;

        platform.ready().then(() => {
            Keyboard.hideFormAccessoryBar(true);
        });
    }
}

Maybe in the next Ionic 2 release they will add it back in.

6

Update your keyboard plugin:

cordova plugin rm ionic-plugin-keyboard

cordova plugin add ionic-plugin-keyboard@2.1

done! (works for me)

7

Did your app get approved?

8

didn’t worked for me

9

The ionic-native doesn’t work with the new plugin… I had to import it manually.
1 - Remove the old keyboard plugin
2 - Add the new plugin - https://github.com/ionic-team/cordova-plugin-ionic-keyboard
3 - Import the plugin into your app.component.ts without ionic-native like below:

declare var Keyboard: any;

4 - After the platform.ready().then(()… insert the one of the code below to hide or show:

Keyboard.hideFormAccessoryBar(false); //show accessory bar
Keyboard.hideFormAccessoryBar(true); //hide accessory bar

Hope it helps!