React Native - Triggering useeffect from another screen

Question

I have a table that has items in it. When I click a specific item's edit button. It goes to edit page but when I submit an edit of that item. It goes back to main table page but the table page won't be updated. So, I think I need to trigger the useeffect function. To do that I need to update the state in main table page from another screen that is edit page screen.

my apps are not class-based. all of them functional. Here are my codes.

Main Table Page:

  //I created a state to update
  const [reload,
    setReloader] = useState(''); 

   I try to send the state to change it in edit item screen. 
  <TouchableOpacity onPress={() => navigation.navigate('addProduct', [reload])}> 

Edit Item Page:

  const [reload,
    setReloader] = useState(route.params.reload); //I tried to pass state but it didn't work like that.

score 1 · Answer 1 · answered Oct 01 '21 at 08:04

Pass a function through navigation Pass the function in which you will be updating the state. i.e. setReloader

<TouchableOpacity onPress={() => navigation.navigate('addProduct', {setReloader})}>

On addProduct screen get the function by

const setReloader = route.params.setReloader;

once you have edited simply call the setReloader function on the edit page and then go back to the main screen

Using the navigation lifecycle method. On the main screen, you can add a focus lister

const focusListner = navigation.addListener('focus', () => {
          //call the API to fetch the updated data from the server
        });

Focus listener is called whenever the return to that screen

When I try to update setReloader it gives error that "setReloder is read-only" in edit page. — nogabemist, Oct 01 '21 at 08:08

Nooruddin Lakhani · Answer 2 · 2021-10-01T08:20:45.427

0

You can do something like:

//I created a state to update
  const [reload, setReloader] = useState(''); 

  const updateState = (value) => {    
    setReloader(value);
  }

   Send `setReloader` as callback to update on edit screen
  <TouchableOpacity onPress={() => navigation.navigate('addProduct', {callback: updateState})}>

Edit Item Page:

const callback = route.params.callback;

// call `callback` which will update view on parent screen

edited Oct 01 '21 at 08:20

answered Oct 01 '21 at 07:39

Nooruddin Lakhani

7,507
2
19
39

it gives error that "setReloder is read-only". – nogabemist Oct 01 '21 at 08:00
@nogabemist check my updated answer – Nooruddin Lakhani Oct 01 '21 at 08:20
How can I use callback in editpage? I did this but nothing happened. navigation.navigate('Main Page', callback) – nogabemist Oct 01 '21 at 09:11
It didn't work It calls function only when I press edit button. – nogabemist Oct 01 '21 at 09:36

score 0 · Accepted Answer · answered Oct 01 '21 at 10:46

0

import { useIsFocused } from "@react-navigation/native";

const isFocused = useIsFocused();

Well it is worked for me. To trigger.

useEffect not called in React Native when back to screen

answered Oct 01 '21 at 10:46

nogabemist

402
5
29

React Native - Triggering useeffect from another screen

3 Answers3