How to send parameters from screen to stack navigator?

Question

I am a newbie to react native. I am using a stack navigator inside a tab navigator; I have to navigate multiple screens inside each tab. i am able to send parameters from my default class HomePage to my nested classes in my tab and stack navigators.

export const MyApp = TabNavigator({
Asset: {
screen: AssetScreen,
},
Sensors: {
screen: sensorsStack,
},
Settings: {
    screen: settingStack
 },
}
export const sensorsStack = StackNavigator({
sensors : { screen: SensorScreen },
sensorDetails : { screen: SensorDetails }
});
export const settingStack = StackNavigator({
 settings: { screen: SettingsScreen },
 about : { screen: About },
 environment : { screen: Environment }
});

export default class HomePage extends Component {
constructor(props) {
  super(props);
  this.state = {
   assetID:'xyz',
   authToken:'xyzz'
  }
}
static navigationOptions = {
  header: null
};
render() {
    const screenProps = {
        asset: {
            assetID: this.state.assetID,
            authToken : this.state.authToken,
        },
    }
    return (
        <MyApp screenProps={screenProps} />
    );
}
}

Now, i want to send a parameter from 'SensorScreen' to 'SensorDetails'. I have tried sending parameters using

 NavigationActions.navigate({ routeName: 'sensorDetails' ,params: { sensorType:'Fuel',}});

from 'SensorScreen' class. But was not able to get the parameter in 'SensorDetails' class. How can i pass this params?

Simon Johansson Simon Johansson · Accepted Answer · 2018-03-09T21:56:06

A little late answer but might help others that ends up here. Instead of using NavigationActions you could try navigation from sensorScreen to sensorDetails with navigate and passing some extra variables.

this.props.navigation.navigate('SensorDetails',{sensorType:'Fuel'})

The passed object can then be read in the second screen by

this.props.navigation.state.params.sensorType

A minimal example of the case can be seen in these lines. Observe that this is a stupid on icon tab bar. But it is kept that way since the question was about a tab bar with stacks on each tab. And new tabs are easily added.

import React,{Component} from 'react'
import { Text, View, Footer,Button } from 'react-native'
import {StackNavigator,TabNavigator} from 'react-navigation'

export class SensorScreen extends React.Component {
  render() {
    return (<Button
              onPress={() => this.props.navigation.navigate('SensorDetails',{sensorType:'Fuel'})}
              title="Go to Sensor Details"
            />)}}

export class SensorDetails extends React.Component {
  render() {
    return (<View>
              <Text>{this.props.navigation.state.params.sensorType}</Text>
            </View>);}
  }

const sensorsStack = StackNavigator({
  sensors : { screen: SensorScreen },
  SensorDetails : { screen: SensorDetails }
});

const MyApp = TabNavigator({
  Sensors: {
    screen: sensorsStack,
  },
});

export default class Nested extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
        <MyApp/>
    );
}
}

Hope this helps.

How to send parameters from screen to stack navigator?

1 Answers