KeyboardAvoidingView not working properly in iOS - ios

Question

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 ListFooterComponent of a Flatlist. The behavior is relatively normal on Android, but is not working at all on iOS.
Things I've tried:
Changing the behavior prop (all 3 props didn't end up working)
Changing the keyboardVerticalOffset prop (no amount of offset managed to change anything, it just adds a bunch of padding to the bottom of the screen)
Moving my KeyboardAvoidingView tag to the outermost view in ListFooterComponent. No difference
Adding flex: 1 to inner and outer components
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?
This is a screenshot of the screen without a keyboard on iOS: this
And this is a screenshot of with a keyboard on iOS: this
And here's the code:
<SafeAreaView style={{ flex: 1 }}>
<FlatList
data={commentData}
style={{ flex: 1 }}
keyboardDismissMode={'on-drag'}
keyboardShouldPersistTaps={'always'}
keyExtractor={item => (item.id)}
renderItem={({ item }) => {
return (
<>
</>
)
}}
ListFooterComponent={() => {
return (
<>
<View style={{ borderColor: "#D6DCE8", marginBottom: 0, borderTopWidth: 2, marginTop: 25, shadowColor: "#000", shadowRadius: 2, shadowOpacity: 0.25, shadowOffset: { width: 0, height: 2 }, elevation: 5 }} />
<View style={{ flex: 1, flexDirection: 'row', paddingTop: 15, paddingBottom: 15 }}>
<TouchableOpacity delayPressIn={20}>
<View style={styles.commentImage}>
<Image source={{ uri: myProfilePicture }} style={styles.image}></Image>
</View>
</TouchableOpacity>
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
keyboardVerticalOffset={Platform.select({ ios: 100, android: 500 })}
style={{ flex: 1, backgroundColor: '#ECECEC', borderRadius: 10, flex: 0.95, paddingVertical: 5, marginLeft: 10 }}>
<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={() => commentRef.current = true}
onBlur={() => commentRef.current = false}
placeholder="Leave a comment..."
defaultValue={comment}
onChangeText={(newValue) => { comment = newValue }}
onSubmitEditing={() => submitComment()} />
</KeyboardAvoidingView>
</View>
<View style={Platform.OS === 'android' ? { marginBottom: 200 } : { marginBottom: 100 }} />
</>
)
}}
ListHeaderComponent={() => {
return (
<>
</>
)
}}
/>
</SafeAreaView>

Answer 1

For the above layout, use KeyboardAvoidingView above FlatList in your hierarchy, and place the comment box not as the footer, but outside of the list component altogether.
Here's a snack with these changes (OP's code simplified for context): https://snack.expo.dev/#mlisik/thankful-tortilla
A few general notes:
padding behaviour should be what you want
keyboarVerticalOffset is useful if your view is nested inside a navigator (eg. from react-navigation), and navigation bar or tabbar are visible - you should then set the value to the height of those bars
disable it on Android (unless you have disabled keyboard/soft input handling in your manifest).