title: How to display data from firestore using react native
body: <p>I'm trying to display data from firestore on the home page but i dont seem to get it working. I want to show all the data in the collection. the collection includes name, id, location etc...</p>
  <pre><code>    import Firebase from &quot;./lib/firebase&quot;;
  import { useEffect, useState } from &quot;react&quot;;
  import { SnapshotViewIOS } from &quot;react-native&quot;;
  // export async function getRestaurants(restaurantsRetrieved) {
  //   var restaurantList = [];
  
  //   var snapshot = await firebase.firestore().collection(&quot;Restaurants&quot;).get();
  
  //   snapshot.forEach((doc) =&gt; {
  //     restaurantList.push(doc.data());
  //   });
  
  //   restauantsRetrieved(restaurantList);
  // }
  export default () =&gt; {
    const [restaurantsList, setRestaurantsList] = useState([]); //Initialise restaurant list with setter
    const [errorMessage, setErrorMessage] = useState(&quot;&quot;);
  
    const getRestaurants = async () =&gt; {
      try {
        const list = [];
        var snapshot = await Firebase.firestore().collection(&quot;Restaurants&quot;).get();
        console.log(&quot;Here&quot;);
        snapshot.forEach((doc) =&gt; {
          list.push(doc.data());
        });
        setRestaurantsList(list);
      } catch (e) {
        setErrorMessage(
          &quot;There's nae bleeding restaurants, I told you to upload them!&quot;
        );
      }
    };
  
    //Call when component is rendered
    useEffect(() =&gt; {
      getRestaurants();
    }, []);
  
    return (
  
    &lt;View style={tailwind('py-10 px-5')}&gt;
      &lt;Text style={tailwind('text-4xl font-bold')}&gt;
        {restaurantsList}
      &lt;/Text&gt;
  </code></pre>
  
      };