React Navigation pass props in TabNavigator React Navigation pass props in TabNavigator android android

React Navigation pass props in TabNavigator


What you can do is create a higher order component that can return the navigation, and in that component's componentDidMount, you can load the data and pass it through screenProps.

Example

const EProj = TabNavigator({  Home: { screen: HomeScreen },  Map: { screen: MapG },  Login: { screen: Login },  Profile: { screen: Profile },}, {  tabBarPosition: 'bottom',  animationEnabled: true,  tabBarOptions: {    activeTintColor: '#1abc9c',  },});class MainNavigation extends React.Component {  constructor(props) {    super(props);    this.state = {cats: []};  }  componentDidMount() {    this.onLoadCats().then((cats) => this.setState({ cats: cats }));  }  render() {    return(<EProj screenProps={{ cats: this.state.cats}} />  }}// Now you can do in your screensconsole.log(this.props.screenProps.cats);/* This is next line is wrong, please check update above */ /* console.log(this.props.navigation.state.params.cats); */