keyboardavoidingview not working in flatlist footer - react-native

Question

i cannot make the flatlist stay away from my data entry field which is in its footer. here is my code:
import React, { useState, useEffect } from 'react';
import { View, Text, Alert , TextInput, Button, Platform, KeyboardAvoidingView,Animated,Easing} from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
export function PlayAreaScreen({ route, navigation }) {
const [itemsToShow, setitemsToShow] = React.useState([{key:'0',name:"sdfsdfds"}]);
const PopulateTestData = () =>{
const DATA = [];
for (let index = 0; index < 6; index++) {
DATA.push({key:index.toString(), name:`index ${index}`});
}
setitemsToShow(DATA);
console.log(itemsToShow);
}
const MyFooter = (props) =>{
const [sometext, setsometext] = React.useState('');
return(
<View style={{borderWidth:1}}>
<TextInput value={sometext} onChangeText={(text) => setsometext(text)} placeholder="Enter data here"></TextInput>
</View>
)
}
React.useEffect(()=>{
PopulateTestData();
}, []);
return (
<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "position" : "height"}>
<FlatList
data={itemsToShow}
ListFooterComponent = {MyFooter}
keyExtractor={(item) => item.key}
renderItem={(item) => <KeyboardAvoidingView style={{height:80, borderWidth:1}}><Text>{item.item.name}</Text></KeyboardAvoidingView>}
>
</FlatList>
</KeyboardAvoidingView>
)
}
basically it does not scroll the flatlist at all. it obviously works if i have just one or two items in the flatlist so it does not need to scroll to fit the keyboard.
here is a picture showing how the data entry field gets covered:
thanks,
Manish

Answer 1

let's try KeyboardAwareScrollView from react-native-keyboard-aware-scroll-view, some info here