How to Iteration object into flatlist - react native?

Question

I'm developing a Chats list in react native,

and save the message Body into firebase "real-time", the structure of DB like this

{
    dtnMG3dVEQXL1TPct3awl927jax2: // user key
       -LmUSeyWtBPqcoN8l6fd: // msg body
             0: {user: {…}, text: "hey", createdAt: "2019-08-17T12:04:09.182Z"
       -LmUgcbdzElxWpLkN-F9: [{…}]
       -username: "Bran" // user name

    y5eAQppoEZRELsDL3hLbY5b0A763:
       -Lm_K6xwDVqaA7UIF7hf: [{…}]
       -Lm_LXWdK1rNk-G3_NlC: [{…}]
       -username: "Alex"
}

after fetching the data I got the object as you see in the above, Now I want to add these data into <FlatList/> but I can't iterate these values because it contains a nested object with nested values and so on! in renderItem builtin method because it's not a flat array of object

So how can I looping this object With retention every user key cuz bassed on these key I want to avoid the iteration lists!

final result should be something like this

here is the function:

_getProviders = () => {
    let currentUser = firebase.auth().currentUser.uid;
    let refVal = firebase.database().ref(`Messages/${currentUser}`);
    let providers = {};
    refVal
      .once("value")
      .then(snapshot => {
        snapshot.forEach(child => {
          let providerKeys = child.key;
          Object.assign(providers, { [providerKeys]: child.val() });
        });
      })
      .then(() => {
        let keys = [];
        Object.keys(providers).map(item => {
          keys.push(item);
        });
        keys.forEach(key => {
          firebase
            .database()
            .ref("providers")
            .child(key)
            .once("value")
            .then(providersShot => {
              let username = providersShot.val().username;
              console.log(username);
              providers[key]["username"] = username;
            });
        });
        // console.log(providers);
        this.setState({ providers }, () =>
          console.log(this.state.providers) // here is the above object!!
        );
      });
  };


   <FlatList
          key={Math.random() * 1000}
          data={this.state.providers}
          contentContainerStyle={{ flexGrow: 1 }}
          ListEmptyComponent={this._listEmptyComponent()}
          extraData={this.state}
          renderItem={({ item }) => {
            console.log(item);
            return (
              <TouchableOpacity>
                <View style={styles.parent}>
                  <Icon name="ios-contact" size={50} color="#4d8dd6" />
                  <View style={{ flex: 1, alignSelf: "flex-start" }}>
                    <Text
                      style={{
                        color: "#000",
                        fontSize: 17,
                        marginHorizontal: 25,
                        alignSelf: "stretch"
                      }}
                    >
                      {item.username}
                    </Text>
                    <Text
                      style={{
                        color: "#a1a1a1",
                        marginHorizontal: 35,
                        marginVertical: 5,
                        alignSelf: "stretch"
                      }}
                      numberOfLines={1}
                      lineBreakMode="tail"
                    >
                      {item.lastMssg.text}
                    </Text>
                  </View>
                  <Icon name="ios-time" size={20} color="#ddd" />
                </View>
              </TouchableOpacity>
            );
          }}
          keyExtractor={(item, index) => index.toString()}
        />

Answer 1

One thing you can do is when you are fetching that whole, try to sort that in an separate list and pass that on the state and flatlist data={this.state.sortedArrar} not to pass that bulky one.