KeyboardAvoidingView with behavior="height" doesn't resize back on keyboard close

[ahmed-wagdi]

Description

When using the KeyboardAvoidingView with behavior set to height it works correctly the first time you open the keyboard, but after keyboard is dismissed it doesn't return to it's original position.

Recreation:
https://snack.expo.io/rJYAymwy-

The code below can be used to recreate this problem:

<View style={{flex: 1, backgroundColor: "blue"}}>
	<KeyboardAvoidingView behavior="height"  style={{ backgroundColor: "green", paddingTop: 22, flex: 1, justifyContent: 'center'}}>
	    <View>
	          <TextInput style={{height: 30, backgroundColor: "red"}} />
	    </View>
	</KeyboardAvoidingView>
</View>

Additional Information

• React Native version: 0.43.4
• Development Operating System: MacOS
• Dev tools: This was shown on the IOS simulator but the problem also occurs on android

[Lily418]

This same question was asked on Stack Overflow

Edit: When I originally posted there was no answer, but now there is 🎉
KeyboardAvoidingView - Reset height when Keyboard is hidden

[dualcyclone]

I'm seeing this in React Native version: 0.40.0

[steven89]

Issue is still there in React Native 0.44.2

For those running into this issue you can find a work-around here https://gist.github.com/steven89/f7aedca683deee6ee8211399e94cd583

The issue is related to onLayout mechanism (rendered height is calculated from layout's height):

• onLayout is not called when the keyboard is dismissed, because the keyboard is not constraining the component's layout anymore.
• onLayout is called after render, so even if it was actually called, the computed height value in render would not be correct.

The work-around I have found to make it work is to fixate the layout height to its initial value before render (componentWillUpdate).

A real fix would be to find a way to call onLayout when keyboard is dismissed and before rendering.
Due to the source of the issue, I wouldn't expect a fix anytime soon.

If you want to take a look, the KeyboardAvoidingView's code is there:
https://github.com/facebook/react-native/blob/master/Libraries/Components/Keyboard/KeyboardAvoidingView.js

[hustlerism]

Having the same issue here.

[dmr07]

+1

Same issue: keyboardVerticalOffset not fully removed. v0.45.0

[eduardojunio]

A work-around for this issue is doing this https://shift.infinite.red/avoiding-the-keyboard-in-react-native-56d05b9a1e81

[LAITONEN]

I had similar problem. KeyboardAwareScrollView solved the problem for me.

[Epskampie]

Same issue here, iOS 11, react native 0.50. Using behavior='padding' instead of behavior='height' does work for me, but might not be appropriate in your case.

[williamfelippe]

Same issue here. React Native 0.50.4.

[shri3k]

And here I was messing with flex on 10 different places trying to figure out what exactly that I did was wrong.

[samuela]

Could it be related to the flex: 0 here: https://github.com/facebook/react-native/blob/master/Libraries/Components/Keyboard/KeyboardAvoidingView.js#L169 ?

[fbartho]

We also exhibited this problem, with React Native 0.52.x

Using behavior="padding" was a viable workaround for our project too. /cc @MehmetBal

[MehmetBal]

Yes along with behavior="padding" we also needed to use keyboardVerticalOffset={SizeOfYourLoginButton} to make the login button appear above the keyboard.