title: React navigation clearing out data when stored in AsyncStorage - How to view data?
body: <p>I'm using react navigation bottom tab and when I have data stored in my AsyncStorage, the data comes out to be empty when I go into this SavedData component. In the console, if I <code>showAsyncStorageContentInDev()</code>, it shows that I do indeed have the key <code>@storage_key</code>. But when I console log out the data, its always empty. Does it have to do with something with react navigation bottom tab that empty's out the data?</p>
  
  <p>Or how do I view the data when user tabs into this component?</p>
  
  <pre><code>const SavedData = (props) =&gt; {
    const [getData, setData] = useState([]);
  
    const getKeyInfo = async () =&gt; {
      try {
        const storedData = await AsyncStorage.getItem('@storage_Key');
        setData(JSON.parse(storedData))
        console.log('saved',getData);
      } catch (e) {
        // saving error
      }
      console.log(getData);
    };
  
    useEffect(() =&gt; {
      console.log(getData);
      getKeyInfo();
    }, []);
  
    return (
      &lt;View&gt;
        &lt;Text&gt;
          {getData.map((i, index) =&gt; (
            &lt;View key={i.id.toString()}&gt;
              &lt;Data uri={i.uri} /&gt;
            &lt;/View&gt;
          ))}
          ;
        &lt;/Text&gt;
      &lt;/View&gt;
    );
  
  };
  
  export default SavedExercise;
  </code></pre>