title: React native searchbar shows flatlist only if first 2 characters are similar
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>here is my code:import React, {useState} from 'react';
  import {
    Text,
    View,
    StyleSheet,
    FlatList,
    ActivityIndicator,
    TextInput,
  } from 'react-native';
  
  const namesData = [
    {fname: 'Sujay', lname: 'Atkare'},
    {fname: 'Pankaj', lname: 'Bhardwaj'},
    {fname: 'Sagar', lname: 'Vande'},
    {fname: 'Rohit', lname: 'Dhanke'},
    {fname: 'Uday', lname: 'Kadam'},
    {fname: 'Abhijeet', lname: 'Shah'},
    {fname: 'Kundan', lname: 'Zalate'},
    {fname: 'Sneha', lname: 'Shinde'},
    {fname: 'Akshay', lname: 'Singh'},
    {fname: 'Dilip', lname: 'Patil'},
    {fname: 'Imran', lname: 'Khan'},
    {fname: 'Saurabh ', lname: 'Kulkarni'},
    
  ];
  const SearchBarScreen = () =&gt; {
    const [data, setData] = useState([]);
    const [value, setValue] = useState('');
  
    const _onRenderSeparator = () =&gt; {
      return (
        &lt;View
          style={{
            height: 1,
            width: '100%',
            backgroundColor: 'pink',
          }}
        /&gt;
      );
    };
  
    const _searchData = text =&gt; {
      if (text) {
        let newList = namesData.filter(item =&gt; {
          const newItem = `${(item.fname + '' + item.lname).toUpperCase()}`;
          const textData = text.toUpperCase();
          return newItem.indexOf(textData) &gt; -1;
        });
        setData(newList);
        setValue(text);
      } else {
        setData([]);
        setValue(text);
      }
    };
  
    const _onRenderHeader = () =&gt; {
      return (
        &lt;TextInput
          style={{height: 60, borderColor: '#000', borderWidth: 1}}
          placeholder="Search here"
          onChangeText={text =&gt; _searchData(text)}
          value={value}
        /&gt;
      );
    };
  
    return (
      &lt;View
        style={{
          flex: 1,
          padding: 25,
          width: '98%',
          alignSelf: 'center',
          justifyContent: 'center',
        }}&gt;
        &lt;FlatList
          data={data}
          renderItem={({item}) =&gt; (
            &lt;Text style={{padding: 10}}&gt;
              {item.fname} {item.lname}
            &lt;/Text&gt;
          )}
          keyExtractor={item =&gt; item.fname}
          ItemSeparatorComponent={() =&gt; _onRenderSeparator()}
          ListHeaderComponent={_onRenderHeader()}
          enableEmptySections={true}
        /&gt;
      &lt;/View&gt;
    );
  };
  
  export default SearchBarScreen;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am new to react native,i have been trying to implement a searchbar which recieves list of data from array and render ig using flatlist. But i want to show flatlist only when whose initial characters are similar to the charcters which i type. Ex. If i type in searchbar 'Go'. I want to show list of items starting with 'Go' only</p>