React Native Maps ref issue - react-native

Question

I have a react-native-maps MapView which is utilized in a fitToCoordinates function. The function zooms the map to fit a start point (current user location) and an end point. Below is the MapView object:
<MapView
ref={map => { this.map = map; }}
region={{
latitude: this.props.startLatitude,
longitude: this.props.startLongitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
}}
style={styles.mapContainer}
showsCompass={false}
showsUserLocation
>
<MapViewDirections
origin={{ latitude: this.props.startLatitude, longitude: this.props.startLongitude }}
destination={this.props.optimalDestination}
apikey={GOOGLE_API_KEY}
strokeWidth={2}
strokeColor={COLORS.MAIN.hexCode}
/>
{this.walkLine()}
{this.optimalAddressFound()}
{this.fitCoordinates()}
</MapView>
The fitToCoordinates function referenced in the MapView object is as follows:
fitCoordinates() {
if (this.props.optimalAddressFound && this.props.destinationMapFit) {
this.map.fitToCoordinates(
[{ latitude: this.props.startLatitude,
longitude: this.props.startLongitude },
{ latitude: this.props.optimalAddressLat,
longitude: this.props.optimalAddressLng }],
{ edgePadding: { top: 30, right: 30, bottom: 30, left: 30 } }
);
}
}
Everything works fine, except when a user opens the React Navigation Drawer Menu, navigates to another page, and then returns to the Map page. If they do that, the ref to the MapView object becomes undefined and the fitToCoordinates function fails (TypeError: Cannot ready property 'fitToCoordinates' of undefined).
My question is, how can I maintain the map ref if my user navigates to other screens? I have tried creating a function to store the MapView object in my Redux store but it seems that the Redux store cannot accept an object in the Reducer.

Answer 1

if you use react-navigation, you would need to set a key for your Map-Screen to make sure the same screen is reused instead of creating a new one each time.
something like
navigation.navigate({key: 'map-screen', routeName: 'Map'});