React Navigation pass props in TabNavigator
18,153
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); */
Related videos on Youtube
Author by
GhostPengy
Updated on August 02, 2022Comments
-
GhostPengy almost 2 years
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> ); } }
-
GhostPengy over 6 yearsSolved issue works perfectly. Note for future begginers to access the props use "this.props.screenProps.cats"
-
Oliver D over 4 yearscan u check this question please its relate?
-
Africa Matji about 4 yearsJust to emphasise this, after making the mistake myself. The prop name needs to be called
screenProps
, this seems to be a default name by react navigation.<YourComponent screenProps={your_data} />