React Native not showing the updated array

Question

I used the blow code to get data from the firebase:

import firebase from 'firebase';

import 'firebase/database'

firebase.database().ref().child('users').on('value',(snapshot)=>{

    if(snapshot.exists()){

      snapshot.forEach((datasnapshot)=>{

        data.push({key: datasnapshot.key.toString()})

      })
    } else {
      data.push({key: 'No one has written yet'})
    }
});

var data = [];

export default data;

Later i tried to import the variable data to display it as below:

import React from 'react';
import {StyleSheet, Text, StatusBar, View, TouchableOpacity, ScrollView } from 'react-native';
import firebase from 'firebase';
import 'firebase/database'
import data from './getdata';

export default function Index({navigation}) {

  return (

    <View style={styles.container}>

      <Text style={{color: '#000000', fontSize: 30, fontWeight: 'bold', marginTop: StatusBar.currentHeight}}>Index</Text>

      <ScrollView>

        {data.map((item,key)=>{

          if(item.key == "No one has written yet"){return(<Text key={key} style={styles.item}>{item.key}</Text>)}

          else{

            return(

              <TouchableOpacity key={key}  onPress={()=>navigation.navigate('Details',item.key)}>
                <Text style={styles.item}>{item.key}</Text>
              </TouchableOpacity>

            )

          }

        })}

      </ScrollView>

    </View>

  );

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },

  item: {
    marginTop: 10,
    fontSize: 20,
    fontWeight: 'bold',
    color: '#000000',
    textAlign: 'center'
  }
});

the problem is it does not show the data stored after the 'data' array is updated by 'push()' function until i save it once again and the code is refreshed in 'expo go' app.

Here is the image of how it is displayed at first when the app is opened:

Click for the image

Loading data is an asynchronous operation, and by the time your `export default data;` runs, the `data.push({key: datasnapshot.key.toString()})` hasn't run yet, so you're returning an empty array. The solution is to store the data in the state, and update it there whenever you get an update from the database. See for example: https://stackoverflow.com/a/64211296/209103 and https://stackoverflow.com/questions/65469282/firebase-data-not-defined-when-used-inside-react-usestate/65469639#65469639 — Frank van Puffelen, Sep 01 '21 at 14:37

score 0 · Answer 1 · answered Sep 01 '21 at 11:49

I think the problem is that your component is not re-rendering after getting data thus the new data is not shown.
I would use Flatlist as it has extraData prop that will make Flatlist re-render when data set to it changes:
"By passing extraData={selected} to FlatList we make sure FlatList itself will re-render when the state changes. Without setting this prop, FlatList would not know it needs to re-render any items because it is a PureComponent and the prop comparison will not show any changes."
https://docs.expo.dev/versions/latest/react-native/flatlist/

So changing your SrollView to...

    <FlatList
      data={data}
      extraData={data}
      renderItem={({ item, key }) => {
          if(item.key == "No one has written yet"){
            return(<Text key={key} style={styles.item}>{item.key}</Text>)
          }else{
            return(
              <TouchableOpacity key={key}  onPress={()=>navigation.navigate('Details',item.key)}>
                <Text style={styles.item}>{item.key}</Text>
              </TouchableOpacity>
            )
          }}  
      />

That didn't work it's showing the same output – Varun V Gowda Sep 01 '21 at 12:49 — Varun V Gowda, Sep 01 '21 at 12:49

React Native not showing the updated array

1 Answers1