Keyboard events not working on Android

[marcshilling]

RN 0.36, Samsung Galaxy S6 running Android 6.0.1.

componentDidMount() {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
}

Logging in those methods, I can see that they are called on iOS, but not Android. I've read all the other issue threads regarding this but most of them are old at this point. I've added android:windowSoftInputMode="adjustResize" to my manifest. What am I missing?

[brentvatne]

Is this happening on a brand new project? Can you add breakpoints to see if these are ever called?

react-native/ReactAndroid/src/main/java/com/facebook/react/ReactRootView.java

Lines 302 to 332 in 9ee815f

	@Override
	public void onGlobalLayout() {
	if (mReactInstanceManager == null || !mIsAttachedToInstance ||
	mReactInstanceManager.getCurrentReactContext() == null) {
	return;
	}
	checkForKeyboardEvents();
	checkForDeviceOrientationChanges();
	}
	private void checkForKeyboardEvents() {
	getRootView().getWindowVisibleDisplayFrame(mVisibleViewArea);
	final int heightDiff =
	DisplayMetricsHolder.getWindowDisplayMetrics().heightPixels - mVisibleViewArea.bottom;
	if (mKeyboardHeight != heightDiff && heightDiff > mMinKeyboardHeightDetected) {
	// keyboard is now showing, or the keyboard height has changed
	mKeyboardHeight = heightDiff;
	WritableMap params = Arguments.createMap();
	WritableMap coordinates = Arguments.createMap();
	coordinates.putDouble("screenY", PixelUtil.toDIPFromPixel(mVisibleViewArea.bottom));
	coordinates.putDouble("screenX", PixelUtil.toDIPFromPixel(mVisibleViewArea.left));
	coordinates.putDouble("width", PixelUtil.toDIPFromPixel(mVisibleViewArea.width()));
	coordinates.putDouble("height", PixelUtil.toDIPFromPixel(mKeyboardHeight));
	params.putMap("endCoordinates", coordinates);
	sendEvent("keyboardDidShow", params);
	} else if (mKeyboardHeight != 0 && heightDiff <= mMinKeyboardHeightDetected) {
	// keyboard is now hidden
	mKeyboardHeight = 0;
	sendEvent("keyboardDidHide", null);
	}
	}

[brentvatne]

Tried this on a new 0.36 project and it works as expected:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Keyboard,
  Text,
  TextInput,
  View
} from 'react-native';

export default class KeyboardTesting extends Component {
  state = {
    open: false,
  }

  componentDidMount() {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
  }

  _keyboardDidShow = () => {
    this.setState({open: true});
  }

  _keyboardDidHide = () => {
    this.setState({open: false});
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput style={{width: 300, height: 50}} placeholder="Hello" />
        <Text>{this.state.open ? 'open' : 'closed'}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

AppRegistry.registerComponent('KeyboardTesting', () => KeyboardTesting);

I'm not sure what is needed to make it work -- if you have a lot of custom Android code it might be worth creating a new project, copying the android directory in and overwriting everything and then painfully stepping over the diff to see what is missing. Let us know what you find!

[satya164]

Working fine for me too in an existing project.

[satya164]

I've not added anything to the manifest.

[marcshilling]

Investigating...standby...

[marcshilling]

Ok, figured out why it wasn't working. I was using the following code in onCreate() of MainActivity.java to make the status bar have a transparent background on launch:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
}

The keyboard events are way more important so I suppose I'll just find a different way of dealing with the status bar. Worth leaving this open to possibly support both cases or no?

[satya164]

@marcshilling You can just set transparent statusbar in the theme. Keyboard events worked fine with it last time I tried. Tough I'd recommend setting the windowSoftInputMode to adjustResize to have consistent keyboard behaviour in that case.

[marcshilling]

@satya164 yup, looks like <item name="android:statusBarColor">@android:color/transparent</item> in the theme does the trick (just requires API >= 21). Thanks for helping me track this down guys!

[z4ph0rd]

i still cannot get the event working on RN42,

    componentDidMount(){
        this.kbe = Keyboard.addListener('keyboardDidShow', this.showMessage);
    }
   showMessage =()=> {
       alert('keyboardup');
    }

[ms88privat]

Nope, just a typo in my Platform.OS check... its working now.

Make sure you have android:windowSoftInputMode="adjustResize" in your androidManifest xml file

[jonas-app]

I've kind of the same issue.
The 'keyboardWillShow'/'keyboardWillHide' events don't get fired.
We're using the latest expo sdk.
@brentvatne I successfully tested your example above, but as soon as I change the events from 'did' to 'will' it isn't working anymore.

Edit:
I think it is a react native issue: #3468
Do you guys know of any workaround?
I'm trying to get https://github.com/wix/react-native-keyboard-aware-scrollview to work on Android.
Is there any alternative which works with expo?

[guigrpa]

@brentvatne I can confirm @jonas-arkulpa's findings. On iOS, both 'will' and 'did' are fired. On Android, only 'did'.

[brentvatne]

Indeed on Android keyboardWillShow does not exist: https://github.com/facebook/react-native/search?utf8=%E2%9C%93&q=keyboardWillShow&type=

Tracking here: #14275

[andresfcamacho]

@jonas-arkulpa I'm also trying to get https://github.com/wix/react-native-keyboard-aware-scrollview to work on Android. I'm noticing another difference between the behavior of iOS and Android.

It looks like 'keyboardDidShow' fires every time when entering a TextField on iOS even if the keyboard is up. In Android it only fires once, that is if the keyboard is already up it doesn't fire when entering a TextField. The Android behavior seems more correct but unfortunately I actually want the iOS behavior. It would be great if the behavior was consistent.

[12tp12]

Any update? @andresfcamacho

[RyanMitchellWilson]

Still an issue with react-native 0.50.0, is this being worked on? Can this be reopened?