CODEWITHSUNDEEP
react-nativereact-native-router-flux
realtebo
realtebo

Reputation: 25691

react-native-router-flux: How to return to previous Scene forcing reload of data?

I'm using a List View

class GroupList extends Component {
  componentWillMount() {
    this.props.fetchGroups();

I fetch from firebase a VERY SHORT list of elements.

export const fetchGroups = () => {
  const { currentUser } = firebase.auth();

  return (dispatch) => {
    dispatch({ 
      type: FETCHING_GROUPS 
    });

    firebase.database().ref(`/users/${currentUser.uid}/groups`)
      .on('value', snapshot => {
        dispatch({ 
          type: GROUPS_FETCHED, 
          payload: snapshot.val() 
        });
      });
  };
};

To create a new item I use the top-right Button offered from react-native-router-flux

    <Scene 
      key="groupList" 
      component={GroupList} 
      title="Gruppi di servizio" 
      hideNavBar={false} 
      rightTitle="Nuovo"
      onRight={() => Actions.groupForm({ formType: NEW_GROUP_FORM_TYPE })}
      sceneStyle={{ paddingTop: 65 }} 
    />

So I click top-right 'new' button and I see my form.

User then save the new group name

This is my action to Save to firebase: 

return (dispatch) => {
  dispatch({
    type: TRYING_TO_CREATE_GROUP,
  });

  firebase.database().ref(`/users/${currentUser.uid}/groups`)
    .push({ groupName })
    .then(() => {
      dispatch({ type: CREATE_GROUP_SUCCESS });
      Actions.groupList({ type: 'reset' });
    })
    .catch((errorText) => { 
      dispatch({ 
        type: CREATE_GROUP_FAILED, 
        payload: errorText
      });
    });
};

What's the problem?

After the first round of 

Actions.groupForm({ formType: NEW_GROUP_FORM_TYPE })}

and 

Actions.groupList({ type: 'reset' })

My GroupList is succesfully refreshed, because componentWillMount is called again.

The problem is that after the SECOND round of groupForm -> groupList my list is no more refreshed.

Adding a console log to componentWillMount I noticed that it's no more executed.

Why?

What's the right way to return to the Scene 'groupList' , forcing the refresh at any cost?

Upvotes: 1

Views: 2879

Answers (5)

NingaCodingTRV
NingaCodingTRV

Reputation: 321

The best way is using a State Manager OR the new Context API of React.

This is the flow:

  • Entering into ScreenOne
  • From ScreenOne open ScreenTwo (both using state management)
  • When finishing all the actions in ScreenTwo, call your function that reloads ScreenOne, at the same time use Actions.pop() to leave current screen (leaving ScreenTwo, and getting back into ScreenOne).
  • Done! your ScreenOne is reloaded with new data.

Summary: The key of this is calling your function that reloads Previous Screen.

Upvotes: 0

Wenyu Luo
Wenyu Luo

Reputation: 1

Inspired by @Matt's solution, I solved my problem. And I am gonna post my sample code.

The idea is that if you wanna refresh the parent page while routing back from a child page, the way I do it is to pass a destroy and an update callback function to the child. The destroy function makes sure that the page falls back to its initial state, while the update function will fetch the latest data.

// parent scene
Actions.childSceneName({
    onBack: () => this.props.fetchData(),
    destroyParent: () => this.props.destroyPage(),
})

So that the child page can invoke the functions before routing back.

// child scene
componentWillUnmount() {
    this.props.destroyParent()
    this.props.onBack()
}

Upvotes: 0

Jingjie Zhan
Jingjie Zhan

Reputation: 985

This has worked for me. Try it. The gist of it is when you define a Scene, you can override its "onBack" function. In order to force refresh of the previous page, you have to provide it with a prop with a different value each time, thus the Math.random(). 

<Scene
   key='title'
   component={YourComponent}
   title='Title'
   onBack={() => Actions.pop({ refresh: Math.random() })}
/>

Upvotes: 1

Kumar
Kumar

Reputation: 469

I solved this by doing the following 

 Actions.replace(sceneKey, props  );

For your code

 Actions.replace('groupForm', { formType: NEW_GROUP_FORM_TYPE }  );

Hope this help!

Upvotes: 1

Matt Aft
Matt Aft

Reputation: 8936

I haven't worked with react-native-router-flux but I've run into the same problem and hopefully can give you enough to figure out how to do it with that library.

Basically It doesn't get called again (componentWillMount) because the component is already mounted and its just returning focus to that component. What you have to do is pass that fetchGroups() to wherever the next scene is and call it again once you're returning back to the GroupList scene which will cause a re-render with the most updated information. Let me know if I should clarify further.

Upvotes: 0

Related Questions