React-native: KeyboardAvoidingView doesn't work when behavior is padding on ios

[Liqiankun]

Environment

npm: 6.1.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728
      react-native: 0.57.3 => 0.57.3
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Description

when behavior="padding"

when behavior="position"

Reproducible Demo

export default class Test extends Component {
    render() {
        const { navigation } = this.props
        return (
            <SafeAreaView style={CommonStyles.container}>
                <KeyboardAvoidingView style={styles.keyborderView} behavior="padding">
                    <View style={styles.topView}></View>
                    <TextInput style={styles.input} />
                </KeyboardAvoidingView>
           </SafeAreaView> 
        )
    }
}

const styles = StyleSheet.create({
    input: {
        width: 300,
        height: 40,
        borderWidth: 1,
        borderColor: 'red'
    },
    topView: {
        height: 300,
    },
    keyborderView: {
        flex: 1
    }
})

[react-native-bot]

Can you run react-native info and edit your issue to include these results under the Environment section?

If you believe this information is irrelevant to the reported issue, you may write [skip envinfo] under Environment to let us know.

[Liqiankun]

@react-native-bot It's right there!

[Ashoat]

I think you're using the wrong style for behavior="padding". You can take a look into KeyboardAvoidingView.js to see how it's implemented, but if I recall correctly behavior="padding" basically works by varying the bottom padding. I think your style is implemented to layout from the top, which is why varying the bottom padding has no effect.

[Liqiankun]

@Ashoat Thanks! I will take a look. But In this demo, I didn't see any difference. react-native-keyboard-avoidance-examples

[react-native-bot]

I am closing this issue because it does not contain the necessary environment info, and there has been no followup in a while.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.

[vovkasm]

@Liqiankun I'am usually write custom components in my apps to avoid keyboard and they highly coupled with apps layout, but yesterday I write something more or less universal. I think it will work in you case: https://gist.github.com/vovkasm/8e2d2f6ac9b77e16a802e2900b9f9e40 it is not well tested, but if it work for you, you can use the same principles in your own implementation.

[mirse]

https://gist.github.com/vovkasm/8e2d2f6ac9b77e16a802e2900b9f9e40

I can not open your website,can you send again?

[orkylish]

I wanted a super simple way for this to work, and finally found one thanks to this comment on stackoverflow

react-native-keyboard-aware-scroll-view

works exactly as I wanted for my multi-input screen, view only adjusts enough to match the currently selected input box