Hi all,
I've created this component that runs perfectly on iOS, but on Android, when I have this component, with a list of TextInputs as childs so the scroll appears, if I open the keyboard on the first child all is fine,
if I open the keyboard on the last TextInput child (which means I have to scroll first to show it), there is extra blank space between the component and the keyboard.
The components wraps inside a list of components and automatically wraps the content in the visibile viewport area.
The keyboard height seems to be correctly handled, but somehow empty space is added.
Any suggestion or is this a known bug?
https://gist.github.com/mattiamanzati/e199498e2464ab781da1
Thanks for help!
This might just be a difference between the platforms. I noticed my Android device shrinks the app's viewport (which is why the keyboard height appears to be handled).
Yeah, But I tried by replacing with height: 0 (do not shrink viewport) but the scrollview keeps being maximized and so does not scrolls down.
Also the blank space added seems to be proportional to the position of the text input I selected in the list.
Here's a gif for explain myself.

This question is better suited for stack overflow.
Nevertheless, android can add extra space at the bottom and can do a bunch of more stuff: this behavior is defined by the android:windowSoftInputMode property in the activity, docs here.
By default, the prop is set to adjustUnspecified, whose behavior can be erratic. The option that would work best for you is probably adjustNothing, which does not do anything to the window when the keyboard appears on the screen.
Here is an example of how to set this prop for UIExplorer.
Thanks for your help!
I tried it out by adding
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_NOTHING);
but now, somehow, the keyboardDidShow and keyboardDidHide events aren't fired when I open the keyboard! Is that a bug? can someone reproduce it?
If I change to adjust pan or resize the keyboard event is triggered, but the display is wrong as expected.
Good point, keyboard events are actually not triggered with adjustNothing because of the way it's implemented, and unfortunately there's no way around that. We should probably document all of this somewhere.
Back to your problem, I'd suggest going for adjustResize instead, and not changing the height setting when the keyboard pops up - android should handle that itself.
Thanks, now I solved!
Anyway I wold like to keep the issue open, waiting for an implementation of keyboard events that triggers even on adjustNothing, since I think that I will have inconsistencies between iOS and Android using this technique.
Thanks again for help!
@andreicoman11 As you said, I've set it to adjustResize, but both keyboardDidShow and keyboardWillShow will not been triggered on Android, which event has been support on Android so far?
I'm having the same issue of @matth3wga0 , any news? Thank you!
@mmazzarolo, I can confirm keyboardDidShow and keyboardDidHide work on Android with setting adjustResize.
Mh, It's weird, it seems they are not triggered in my app only on Android 4.2 and below
@mmazzarolo Maybe, my minimum target sdk is Android 4.4.
This is unrelated to the issue mentioned above, and your question is better suited for stack overflow.
I have encounter same issue on android, any news updated?
Hi guys!
I was having this same issue and made a workaround for it. It's based on the assumption that if a input field has focus, then the keyboard is visible. Only thing that must be set manually is the keyboard height, but I don't think that it is such a big issue. The code creates artificial keyboard events that will affect KeyboardAvoidingView.
The UIManager.setLayoutAnimationEnabledExperimental part is to enable KeyboardAvoidingView's animation on Android.
Just add this bit of code to somewhere:
import {Platform, Dimensions, UIManager, TextInput, Keyboard} from 'react-native'
if (Platform.OS === 'android') {
const
{width: WIDTH, height: HEIGHT} = Dimensions.get('window'),
KEYBOARD_HEIGHT = 160,
{State} = TextInput,
{focusTextInput, blurTextInput} = State
UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true)
function createEvent(height) {
return {
easing: 'easeIn',
endCoordinates: {
width: WIDTH,
height,
screenX: 0,
screenY: HEIGHT - height
},
duration: 300
}
}
State.focusTextInput = function(id) {
if (this.currentlyFocusedField() === null) {
Keyboard.emit('keyboardDidShow', createEvent(KEYBOARD_HEIGHT))
}
focusTextInput.call(this, id)
}
State.blurTextInput = function(id) {
if (this.currentlyFocusedField() === id) {
Keyboard.emit('keyboardDidHide', createEvent(0))
}
blurTextInput.call(this, id)
}
}
@sakarit don't do that, that's terrible practice to expect the keyboard to always be 160 height.
@andreicoman11 Can you re-open this ? It is still an issue for many of RN developers (see #11681 and #9640) and this could lead to a PR someday that would greatly help.
can someone reopen this? The keyboard events keyboardDidShow and keyboardDidHide still not working with Android and windowSoftInputMode="adjustNothing" but the Documentation clearly states:
Note that if you set android:windowSoftInputMode to adjustResize or adjustNothing, only keyboardDidShow and keyboardDidHide events will be available on Android.
https://facebook.github.io/react-native/docs/0.53/keyboard.html#addlistener
Can someone set up an example to see if it works then ?
I have the same issue as @moritzw1 . No events when adjustNothing is set. Docs says that it should get events. Please fix it or update the docs.
Can confirm, that keyboardDidShow and keyboardDidHide not working with adjustNothing
Most helpful comment
Can confirm, that
keyboardDidShowandkeyboardDidHidenot working withadjustNothing