How to create a searchable dropdown menu which does not hide behind keyboard in react native?

I created this searchable dropdown menu. The dropdown menu is getting hidden behind keyboard. The main problem is that user need to scroll by himself. The scrolling should be automatic. How to fix this. I tried to use the scrollTo prop but it is not the exact solution.

I also tried to use Keyboard aware scrollview but it also didn't work. The problem with Keyboard aware scrollview is also the same it is unable to move the screen upward.

export default App = () => {
  data = [{name: 'tom'}, {name: 'jerry'}];
  const [showDropdown, setShowDropdown] = React.useState(false);
  const [searchName, setSerachName] = React.useState('');
  const [results, setResults] = React.useState(data);
  const [name, setName] = React.useState('');
  React.useEffect(() => {
    setName('');
    let search = searchName.toLowerCase();
    let dat = data.filter(item => Object.values(item).join('').toLowerCase().includes(search))  
    if (dat.length > 0) {
      setResults(dat);
    } else {
      setResults([]);
    }
  }, [searchName]);
  const getName = () => {
    if (name != '') {
      return name;
    } else {
      return searchName;
    }
  }
    {
      return (
        <ScrollView style={styles.container}>
        <KeyboardAwareScrollView
          enableOnAndroid={true}
          scrollEnabled={true}
          enableAutomaticScroll={true}
          >
          <View style={{
              height: Dimensions.get('window').height/2, justifyContent: 'center', alignItems: 'center'
            }}>
            <TextInput style={{width: '90%', borderColor: 'black', borderWidth: 1}}/>
          </View>    
          <View style={{ height: Dimensions.get('window').height/2, justifyContent: 'center', alignItems: 'center' }}> 
          <TextInput
            placeholder='search user...'
            style={{width: '90%', borderColor: 'black', borderWidth: 1}}
            value={getName()}
            onChangeText={(val) => setSerachName(val)}
            onFocus={() => {
              setShowDropdown(true);
            }}
          />
          {showDropdown && results.length > 0 &&
          <View style={{borderColor: 'black',borderWidth: 1,justifyContent: 'flex-start', alignItems: 'flex-start', width: '90%'
            }}>
            {results.map(i => (
              <TouchableOpacity onPress={() => setName(i.name)}>
                <Text>{i.name}</Text>
              </TouchableOpacity>))}
          </View>}
          </View>
          </KeyboardAwareScrollView>
        </ScrollView>
      );
    }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20,
    backgroundColor: '#ecf0f1',
  },
});