react native navigation - update list in screen on add/update/delete items

Question

I am building a mobile app using react native. I am using the stack navigator from react-native-navigation library.

the stack has two screens, the first screen ItemsListScreen displays a list of items with add button, clicking the add button navigates to the second screen AddItemScreen which displays some inputs for the item with a save button. clicking the save button will navigate back to the list screen.

Items are saved currently on a local SQLite database, but in future will be saved on a server.

ItemsListScreen.js

import React, { useEffect, useState, useContext } from "react";
import { Button, Image, Platform, StyleSheet, View, TouchableOpacity } from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import { Ionicons } from "@expo/vector-icons";

import DatabaseContext from "../db/DatabaseContext";

export default function ItemsListScreen({ navigation }) {
    const db = useContext(DatabaseContext);

    const [items, setItems] = useState([]);

    useEffect(() => {
        navigation.setOptions({
            headerRight: () => {
                return (
                    <TouchableOpacity activeOpacity={0.5} style={{ paddingRight: 10 }} onPress={() => navigation.navigate("AddItem")}>
                        <Ionicons name="md-add" size={30} />
                    </TouchableOpacity>
                );
            },
        });

        db.getItems().then((data) => {
            setItems(data);
        });
    }, []);

    return (
        <View style={styles.container}>
            <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
                {items.map((item, index) => (
                    <View key={index} style={styles.item}>
                        <Text style={styles.subSection}>{item.title}</Text>
                    </View>
                ))}
            </ScrollView>
        </View>
    );
}

AddItemScreen.js

import React, { useState, useEffect, useContext } from "react";
import { StyleSheet, View, Dimensions, TextInput, ScrollView, TouchableOpacity, Picker, Switch } from "react-native";
import DateTimePicker from "@react-native-community/datetimepicker";
import { Ionicons } from "@expo/vector-icons";

import DatabaseContext from "../db/DatabaseContext";

export default function AddItemScreen({ navigation }) {
    const db = useContext(DatabaseContext);

    const [item, setItem] = useState({
        title: "",
        description: "",
        // more properties
    });

    const saveItem = () => {
        db.saveItem(item);
        navigation.navigate("ItemsList");
    };

    useEffect(() => {
        navigation.setOptions({
            headerRight: () => {
                return (
                    <TouchableOpacity activeOpacity={0.5} style={{ paddingRight: 10 }} onPress={saveItem}>
                        <Ionicons name="md-save" size={30} />
                    </TouchableOpacity>
                );
            },
        });
    }, [item]);
    
    return (
        <View style={styles.scene}>
            <ScrollView>
                <Text style={styles.label}>Title</Text>
                <TextInput style={styles.field} value={item.title} onChangeText={(text) => setItem((prevState) => ({ ...prevState, title: text }))} />

                <Text style={styles.label}>Description</Text>
                <TextInput style={styles.field} value={item.description} onChangeText={(text) => setItem((prevState) => ({ ...prevState, description: text }))} />          
                
                {/* more inputes */}
            </ScrollView>
        </View>
    );
}

My problem is that the list on ItemsListScreen is not updated when a new item is added. I need to reload the app to get the list updated.

I tried to remove the second parameter (the empty array) from the useEffect in ItemsListScreen, it works but I think it is a bad solution as it keeps reading from the db on each re-render.

How can I refresh the list whenever the user navigates back to the list screen? I thought the useEffect will be executed whenever the screen is activated but it seems not.

Answer 1

You will be resolved by adding navigation focus listener to ItemsListScreen.js. Replace your useEffet in this way

useEffect(() => {
        navigation.setOptions({
            headerRight: () => {
                return (
                    <TouchableOpacity activeOpacity={0.5} style={{ paddingRight: 10 }} onPress={() => navigation.navigate("AddItem")}>
                        <Ionicons name="md-add" size={30} />
                    </TouchableOpacity>
                );
            },
        });

        const unsubscribe = navigation.addListener('focus', () => {
             db.getItems().then((data) => {
                setItems(data);
             });
        });

        return unsubscribe;

        
    }, []);