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 of the screenProps, but have no idea how to set it up. All methods I have tried, have resulted in errors.
const EProj = TabNavigator({
Home: { screen: HomeScreen },
Map: { screen: MapG },
Login: { screen: Login },
Profile: { screen: Profile },
}, {
tabBarPosition: 'bottom',
animationEnabled: true,
tabBarOptions: {
activeTintColor: '#1abc9c',
},
});
This is my screen setup. Where should I place the screenProps?
<EProj
screenProps={cats}
/>
Any good examples how to set this up would be helpful. Thanks in advance.
HomeScreen setup:
class HomeScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Home',
};
...
componentWillMount(){
console.log("Starting to load assets from server!");
this.onLoadCats(); /*starts asset loading*/
}
render() {
return (
<View style={styles.container}>
<Text>Welcome to alpha 1.17 This is hard system test.</Text>
<AssetsLoad catsL={this.state.catsL} />
</View>
);
}
}
To create a Top Tab Navigator, we need to use the createMaterialTopTabNavigator function available in the react-navigation library. It is designed with the material theme tab bar on the top of the screen. It allows switching between various tabs by tapping them or swiping horizontally.
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); */
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With