KeyboardAvoidingView doesn't work when behavior is padding on ios
See original GitHub issueEnvironment
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
}
})
Issue Analytics
- State:
- Created 5 years ago
- Reactions:3
- Comments:8 (2 by maintainers)
Top Results From Across the Web
KeyboardAvoidingView not Working Properly - Stack Overflow
View> ); } // iOS: React Native's KeyboardAvoidingView with header offset and // behavior 'padding' works fine on all ios devices (and ...
Read more >KeyboardAvoidingView not working properly? Check your ...
It can automatically adjust either its position or bottom padding based on the position of the keyboard. In other words, KeyboardAvoidingView is ...
Read more >How to fix KeyboardAvoidingView in React Native?
KeyboardAvoidingView is kind of difficult to make it right in both ios and android, let's see how we can fix that. Tagged with...
Read more >react native keyboard avoiding view not working - You.com
React Native KeyboardAvoidingView not working properly ... <KeyboardAvoiding behavior={'padding'} keyboardVerticalOffset={64} style={styles.container}> ...
Read more >KeyboardAvoidingView - React Native
On both iOS and Android, setting behavior is recommended. Type. enum( 'height' , 'position' , 'padding' ) ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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
@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.