height vs position vs padding in KeyboardAvoidingView “behavior”

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.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)