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); */