title: KeyboardAvoidingView not working properly in iOS
body: <p>I'm having trouble getting my KeyboardAvoidingView to register properly on the iOS version of my react-native app.  It's nested within another view in my <code>ListFooterComponent</code> of a Flatlist.  The behavior is relatively normal on Android, but is not working at all on iOS.</p>
  <p>Things I've tried:</p>
  <ol>
  <li>Changing the <code>behavior</code> prop (all 3 props didn't end up working)</li>
  <li>Changing the <code>keyboardVerticalOffset</code> prop (no amount of offset managed to change anything, it just adds a bunch of padding to the bottom of the screen)</li>
  <li>Moving my <code>KeyboardAvoidingView</code> tag to the outermost view in <code>ListFooterComponent</code>.  No difference</li>
  <li>Adding <code>flex: 1</code> to inner and outer components</li>
  </ol>
  <p>I have seen other posts recommending using other keyboard avoidance libraries, but since this is an Expo Managed project, I don't think these will work for me.  Any advice for how to accomplish this using the KeyboardAvoidingView component only?</p>
  <p>This is a screenshot of the screen without a keyboard on iOS: <a href="https://i.stack.imgur.com/3jJcp.png" rel="noreferrer">this</a></p>
  <p>And this is a screenshot of with a keyboard on iOS: <a href="https://i.stack.imgur.com/m4rjD.png" rel="noreferrer">this</a></p>
  <p>And here's the code:</p>
  <pre><code>        &lt;SafeAreaView style={{ flex: 1 }}&gt;
  
          &lt;FlatList
              data={commentData}
              style={{ flex: 1 }}
              keyboardDismissMode={'on-drag'}
              keyboardShouldPersistTaps={'always'}
              keyExtractor={item =&gt; (item.id)}
              renderItem={({ item }) =&gt; {
                  return (
                      &lt;&gt;
  
                      &lt;/&gt;
                  )
              }}
              ListFooterComponent={() =&gt; {
                  return (
                      &lt;&gt;
                          &lt;View style={{ borderColor: &quot;#D6DCE8&quot;, marginBottom: 0, borderTopWidth: 2, marginTop: 25, shadowColor: &quot;#000&quot;, shadowRadius: 2, shadowOpacity: 0.25, shadowOffset: { width: 0, height: 2 }, elevation: 5 }} /&gt;
                          &lt;View style={{ flex: 1, flexDirection: 'row', paddingTop: 15, paddingBottom: 15 }}&gt;
                              &lt;TouchableOpacity delayPressIn={20}&gt;
                                  &lt;View style={styles.commentImage}&gt;
                                      &lt;Image source={{ uri: myProfilePicture }} style={styles.image}&gt;&lt;/Image&gt;
                                  &lt;/View&gt;
                              &lt;/TouchableOpacity&gt;
                              &lt;KeyboardAvoidingView
                                  behavior={Platform.OS === &quot;ios&quot; ? &quot;padding&quot; : &quot;height&quot;}
                                  keyboardVerticalOffset={Platform.select({ ios: 100, android: 500 })}
                                  style={{ flex: 1, backgroundColor: '#ECECEC', borderRadius: 10, flex: 0.95, paddingVertical: 5, marginLeft: 10 }}&gt;
                                  &lt;TextInput style={{
                                      fontSize: 14,
                                      fontWeight: '500',
                                      paddingHorizontal: 10,
                                      marginHorizontal: 10,
                                      paddingVertical: 6,
                                      flex: 1,
                                      flexDirection: 'row',
                                      flexWrap: 'wrap'
                                  }}
                                      ref={commentRef}
                                      multiline={true}
                                      blurOnSubmit={true}
                                      numberOfLines={2}
                                      onFocus={() =&gt; commentRef.current = true}
                                      onBlur={() =&gt; commentRef.current = false}
                                      placeholder=&quot;Leave a comment...&quot;
                                      defaultValue={comment}
                                      onChangeText={(newValue) =&gt; { comment = newValue }}
                                      onSubmitEditing={() =&gt; submitComment()} /&gt;
                              &lt;/KeyboardAvoidingView&gt;
                          &lt;/View&gt;
                          &lt;View style={Platform.OS === 'android' ? { marginBottom: 200 } : { marginBottom: 100 }} /&gt;
                      &lt;/&gt;
                  )
              }}
              ListHeaderComponent={() =&gt; {
                  return (
                      &lt;&gt;
  
                      &lt;/&gt;
                  )
              }}
          /&gt;
  
      &lt;/SafeAreaView&gt;
  </code></pre>