How to call Actions.pop() and refresh the previous scene? React Native, Redux, React-Native-Router-Flux

Question

I want to redirect the user to the previous screen after they create a record but also refresh the previous listing screen to reflect the new record

This is the function in my actions file

fetch(CREATE_POST, request).then(response => {
        dispatch({ type: action });
        Actions.pop();
        setTimeout(() => { Actions.refresh({}) }, 10);
    }).catch(error => {
        console.log(error);
    });

However, when Actions.pop() is called, it takes me to the previous screen but does not refresh it.

I tried with Actions.pop({ type: reset }) but no luck

Any help would be really appreciated!

Answer 1

Have you tried Actions.pop({ refresh: {} }) or if you want to be more specific about which props should be refreshed you can actually specify Actions.pop({ refresh: { user: res.user } })

Answer 2

best approach is to wrap your scenes into an stack and use reset instead. this stack can be nested stack its not a problem, reset will work on last stack and has no effect on parent stack.

<Stack key="root">

... scenes

   <Stack key="group1">
      <Scene key="list" initial>
      <Scene key="add_update">//after submit: Actions.reset("list");
   </Stack>

</Stack>

good luck.

Answer 3

I don't know why we have to use this but i saw this in an github question that i cant found it to mention that, accept my apologize . At first you have to wrap your scene as you can see in react router flux lightbox refrences:

‘https://github.com/aksonov/react-native-router-flux/blob/master/docs/API.md#lightbox-lightbox’

And then I found that this works.

Actions.pop();
        setTimeout(() => {
            Actions.refresh({
               p :Math.random()
            });
        }, 0);

Answer 4

simply with your function add this code at the end when you fetch data or do anything and you want to return back to screen, so onPress event you can place it:

Actions.refresh({key:Math.random()})

 onPress={()=>{
    do something....
    Actions.refresh({key:Math.random()})
    }}

that's all.

To the reference of your code:

fetch(CREATE_POST, request).then(response => {
        dispatch({ type: action });
        Actions.pop();
        setTimeout(() => { Actions.refresh({key:Math.random()}) },10);
    }).catch(error => {
        console.log(error);
    });

Answer 5

You can use the onEnter method. It will be called whenever you land on a particular page. So it can be refresh or reset.

option1:

 static onEnter() {
    Actions.pageName({ type: ActionConst.RESET });
  }

option2:

 static onEnter() {
       Actions.pagename({ type: ActionConst.REFRESH, key: Math.random() });
   }