How to force Flatlist to re-render after getting a single data?

Question

I've faced an issue with flatlist when I get single data from the server and set these into state and passes into data props, I can't see any update in the render "I'm adding some Loading if I'd not received any data I show an let's say Indicator" so the indicator disappears and I see blank screen!!

FYI, When I enable Hot Reloading and just press Save in my IDE I can see the single Data in my Screen!

So how can I force it to appear the data!

Code

import React, { Component } from "react";
import firebase from "react-native-firebase";
import Icon from "react-native-vector-icons/Ionicons";
import _ from "lodash";

import {
  View,
  Text,
  StyleSheet,
  FlatList,
  TouchableOpacity,
  Image,
  Dimensions
} from "react-native";
const { width } = Dimensions.get("screen");
class ListChats extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [],
      noChat: true
    };
  }
  _getUsers = () => {
    let currentUser = firebase.auth().currentUser.uid;
    let ref = firebase.database().ref(`Messages/${currentUser}`);
    let usersKeys = [];

    ref.once("value").then(snapshot => {
      snapshot.forEach(childsnap => {
        usersKeys.push(childsnap.key);
      });
      let usernames = [];
      usersKeys.forEach(key => {
        firebase
          .database()
          .ref("users")
          .child(key)
          .once("value")
          .then(usersShot => {
            let username = usersShot.val().username;
            usernames.push({ username: username, key: key });
          });
      });
      this.setState({ users: usernames,noChat: false });
    });
  };
  componentDidMount() {
    this._getUsers();
  }

  render() {
    if (this.state.noChat) {
      console.log("IF", this.state.users);
      return (
        <View style={styles.container}>
          <Image
            style={{
              width,
              height: width * 0.7,
              resizeMode: "contain"
            }}
            source={require("../../assets/empty.gif")}
          />
          <Text style={{ alignSelf: "center" }}>No Chats Found</Text>
        </View>
      );
    } else {
      console.log("Else", this.state.users);
      return (
        <View style={styles.container}>
          <FlatList
            key={Math.random() * 1000}
            extraData={this.state} // I'm already added 
            data={this.state.users}
            contentContainerStyle={{ flexGrow: 1 }}

            renderItem={({ item }) => {
              return (
                <TouchableOpacity
                  onPress={() =>
                    this.props.navigation.navigate("ChatDetails", {
                      Key: item.key,
                      userName: item.username
                    })
                  }
                >
                  <View style={styles.parent}>
                    <Icon name="ios-contact" size={50} color="#4d8dd6" />
                    <View
                      style={{
                        flex: 1,
                        justifyContent: "flex-start",
                        alignItems: "flex-start",
                        marginHorizontal: 25
                      }}
                    >
                      <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-chatboxes" size={25} color="#d6d6d6" />
                  </View>
                </TouchableOpacity>
              );
            }}
            keyExtractor={(item, index) => index.toString()}
          />
        </View>
      );
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center"
  },
  parent: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingVertical: 25,
    marginHorizontal: 15,
    borderBottomWidth: 1,
    borderBottomColor: "#eee"
  }
});

export default ListChats;

Answer 1

You have used extra data props but the issue is flatlist does a shallow data comparison so when the length of users changes it won't affect the flatlist so replace it with this.state.users

extraData={this.state.users}

You can see in the documentation it says flatlist is implementation of PureCompoment and PureComponent does a shallow comparison thats the reason it is not re-rendering. https://reactnative.dev/docs/flatlist#extradata

Answer 2

to force the flatlist re-render. just add a boolean lets say "forceUpdate" to your state and whenever an item is added to flatlist data toggle that boolean and pass that to the extra data of your FlatList instead of the state.