There is a “behavior” property in KeyboardAvoidingView, e.g.:
import { KeyboardAvoidingView } from 'react-native';
<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
... your UI ...
</KeyboardAvoidingView>
It can be picked as one of three choices: 'height', 'position', or 'padding'. The difference is not explained in the documentation. All it says is that it’s not required to set the property, and has a note:
Note: Android and iOS both interact with this prop differently. Android may behave better when given no behavior prop at all, whereas iOS is the opposite.
What effect are these settings supposed to have?
I agree that the lack of documentation here is frustrating. If you dig into the source code for KeyboardAvoidingView, you will find a switch around the behavior: https://github.com/facebook/react-native/blob/92073d4a71d50a1ed80cf9cb063a6144fcc8cf19/Libraries/Components/Keyboard/KeyboardAvoidingView.js#L157
It looks like the following is happening:
height
A <View> is returned with styling that attempts to set a static height to the view that is either the screen height, or the screen height minus the keyboard when the keyboard is present.
position
A nested <View> is returned, where the outer View has your styles applied, and the inner View has a bottom style applied that attempts to match the keyboard height when the keyboard is present.
padding
A single <View> is returned where a paddingBottom style is applied to the height of the keyboard if the keyboard is present.
Given the arbitrary options available, it looks like when using the KeyboardAvoidingView you should exercise trial and error, and check both devices for your desired outcome. In theory all three options should work, but as the docs say there is some nuance between device types.
In my opinion, this component should be scrapped though, in favour of helper functions that would return keyboard heights over time, so you could apply your own style ideas directly based on keyboard visibility.
Answer：
For the ios, you can use padding to the behavior props.
Like this
<KeyboardAvoidingView behavior="padding" style={{flex: 1}}>
...
</KeyboardAvoidingView>
For the Android, it’s better without behavior props.
Tags: androidandroid, view
