'Refresh Screen A when goBack with React Native using Hooks

I have a simple doubt that I can hope somebody can help me with. I have a simple app that hava a main screen where loads all data that I get from a SQLite database, but, when I go to the 'Add To The Database Screen' and add some data and record in the database, I use a function to go back to the previous screen (props.navigation.goBack()).

Unfortunately, when I arrive at the screen A, my hook does not 'refresh' or update the data from the database. Is there a way to make it refresh the screen A to make a new call to the database and refresh data with the new data?

ps: to make the call to database, I use the today date to get data in a query, so my date does not update.

Here's my code:

ScreenA.js

import React, { useEffect, useState } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';

export default function ScreenA() {

   const [data, setData] = useState([]);

    useEffect(() => {
        setData(getDataFromApi())
    }, []);

    return(
        <View>
            { apiResponse() }
            <TouchableOpacity onPress={() => { props.navigation.navigate('ScreenB') }}
                <Text>Add data</Text>
            </TouchableOpacity>
        </View>
    )
}

And here is the ScreenB.js

import React, { useEffect } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';

export default function ScreenB() {

    function goBackToScreenA() {
        addDataToDatabase();
        props.navigation.goBack();
    }

    return(
        <View>
            <TouchableOpacity onPress={() => { goBackToScreenA() }}>
                <Text>Go Back</Text>
            </TouchableOpacity>
        </View>
    );
}

Solution 1:^[1]

I've fixed this bug by killing the component to go to the ScreenB, I just use props.navigation.replace('ScreenB') insted use navigate. So, when I comeback to ScreenA, it just load the ScreenA again. Like the first time. And in the goBack() I make the same, change the go back with replace('ScreenA') after add the data to database.

Solution 2:^[2]

If you are using reactnavigation then you can subscribe to the navigation lifecycle

 React.useEffect(() => {
const unsubscribe = navigation.addListener('focus', () => {
  // Screen was focused
  // Do something
});

    return unsubscribe;
  }, [navigation]);

https://reactnavigation.org/docs/navigation-lifecycle

Solution 3:^[3]

import { useCallback } from 'react';
import { useFocusEffect } from '@react-navigation/native';

export default function ScreenA() {
    useFocusEffect(
        useCallback(() => {
            setData(getDataFromApi());
        }, [])
    );
}

Solution 4:^[4]

You can achieve this passing props to next screen. when get back from that screen need to call that props.

eg.

Screen A

onBackEvent=(event)=>{console.log(event)}

onPress=()=>{
this.props.navigation.navigate("ScreenB",{onBackEvent:this.onBackEvent.bind(this)})
}

Screen B When you are going back just add this line before back

this.props.route.params.onBackEvent({update:true})

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	ofernandoavila
Solution 2	Sam van beastlo
Solution 3	Samuel De Backer
Solution 4	Bhavin Parghi

'Refresh Screen A when goBack with React Native using Hooks

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]