CODEWITHSUNDEEP
firebasereact-nativegoogle-cloud-firestore
lwisi
lwisi

Reputation: 303

Reading and displaying data from a Firestore Document in React Native

Background

I'm trying to build an app which shows a number of stores, in the home screen which is a function component (mind this as I need to use hooks) I have a scroll view which shows different stores.

What I need

When the user presses on one of the stores it should redirect it to a screen which has the information of that specific store. I have built the "store detail" screen but with static info, I want to replace all of that information with data stored in a firestore collection.

Question

How would one go about retrieving data from a Firestore collection in react native, then assigning the data from each document to a separate Touchable Opacity (I know about passing params with react navigation, I just don't know which param to pass when working with Firestore), and then displaying that data in the store detail screen?

Sample code for context

App.js

    <NavigationContainer> 
  <Stack.Navigator initialRouteName={user ? 'Home' : 'Login'}
    screenOptions={{cardStyle: { backgroundColor: '#FFFFFF' }}}> 
    <Stack.Screen name="Home"options={{headerShown: false}}> 
      {props => <HomeScreen {...props} extraData={user} />} 
    </Stack.Screen> 
    <Stack.Screen name="Login" component={LoginScreen} options={{headerShown: false}}/> 
    <Stack.Screen name="Registration" component={RegistrationScreen}  options={{headerShown: false}}/> 
    <Stack.Screen name="storeDetail" options={{title: ''}}> 
        {props => <storeDetail {...props} extraData={} />} 
    </Stack.Screen> 
  </Stack.Navigator> 
</NavigationContainer>

In this file you'll see that I've already called some data (Login and Register pass userData to the Home Screen), however in order to implement that method I depended on the response from the authentication method I was using. I imagine although, I will probably need to pass something as extraData, I understand what I should do, I just don't know how to fill the blank spaces.

Thanks a lot in advance!

Upvotes: 1

Views: 1536

Answers (1)

samzmann
samzmann

Reputation: 2576

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

Upvotes: 4

Related Questions