Bug in KeyboardAvoidingView on Android

Description

Hi, there is a problem with KeyboardAvoidingView on Android which is best presented by the screenshots below:

Without keyboard:

With keyboard:

It just adds too much padding to the view. On iOS it works correctly. I’ve also tried different behaviors: height, position but with the same effect.

Reproduction

Here is my JSX:

<KeyboardAvoidingView behavior="padding" style={{
  flex: 1
}}>
  <View style={{
    flex: 0,
    height: 50,
    backgroundColor: 'skyblue'
  }}>
    <Text>Header</Text>
  </View>
  <ScrollView style={{
    flex: 2,
    padding: 10
  }}>
    <Text>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Text>
  </ScrollView>
  <View style={{
    flex: 0,
    height: 50,
    backgroundColor: 'orange'
  }}>
    <TextInput
      style={{
        marginLeft: 10,
        height: 50
      }}
      ref="input"
      placeholder="Your message here..."
      returnKeyType="send"
      underlineColorAndroid="transparent"
    />
  </View>
</KeyboardAvoidingView>

Additional Information

• React Native version: 0.39.2
• Platform: Android
• Operating System: MacOS

[Phenek]

Hey Guys

My solution is very simple. KeyboardAvoidingView is englobing my <Router> and writen just one time in my application See below:

import {KeyboardAvoidingView, Platform} from "react-native";

<KeyboardAvoidingView
        behavior= {(Platform.OS === 'ios')? "padding" : null}
        style={{flex: 1}}>
        <Router.....>
        </Router>
</KeyboardAvoidingView>

[ippa]

I got bitten by this on android. My workaround was to edit AndroidManifest.xml:

    <activity
        android:windowSoftInputMode="adjustResize"

And only use KeyboardAvoidingView on iOS. YMMV. Would of course be very nice if KeyboardAvoidingView worked perfectly on both platforms 😃.