Null is not an object(evaluating 'mapView.current.animateToRegion') - react-native

Question

In component Description I have a button, when I press the button I send to Map component coordinates of marker:
const onNavigationTap = () => {
navigation.navigate('Map', {
destination: data["data"].coordinates,
});
}
In component Map I have condition:
const mapView = React.createRef();
if (route.params){
mapView.current.animateToRegion({
latitude: route.params.destination.latitude,
longitude: route.params.destination.longitude,
latitudeDelta: 0.4,
longitudeDelta: 0.4,
},1000);
}
return (
<MapView ref={mapView} />
)
So when I open Map I want to show region near marker. I've tried to create a button on Map screen:
<TouchableOpacity style={{
position: 'absolute',
top: '5%',
alignSelf: 'flex-start'
}} onPress={animateMap}><Text>Start</Text></TouchableOpacity>
and then I created function:
const animateMap = () => {
mapView.current.animateToRegion({ // Takes a region object as parameter
latitude: destination.latitude,
longitude: destination.longitude,
latitudeDelta: 0.4,
longitudeDelta: 0.4,
},1000);
}
And this solution with button on Map screen working fine but what I want is to animateToRegion not on button press, but when user opens the Map from Description component. I don't understand why in first case I got Null is not an object(evaluating 'mapView.current.animateToRegion'). Please tell me what should I do if I want to animateToRegion using params that I get from another component?

Answer 1

It seems that the error you got is because mapView.current.animateToRegion is null.
You can follow this sample code and code snippet below on how to achieve your use case:
App.js
import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import MapScreen from './Map'
function HomeScreen({ navigation }) {
const onBtnPress = () =>{
navigation.navigate('Maps', {
destination: { latitude: 40.463667, longitude: -3.74922 },
});
}
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={onBtnPress}
/>
</View>
);
}
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Maps" component={MapScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
Map.js
import React, { Component } from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';
import MapView, { Marker, Circle, Polyline } from 'react-native-maps';
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
map: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
});
function Map (props){
const onMapLoad=()=>{
console.log(this.mapView)
console.log(props.route.params.destination.latitude)
this.mapView.animateToRegion({
latitude: props.route.params.destination.latitude,
longitude: props.route.params.destination.longitude,
latitudeDelta: 0.4,
longitudeDelta: 0.4,
},1000);
}
return (
<View style={styles.container}>
<MapView
ref={(ref) => this.mapView = ref}
style={styles.map}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
onMapReady={onMapLoad}
>
</MapView>
</View>
);
}
export default Map;