title: React native KeyboardAvoidingView not moving correctly
body: <p>I have a <code>TextInput</code> that when pressed gets covered by the keyboard. So I wrapped it in a <code>KeyboardAvoidingView</code>. But regardless of the behavior that I set for this view, the <code>TextInput</code> won't move above the keyboard. Using <code>position</code> as the behavior moves the <code>TextInput</code> but only half way above the keyboard, while the other two don't seem to work at all. </p>
  
  <p>I also tried wrapping my entire component with a <code>KeyboardAvoidingView</code>, but doing so breaks the entire layout. </p>
  
  <p>Can anyone help me? I never managed to get <code>KeyboardAvoidingView</code> to work for me and now I really need it. Thanks in advance!</p>
  
  <p>Here is my component. Also worth mentioning is that this component is top level(well, almost top level since it's wrapped in a Router)</p>
  
  <pre><code>const { height, width } = Dimensions.get('screen')
  
  const style = StyleSheet.create({
      main: {
          height,
          width,
          flexDirection: 'column',
      },
      iconSelecter: {
          width,
          height: 196,
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: Colors.primary,
          marginTop: 32
      },
      icon: {
          height: 164,
          width: 164,
      },
      saveButton: {
          width: 96,
          height: 96,
          borderRadius: 100,
          backgroundColor: Colors.secondary,
          alignItems: "center",
          justifyContent: "center",
          alignSelf: 'center',
          position: 'absolute',
          bottom: 96 + 32
      },
      saveIcon: {
          height: 54,
          width: 54,
      },
      textInputWrapper: {
          borderBottomColor: Colors.textInputBorder,
          width: 288,
          borderBottomWidth: 1,
          alignSelf: 'center',
          marginTop: 96,
          height: 48,
      },
      textInput: {
          fontWeight: "300",
          fontSize: 14,
          margin: 0
      },
      hintWrapper: {
          alignSelf: 'center',
          marginTop: 4
      },
      hint: {
          fontSize: 12,
          fontFamily: "Roboto-Thin",
          fontStyle: 'normal',
      }
  })
  
  
      const CreateActivity = ({ goBack }: NavigationProps) =&gt; {
  
      //////////////////////////////
      //State and logic 
      ///////////////
  
  
          return (
              // TODO: Add touchable opacity to dismiss keyboard
  
              &lt;View style={style.main}&gt;
                  &lt;Appbar title="New activity" canGoBack goBack={goBack} /&gt;
                  &lt;View style={{ flex: 1 }}&gt;
                      &lt;View style={style.iconSelecter}&gt;
                          &lt;GestureRecognizer onSwipeLeft={nextIcon} onSwipeRight={lastIcon}&gt;
                              &lt;Image style={style.icon} source={icons[currentIconIndex]?.file}&gt;&lt;/Image&gt;
                          &lt;/GestureRecognizer&gt;
                      &lt;/View&gt;
                      &lt;View style={style.hintWrapper}&gt;
                          &lt;Text style={style.hint}&gt;Swipe to cycle through the icons&lt;/Text&gt;
                      &lt;/View&gt;
  
                      &lt;KeyboardAvoidingView&gt;
                          &lt;View style={style.textInputWrapper}&gt;
                              &lt;TextInput style={style.textInput} placeholder={"Give this activity a name"} value={name} onChangeText={setName}&gt;&lt;/TextInput&gt;
                          &lt;/View&gt;
                      &lt;/KeyboardAvoidingView&gt;
                      &lt;TouchableNativeFeedback onPress={createActivity} background={TouchableNativeFeedback.Ripple("#fff", true)}&gt;
                          &lt;View style={style.saveButton}&gt;
                              &lt;Image style={style.saveIcon} source={require("../../assets/icons/light/save.png")}&gt;&lt;/Image&gt;
                          &lt;/View&gt;
                      &lt;/TouchableNativeFeedback&gt;
                  &lt;/View&gt;
              &lt;/View&gt;
  
          )
      }
  
  
      export default CreateActivity;
  </code></pre>