autocomplete.tsx

import { Text, SafeAreaView, StyleSheet, TouchableOpacity, View } from 'react-native';
import { useState, useRef } from "react";
import Autocomplete from 'react-native-autocomplete-input';
import {TextInput} from 'react-native-paper';

// You can import supported modules from npm
import { Card } from 'react-native-paper';

// or any files within the Snack
import AssetExample from './components/AssetExample';

  
  const users = [
    {user: 'someone', key: 1},
    {user: 'mrguytown', key: 2},
    {user: 'frankie123', key: 3},
  ];



export default function App() {

  function filterData(query: string) {
     return users.filter( (item) => item.user.indexOf(query.toLowerCase()) !== -1);
  } 

  const [playerTwo, setPlayerTwo] = useState('');
  const data = filterData(playerTwo);
  const [showAutocomplete, setShowAutocomplete] = useState(false);
  const myTextInputRef = useRef(null);

    const handleBlur = () => {
    myTextInputRef.current.blur();
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.autocompleteContainer}>
      <Text style={styles.bigText}>Challenge a Friend</Text>
      
      <Autocomplete
        data={showAutocomplete ? data: []}
        value={playerTwo}
        //renderTextInput={(props) => <Text {...props}>{playerTwo}</Text>}
        
        renderTextInput={(props) => <TextInput
          ref = {myTextInputRef}
          value={playerTwo}
          onChangeText={t => {
          setPlayerTwo(t);
          if (t.length === 0) {
            setShowAutocomplete(false);
          }
          else {
            setShowAutocomplete(true);
            //handleBlur();
          }
          
        }}
        />}
        
        onChangeText={t => {
          setPlayerTwo(t);
          if (t.length === 0) {
            setShowAutocomplete(false);
          }
          else {
            setShowAutocomplete(true);
            //handleBlur();
          }
          
        }}
        flatListProps={{
          keyExtractor: i => i.key,
          keyboardShouldPersistTaps: 'handled',
          renderItem: ({item}) => 
               <TouchableOpacity onPress={(event) => {
                 setPlayerTwo(item.user);
                 setShowAutocomplete(false);
               }}>
               <Text style={styles.listitem}>{item.user}</Text></TouchableOpacity>,
        }}
        listContainerStyle={{ flex: 1 }}
      />
      

      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  bigText: {
    padding: 100,
    fontSize: 18
  },
    autocompleteContainer: {
    flex: 1,
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0,
    zIndex: 1
  },
  listitem: {
    paddingVertical: 8,
    fontSize: 24
  }
});