CODEWITHSUNDEEP
react-nativereact-navigation
jogesh_pi
jogesh_pi

Reputation: 9782

Passing props from One Screen to Another with createBottomTabNavigator

I am trying to passing some properties from one screen to another screen through createBottomTabNavigator. I am using react-navigation.

const AppNavigator = createBottomTabNavigator({
    Home: {screen: HomeScreen}, 
    Map: {screen: MapScreen}
}, {
    initialRouterName: 'Home',
});

on HomeScreen I have set the prop with this.props.navigation.setParams in componentDidMount and if i check this.props.navigation on same screen its displayed properly. 

componentDidMount() {
    navigator.geolocation.getCurrentPosition(
        position => {
            const location = JSON.stringify(position);
            this.props.navigation.setParams({position: location});
        },
        error => {
            Alert.alert(error.message);
        }, 
        { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
    );
}

I need to access this props to other screens like MapScreen but I am getting null on the other screen.

I am not sure if it is the right way. I know that I can send with this.props.navigation.navigate but as you see I am using the tabNavigator so not sure where to start.

Upvotes: 2

Views: 956

Answers (2)

Anand S
Anand S

Reputation: 820

In Home Component use like this,

this.props.navigation.navigate('Map',
      {
        name: 'Anand',
        mob : '90090'
      }
    );

And in the Map Component, you can use name like this.

this.props.navigation.state.params.name

And in the Map Component, you can use mob like this.

this.props.navigation.state.params.mob

Upvotes: 0

komal deep singh chahal
komal deep singh chahal

Reputation: 1259

I would highly recommend to Do with redux rather than passing params. Redux is meant to share properties from one screen to another.

Upvotes: 1

Related Questions