KeyboardDidShow/Hide events are not working on Android with adjustResize setting

Question

I am trying to capture events on Keyboard Show/Hide events on Android with React Native. I got stuck at a dead-end.

Here is my manifest setting:

<activity
    android:launchMode="singleTop"
    android:name=".MainActivity"
    android:screenOrientation="portrait"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:windowSoftInputMode="adjustResize">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
        <action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>
    </intent-filter>
</activity>

And here is my RN Component:

import React, {Component} from 'react';
import {
    View,Keyboard
} from 'react-native';

export default class KeyboardAwareComponent extends Component {
    componentDidMount() {
        Keyboard.addListener("keyboardDidShow",()=>{
            console.log("Show event");
        })
    }

    render() {
        return <View />
    }
}

Thank you so much in Advance :)

Same thing for me. I have now realized that these lines are the issue: `Window w = getWindow(); w.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);` inside of `onCreate` of `MainActivity` — Kevin Amiranoff, Jul 21 '23 at 17:21

score 0 · Accepted Answer · answered Dec 29 '17 at 17:47

Here are some events straight from the docs.

keyboardWillShow

keyboardDidShow

keyboardWillHide

keyboardDidHide

keyboardWillChangeFrame

keyboardDidChangeFrame

import React, { Component } from 'react';
import { Keyboard, TextInput } from 'react-native';

class Example extends Component {
  componentWillMount () {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
  }

  componentWillUnmount () {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }

  _keyboardDidShow () {
    alert('Keyboard Shown');
  }

  _keyboardDidHide () {
    alert('Keyboard Hidden');
  }

  render() {
    return (
      <TextInput
        onSubmitEditing={Keyboard.dismiss}
      />
    );
  }
}

I know about those events... But none of them are working on Android. — Ishaq Hassan, Dec 29 '17 at 18:08

score 0 · Answer 2 · answered Jun 17 '20 at 22:13

0

TL/DR:

Make sure you're not using a view that's surrounded by a ScrollView

I've found for the Keyboard events to work, the correct visible part of the screen must be calculated on Android, and that doesn't work well when the view uses a ScrollView.

answered Jun 17 '20 at 22:13

SudoPlz

20,996
12
82
123

score 0 · Answer 3 · answered Jul 21 '23 at 17:36

To me, the issue is I was using FLAG_LAYOUT_NO_LIMITS which does not work with adjustPan or adjustResize

Inside of MainActivity I replaced this

      Window w = getWindow(); // in Activity's onCreate() for instance
      w.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);

with this:

@Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        Window w = getWindow();
        w.setStatusBarColor(Color.TRANSPARENT);
        w.setNavigationBarColor(Color.TRANSPARENT);
        w.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
        super.onCreate(savedInstanceState);
    }

for a similar behaviour.

Here is a few link relating the issue/solution:
adjustPan not working with FLAG_LAYOUT_NO_LIMITS.
https://github.com/th3rdwave/react-native-safe-area-context/issues/8
https://unicorn-utterances.com/posts/draw-under-navbar-using-react-native/

KeyboardDidShow/Hide events are not working on Android with adjustResize setting

3 Answers3