reading and displaying data from a firestore document in react native

First, install the Firebase SDK in your app, so you can make queries to your backend.

I don’t know if your sample App.js represents the current state of progress on your app, but I’m going to assume that:

  • you already have your storeDetail screen built
  • you know the store’s id before navigating to the screen (eg in the HomeScreen)
  • you pass the storeId as a navigation param when navigating to storeDetail

So in storeSetails screen, you can query Firestore when receiving storeId, and save the result to a state variable on success:


const StoreDetailsScreen = ({ route }) => { // route is passed as a prop by React Navigation
  const { storeId } = route.params
  const [store, setStore] = useState()
  const [loading, setLoading] = useState(true) // show a loading spinner instead of store data until it's available

  useEffect(() => {

    const fetchQuery = async () => {
      const storeData = await firestore()
        .collection('stores')
        .doc(storeId)
        .get() // this queries the database

        if (storeData) {
          setStore(storeData) // save the data to store state
          setLoading(false) // set loading to false 
        } else {
          // something went wrong, show an error message or something
        }
    }

    fetchQuery()

  }, [storeId])

  if (loading) {
    return (
      <ActivityIndicator/>
    )
  }
  
  return (
    // ... store details
  )

}

Then you can use the data in store to render stuff in your screen

<Text>{store.name}</Text>
<Text>{store.email}</Text>
// ...

More info about how to use Firestore in RN: https://rnfirebase.io/firestore/usage

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top