Sending states between screens react native

Am currently working with an app that will provide you with a class/race/background story from an fantasy api. I used expo’s tab template when i created the project.

So my question is how would I send data that i fetched in my Race screen to my background-story screen in order to fetch the correct background-story? I’ve been trying to googling it but couldnt find an answer that helped, the only thing i found is that its something to do with the navigator, hence why i link it.

Maintabnavigator.js

    import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createBottomTabNavigator, createDrawerNavigator } from 'react-navigation';
import { Icon } from 'expo';
import { Ionicons} from '@expo/vector-icons';
import HomeScreen from '../screens/HomeScreen';
import CharacterScreen from '../screens/CharacterScreen';
import BackgroundDetails from '../screens/CharacterScreens/BackgroundDetails';
import RaceDetails from '../screens/CharacterScreens/RaceDetails';
import ClassDetails from '../screens/CharacterScreens/ClassDetails';


const RaceStack = createStackNavigator({
  race: RaceDetails
});
const ClassStack = createStackNavigator({
  class: ClassDetails
});
const BackgroundStack = createStackNavigator({
  background: BackgroundDetails
});
const GeneratorStack = createStackNavigator({
  generator: CharacterScreen,
});


GeneratorStack.navigationOptions= {
  tabBarLabel: 'Generator',
  tabBarIcon: ({focused}) => (
    <Icon.Entypo
      focused={focused}
      name={'retweet'}
      size={26}
    />
  )
}
RaceStack.navigationOptions= {
  tabBarLabel: 'Race',
  tabBarIcon: ({focused}) => (
    <Icon.MaterialIcons
      focused={focused}
      name={'person'}
      size={26}
    />
  )
}
ClassStack.navigationOptions= {
  tabBarLabel: 'Class',
  tabBarIcon: ({focused}) => (
    <Icon.MaterialCommunityIcons
      focused={focused}
      name={'sword-cross'}
      size={26}
    />
  )
}
BackgroundStack.navigationOptions= {
  tabBarLabel: 'Background Story',
  tabBarIcon: ({focused}) => (
    <Icon.Feather
      focused={focused}
      name={'book'}
      size={26}
    />
  )
}
export default createBottomTabNavigator({
  GeneratorStack,
  ClassStack,
  RaceStack,
  BackgroundStack,
});

Answer

When you navigate from one screen to another as follows:

this.props.navigation.navigate('ContactDisplay', { item });

You may access ‘item’ in the other screen as follows:

console.log(this.props.navigation.state.params.item);

Advertisement

Answer