Passing location value to another component in React native - react-native

Question

I am trying to send the latitude and longitude values(fetched using navigator.geolocation in home screen) to the detail screen, but instead of actual values, null value is being received by the details page.This is my code:
import React from 'react';
import { View, Text, Button } from 'react-native';
import { createStackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
latitude: null,
longitude: null,
error: null,
};
}
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button title="Add New Outlet" onPress={() => {
navigator.geolocation.getCurrentPosition(
(position) => {
this.setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
error: null,
});
},
(error) => this.setState({ error: error.message }),
{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
);
this.props.navigation.navigate('Details', {latitude: this.state.latitude, longitude: this.state.longitude,});
}}/>
</View>
);
}
}
class DetailsScreen extends React.Component {
render() {
const { navigation } = this.props;
const latitude = navigation.getParam('latitude', 'NO-ID');
const longitude = navigation.getParam('longitude', 'some default value');
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Text>latitude: {JSON.stringify(latitude)}</Text>
<Text>longitude: {JSON.stringify(longitude)}</Text>
</View>
);
}
}
const RootStack = createStackNavigator(
{
Home: HomeScreen,
Details: DetailsScreen,
},
{
initialRouteName: 'Home',
}
);
export default class App extends React.Component {
render() {
return <RootStack />;
}
}
The values are getting passed successfully between the components but current state values are not getting passed.Please help...

Answer 1

This can be an issue of the asynchronous nature of this.setState(). Try modifying the code a little bit. Instead of calling this.props.navigation.navigate() after the this.setState(), try calling it within the this.setState() in a callback as a second parameter. Here is how you can do it:
this.setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
error: null,
}, () => {
this.props.navigation.navigate('Details', {latitude: this.state.latitude, longitude: this.state.longitude,})
});
I hope that helps. Let me know if it works.