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?

Solution

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.