React Native Firebase Flat List data not showing in Text & Image

Question

My data's not showing, I'm using firebase realtime and I tested on react native android emulator in android studio:

<FlatList
   data={this.state.userList}
   keyExtractor={(item,index)=>item.article_title}
   renderItem={({item}) =>
       <View style={{alignItems:'center',justifyContent:'center'}}>
           <Image style={{height:40,width:40,borderRadius:20}}
               source={{uri:`${item.article_image}`}} />
           <Text style={{color:'black',fontWeight:'bold',fontSize:30}}>
              {item.article_title}
           </Text>
       </View>
   } />

Answer 1

removeClippedSubviews={false} use it . if it is not working then try flatlist optimization check this thread

Answer 2

The problem most likely is that the data returned from firebase is not an Array. Try to convert it into an array, either by iterating yourself over the object or by using one of the lodash helper functions.

Something like here: transform object to array with lodash

Using lodash you could do this:

<FlatList
    data={_.values(this.state.userList)}
    keyExtractor={(item, index) => item.article_title}
    renderItem={({item}) =>

        <View style={{alignItems: 'center', justifyContent: 'center'}}>
            <Image style={{height: 40, width: 40, borderRadius: 20}}
                   source={{uri: `${item.article_image}`}}/>
            <Text style={{color: 'black', fontWeight: 'bold', fontSize: 30}}>{item.article_title}</Text>

        </View>

    }/>

Answer 3

My array convert,

state={
userList:[]
}
ComponentWillMount()
{
  firebase.database().ref().child('datas').once('value',(snap) =>{
    let userList=[]
    snap.forEach((data) =>{
      const {article_title,article_content,article_image}= data.val()
      userList.push({article_title,article_content,article_image})
    })
    this.setState({userList})
  })
}

Answer 4

Thanks for your valuable answers, the cause of my problem not array convert problem: firebase version :)