CODEWITHSUNDEEP
javascriptangularionic-frameworkcapacitor
Noble Eugene
Noble Eugene

Reputation: 737

capacitor status bar overlay affecting keyboard

I am using capacitors status bar plugin in my ionic 6 app. The following makes a transparent overlay in my app:

 if(Capacitor.isNativePlatform()){
    StatusBar.setOverlaysWebView({overlay:true});
    await StatusBar.setStyle({style:Style.Dark});
  }

This is working well but it causes android native keyboard to display over ion-inputs making it difficult for the user to see what is being typed. How can i fix this, ive been on it for hours now

Upvotes: 2

Views: 1798

Answers (1)

Noble Eugene
Noble Eugene

Reputation: 737

Just resolved after over 5 hours. First install @capacitor/keyboard. Then your capacitor.config.ts should look something like this:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.ajoopay.ng',
  appName: 'Ajoopay',
  webDir: 'www',
  bundledWebRuntime: false,
  plugins: {
    Keyboard:{
      resizeOnFullScreen:true
    }
  }
};

export default config;

I formally had this in place but didint work because i mispelled, Keyboard as keyboard. And this was the first thing i tired hours ago :)

Upvotes: 6

Related Questions