CODEWITHSUNDEEP
javascriptfirebasereact-native
jeanvr
jeanvr

Reputation: 55

How to retrieve data from firestore on react native

I'm trying to retrieve data from my collection on firestore but when i put this data inside a component such as Text i get an error, however when a i put this same data on console.log() i can use its value with no problems.

My code

const nome = firestore().collections('usuários').doc(auth().currentUser.uid).get().then(
(documentSnapshot) => documentSnapshot.get('nome'))

return (
    <View style={{ flex: 1 }}>
                    <View style={styles.imageContainer}>
                        <Image source={require('../assets/img/user-bg.jpg')} style={styles.image} />
                    </View>


                    <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                        <View style={styles.userLabel}>
                            <Text style={[styles.user, { color: colors.text }]}>{nome}</Text>
                            <Text style={[styles.email, { color: colors.text }]}>email</Text>
                        </View>

                        <CaretDownIcon width={8} height={8} fill={colors.text} style={{ marginRight: 10 }}/>
                    </View>
                </View>
    </View>
)

Error message

Upvotes: 0

Views: 786

Answers (1)

acenturyandabit
acenturyandabit

Reputation: 1418

In order to get nome, you have:

const nome = firestore().collections('usuários').doc(auth().currentUser.uid).get().then(
(documentSnapshot) => documentSnapshot.get('nome'))

This doesn't return a name! Instead: firestore().collections('usuários').doc(auth().currentUser.uid).get() returns a Promise. So what you want to happen is:

  1. Fetch the name
  2. Display the name

But what is happening instead is:

  1. You ask firebase to fetch the name with .get(). .get() and .then() return a Promise, which is an Object (hence why you're getting that error)
  2. Your page renders with the Object
  3. Firebase finishes fetching the name and then calls the function in name, i.e. (documentSnapshot) => documentSnapshot.get('nome')

So instead, consider:

  1. Change <Text style={[styles.user, { color: colors.text }]}>{nome}</Text> into <Text style={[styles.user, { color: colors.text }]}>{this.state.nome}</Text>
  2. Change (documentSnapshot) => documentSnapshot.get('nome') to (documentSnapshot) => {let _nome = documentSnapshot.get('nome'); this.setState({nome:_nome})

And then what happens is that

  1. You ask firebase to fetch the name
  2. Your page renders, but firebase doesn't have your name yet. (it'll show up as undefined, but that's ok, because then:
  3. Firebase fetches your name and then calls setState
  4. React updates the page for you automatically with the new name when setState is called

If you don't want an undefined name, you can try something like <Text>{this.state.nome || "Waiting for response..."}</Text>.

If you're using an ES6 function renderer right now, you'll need to use a React Class instead.

Upvotes: 1

Related Questions