React Navigation pass props in TabNavigator

Question

I have props what are loaded from the server on the initial screen. I want to pass them to the rest of the tab screens. However, I have not found any examples online. I know

Answer 1

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 screens
console.log(this.props.screenProps.cats);

/* This is next line is wrong, please check update above */ 
/* console.log(this.props.navigation.state.params.cats); */