javascript - I can't re-render the FlatList after empty data?

Question

I Get the data from firebase real-time and put it I FlatList and when I delete if from Console "Firebase" it's deleted from the List in screen very well but the last item in the Array "Data" couldn't be deleted I don't know why!

I use an onRefresh Props but not help me because we all know the DB is real-time and when we will add any item it's will be in the last without refresh it So it's not work with the last item too and just the loading stuck without re-render the FlatList

Although I use .once('value') when I get data from DB, refresh work but when I refresh after deleting the last item the loading refresh stuck and can't disappear the last item

so how can I solve this issue?

here is my code

import auth from '@react-native-firebase/auth';
import database from '@react-native-firebase/database';
import React, {Component} from 'react';
import {
  Dimensions,
  FlatList,
  Image,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

const {width} = Dimensions.get('window');
export default class PendingOrders extends Component {
  constructor(props) {
    super(props);
    this.state = {
      orders: [],
      forceUpdate: true,
      isFetching: false,
    };
  }
  onRefresh = () => {
    this.setState({isFetching: true}, () => this.getApiData());
  };
  getApiData = () => {
    try {
      const uid = auth().currentUser.uid;
      const Orders = database().ref(`usersOrders/${uid}`);
      Orders.on('value', snapshot => {
        let orders = [];
        snapshot.forEach(childSnapshot => {
          if (childSnapshot.val().status == 'pending') {
            orders.push({
              buildingNumber: childSnapshot.val().buildingNumber,
              service: childSnapshot.val().categoryName,
              date: childSnapshot.val().date,
              time: childSnapshot.val().time,
              description: childSnapshot.val().problemDescription,
              status: childSnapshot.val().status,
              images: childSnapshot.val().Images,
            });
            this.setState({orders, forceUpdate: false, isFetching: false}, () =>
              console.log(this.state.orders),
            );
            return;
          }
        });
      });
    } catch (err) {
      console.log('Error fetching data: ', err);
    }
  };
  componentDidMount() {
    this.getApiData();
  }

  _listEmptyComponent = () => {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Image
          style={{
            width,
            height: width * 0.7,
            resizeMode: 'contain',
          }}
          source={require('../../assets/empty.png')}
        />
        <Text
          style={{
            color: '#000',
            marginVertical: 15,
            textAlign: 'center',
            fontSize: 20,
          }}>
       No item found
        </Text>
      </View>
    );
  };
  render() {
    console.log('is?', this.state.forceUpdate);
    return (
      <FlatList
        showsVerticalScrollIndicator={false}
        data={this.state.orders}
        extraData={this.state.isFetching}
        onRefresh={() => this.onRefresh()}
        ListEmptyComponent={this._listEmptyComponent()}
        refreshing={this.state.isFetching}
        contentContainerStyle={{
          flexBasis: '100%',
        }}
        renderItem={({item}) => {
          return (
            <TouchableOpacity
              onPress={() =>
                this.props.navigation.navigate('OrderDetailsScreen', {
                  service: item.service,
                  time: item.time,
                  date: item.date,
                  description: item.description,
                  images: item.images,
                  status: item.status,
                })
              }
              style={{
                margin: 15,
                borderRadius: 10,
                borderWidth: 1,
                flexDirection: 'row',
                borderColor: '#ddd',
              }}>
              <Image
                style={{
                  borderRadius: 10,
                  borderTopLeftRadius: 0,
                  borderBottomLeftRadius: 0,
                  width: 150,
                  height: 150,
                }}
                resizeMode="cover"
                source={item.images[0]}
              />
              <View
                style={{
                  margin: 5,
                  marginLeft: 10,
                  justifyContent: 'space-evenly',
                }}>
                <Text
                  style={{
                    marginBottom: 5,
                    fontWeight: 'bold',
                    fontSize: 16,
                    marginTop: 5,
                  }}>
                  {item.service}
                </Text>
                <View
                  style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'space-around',
                  }}>
                  <View
                    style={{
                      flexDirection: 'row',
                      alignItems: 'center',
                      // paddingHorizontal: 5,
                    }}>
                    <Icon name="date-range" color="#AEACAC" size={20} />
                    <Text style={{paddingHorizontal: 5}}>{item.date}</Text>
                  </View>
                  <View
                    style={{
                      flexDirection: 'row',
                      alignItems: 'center',
                      paddingHorizontal: 5,
                    }}>
                    <Icon name="access-time" color="#AEACAC" size={20} />
                    <Text style={{paddingHorizontal: 5}}>{item.time}</Text>
                  </View>
                </View>
                <Text
                  numberOfLines={1}
                  ellipsizeMode="tail"
                  style={{marginBottom: 5, width: 160, marginTop: 5}}>
                  {item.description}
                </Text>
              </View>
            </TouchableOpacity>
          );
        }}
        keyExtractor={(item, index) => index.toString()}
      />
    );
  }
}

Answer 1

The key for re activating flatlist is extraData. just change it's value to something else and it will trigger flatlist re rendering. for simplicity pass a boolean value to extraData. every time you want to re active the flatlist, just toggle the value of extraData