React-native: KeyboardAvoidingView padding bug

[ivpusic]

Issue Description

KeyboardVoidingView has wrong padding on android.

Steps to Reproduce / Code Snippets

Create KeyboardAvoidingView with following view hierarchy

-> KeyboardAvoidingView
    -> ScrollView
    -> View (The one with this issue)

When keyboard is open last View has wrong padding

Attachments

iOS (Correct)

Android (Wrong)

Expected Results

Padding should be set correctly

Additional Information

• React Native version: 0.35.0
• Platform: Android

[lacker]

I'm not quite sure what code leads to that bug. Could you provide more specific repro code? A link to rnplay.org is the best because then we can see precisely what code maps to what visual error.

[magicismight]

Same issue.
But I cannot reproduce this bug every time on the simulator.
It happens occasionally.

[ivpusic]

@magicismight you can try https://github.com/facebook/react-native/pull/10531. After this change I cannot reproduce issue anymore. Can you?

[magicismight]

I don't know how to reproduce this, it happened randomly.
Sometimes just reboot the simulator and everything works fine.

[chapati23]

Also ran into this issue (react-native 0.38, Android 6.0 on Samsung Galaxy A3).

Reproduce
An app with 2 simple screens that have a <TextInput autoFocus /> and a button that sticks to the bottom. Navigating back and forth causes weird behavior for me on Android because the Keyboard is never dismissed.

Workaround
Call Keyboard.dismiss() manually before navigating to the next screen (e.g. via a button's onPress={() => { Keyboard.dismiss() }}. That solves the issue for me and makes KeyboardAvoidingView behave basically like on iOS in my case.

[andreleon]

I also ran into this issue (react-native 0.42). To fix this I simply added a platform specific keyboardVerticalOffset.

<KeyboardAvoidingView
    behavior={'padding'}
    keyboardVerticalOffset={
        Platform.select({
            ios: () => 0,
            android: () => 30
        })()
    }>
    ...
</KeyboardAvoidingView>

Obviously this isn't a fix by any means, but I thought this workaround might help some people who encounter the same issue.

[dualcyclone]

I've encountered an issue with this whereby, if you have multiple text fields (eg, a username and password field), the view will jump around when navigating between the fields.

Nothing overly special settings wise, just <KeyboardAvoidingView behavior={'padding'} style={...}>

And on first focusing a field in this arrangement, the first field will jump to the top of the screen initially

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[ollydixon]

Issue still exists version 49

[hamidhadi]

The issue still exists in version 54

[jjimenezlopez]

I'm having this same issue in version 0.54.1