I am trying to make a FlatList that gets its data from AsyncStorage. The problem is Im not able to get this to work, the timing seems messed up and the array passed to the FlatList is always blank.

```
const [expanded, setExpanded] = React.useState(false);
var searchHistory = [];

const _retrieveData = async () => {
    try {
        const value = await AsyncStorage.getItem('searchHistory');
        if (value !== null) {
          searchHistory = JSON.parse(value);
        }
    }
    catch (error) {
      console.log("_retrieveData failed!! " + error);
    }
  }
  _retrieveData();

const expandedSearch = () => {
    if(expanded) {
      return (
        <View style={styles.container}>
          <FlatList 
            data={searchHistory}
            renderItem={renderHistoryItem}
          />
        </View>
      );
    }
    else {
      return null;
    }
  }
...
{expandedSearch()}

```

I have a toggled View (expandedSearch) that displays a FlatList of search history items. For some reason the searchHistory array is blank when the FlatList gets rendered, even when the expandedSearch view is toggled...which should re-render the Flatlist?