Can only update a mounted or mounting component. When using NavigationActions.Reset

Question

I'm currently working on an edit screen. The flow is as follows: There is TabNavigator where one of the tabs has a MapView with a variety of markers on. The user can then choose a marker to view the information about the marker. After pressing the marker, the user can then change the location of the marker and then once they have changed the location of the marker and they have updated the location on the api I would like to take them back to the map view with all the markers. Currently the back option takes them to the case where they can change the location of the marker again.

My set up for my navigation is as follows:

StackNavigator:
  MainTabNavigator,
  HomeScreen,
  InformationScreen
  //OtherScreens.
  
MainTabNavigator:
  Home: {
    screen: HomeScreen
  }
  //Other tabs

Within the render method of the home screen I have something like this:

return (
        <MapView
          style={{ flex: 1 }}
            onRegionChange={this.onRegionChange}
            showsUserLocation={true}
            showsMyLocationButton={false}
        >
        {!editing && this.state.markers.map((marker) => {
          return(
            <MapView.Marker
              key={marker._id}
              coordinate={{latitude: +marker.latitude, longitude: +marker.longitude}}
              anchor={{x: 0.5, y: 1}}
              centerOffset={{x: 0.5, y: 1}}
              onPress={() => {this.onPress(marker)}}
              >
              </MapView.Marker>
          )
         })
        }
        {editing &&
          <MapView.Marker
           coordinate={{latitude: +marker.latitude, longitude: +marker.longitude}}
           anchor={{x: 0.5, y: 1}}
           centerOffset={{x: 0.5, y: 1}}
           onDragEnd={(e) => { var new_marker = Object.assign({}, marker); new_marker.latitude = e.nativeEvent.coordinate.latitude; new_marker.longitude = e.nativeEvent.coordinate.longitude; this.props.dispatch(setMarker(new_marker));}}
           draggable
          >

          </MapView.Marker>
        }
        </MapView>
        </View>
      );

Where the editing prop is managed by my redux state.

In the information screen I have the following code to update the location of the marker and then reset the state.

  update = () => {
    //Commit the changes that the user made.
    const { marker, user, navigation } = this.props;
    this.setState({
      loading: true
    })
    //Save the changes on the API.
    fetch(API).then(response => {
      this.setState({
        loading: false,
        changeMade: false,
        editing: false,
      });
      const resetAction = NavigationActions.reset({
        index: 1,
        actions: [
        //Main is the MainTabNavigator
            NavigationActions.navigate({ routeName: 'Main' }),
        //InformationScreen is the screen where we do the editing.
            NavigationActions.navigate({ routeName: 'InformationScreen'})
        ],
        key: null
      });
      this.props.navigation.dispatch(resetAction);

      this.props.dispatch(setEditing(false));
    });

  }

Now it seems to navigate to the screens when it's resetting the stack which is just an awful user experience, and then is unresponsive on the HomeScreen after you go back. I'll investigate this it could be an infinite loop or something. If I need to explain something clearer or add more code please just leave a comment I'll try my best to explain better.

I'm currently investigating switching off all animations here: React Navigation: Navigate Back To Root using NavigationActions.reset, goBack and getStateForAction