useState not Updating on screen in React-Native

Question

The Output is not changing on the screen as expected My code is as follows:

import React, { useState } from "react";
import { StyleSheet, FlatList, View } from "react-native";
import ListItem from "../components/ListItem";

import colors from "../config/colors";
import Screen from "../components/Screen";
import ListItemSeperator from "../components/ListItemSeperator";
import ListItemDeleteAction from "../components/ListItemDeleteAction";

const InitialMessages = [
  {
    id: 1,
    title: "T1",
    description: "D1",
    image: require("../assets/Images/mosh.jpg"),
  },
  {
    id: 2,
    title: "T2",
    description: "D2",
    image: require("../assets/Images/mosh.jpg"),
  },
  {
    id: 3,
    title: "T3",
    description: "D3",
    image: require("../assets/Images/mosh.jpg"),
  },
];

function MessagesScreen(props) {
  const [messages, UpdateMessageArray] = useState(InitialMessages);

  const handlerDelete = (message) => {
    console.log("Came to Delete");
    const newArr = messages.filter((m) => m.id !== message.id);
    UpdateMessageArray(newArr);
  };

  return (
    <Screen>
      <FlatList
        data={InitialMessages}
        keyExtractor={(message) => message.id.toString()}
        renderItem={({ item }) => (
          <ListItem
            title={item.title}
            subTitle={item.description}
            image={item.image}
            onPress={() => console.log("MESSAGE PRESSED", item)}
            renderRightActions={() => (
              <ListItemDeleteAction onPress={() => handlerDelete(item)} />
            )}
          />
        )}
        ItemSeparatorComponent={ListItemSeperator}
      />
    </Screen>
  );
}

const styles = StyleSheet.create({});

export default MessagesScreen;

On the console..it outputs as "CAME TO DELETE" and I also logged the initialMessages array after every deletion...I saw it gets updated but not on the screen. Any Idea why its not working??

Answer 1

FlatList is a PureComponent .

It needs a props which is changed in order to re-render. You set your data props as InitialMessages and not messages so there is no state change.

Please set your data props with messages state or else use extraData props to pass some state which can be changed.

import React, { useState } from "react";
import { StyleSheet, FlatList, View } from "react-native";
import ListItem from "../components/ListItem";

import colors from "../config/colors";
import Screen from "../components/Screen";
import ListItemSeperator from "../components/ListItemSeperator";
import ListItemDeleteAction from "../components/ListItemDeleteAction";

const InitialMessages = [
  {
    id: 1,
    title: "T1",
    description: "D1",
    image: require("../assets/Images/mosh.jpg"),
  },
  {
    id: 2,
    title: "T2",
    description: "D2",
    image: require("../assets/Images/mosh.jpg"),
  },
  {
    id: 3,
    title: "T3",
    description: "D3",
    image: require("../assets/Images/mosh.jpg"),
  },
];

function MessagesScreen(props) {
  const [messages, UpdateMessageArray] = useState(InitialMessages);

  const handlerDelete = (message) => {
    console.log("Came to Delete");
    const newArr = messages.filter((m) => m.id !== message.id);
    UpdateMessageArray(newArr);
  };

  return (
    <Screen>
      <FlatList
        data={messages}
        keyExtractor={(message) => message.id.toString()}
        renderItem={({ item }) => (
          <ListItem
            title={item.title}
            subTitle={item.description}
            image={item.image}
            onPress={() => console.log("MESSAGE PRESSED", item)}
            renderRightActions={() => (
              <ListItemDeleteAction onPress={() => handlerDelete(item)} />
            )}
          />
        )}
        ItemSeparatorComponent={ListItemSeperator}
      />
    </Screen>
  );
}

const styles = StyleSheet.create({});

export default MessagesScreen;

Reference 1: https://reactnative.dev/docs/flatlist.html

Reference 2: Why FlatList is not updating dynamically in React Native