Pass to props to all screen of topnavigations - react-native

Question

I'm trying to send props to all the screen children but only the default screen get the props.
I want to send the props to all the screen of the top navigation. I tried to navigate directly to the tab but it doesn't work either . I don't know what i'm doing wrong.
class RestaurantSummary extends Component {
render () {
return (
<TouchableRipple
onPress={() => this.props.nav.navigation.navigate("Plat", { restaurant: this.props.restaurant,
token: this.props.token, uri: uri})}>
<Card style={styles.container}>
<Card.Cover source={{ uri: uri }} />
<Card.Content style={styles.content}>
<Text style={styles.Text}>{this.props.restaurant.name} - {this.props.restaurant.address} </Text>
</Card.Content>
</Card>
</TouchableRipple>
)
}
}
Here is how i built my navigations . I have a switch navigator which allows me to switch between the app stack and the home stack. And in the App stack i have top bar navigations.
const TabScreen = createMaterialTopTabNavigator(
{
Entrées: { screen: Entrées },
Plat: { screen: Plat },
},
{
tabBarPosition: 'top',
swipeEnabled: true,
animationEnabled: true,
tabBarOptions: {
activeTintColor: '#FFFFFF',
inactiveTintColor: '#F8F8F8',
style: {
backgroundColor: '#633689',
},
labelStyle: {
textAlign: 'center',
},
indicatorStyle: {
borderBottomColor: '#87B56A',
borderBottomWidth: 2,
},
},
}, {
initialRouteName: 'Plat',
}
);
const top = createStackNavigator({
TabScreen: {
screen: TabScreen,
navigationOptions: {
headerStyle: {
backgroundColor: 'transparent',
},
headerTintColor: '#FFFFFF',
title: 'TabExample',
},
},
});
const AuthStack = createStackNavigator({
SignIn: {
screen: SignIn
},
SignUp: {
screen: SignUp
},
SignUpBiss: {
screen: SignUpBiss
}
},{
navigationOptions: {
headerTransparent: true,
},
mode: 'modal',
headerBackTitleVisible: 'true'
})
const AppStack = createStackNavigator({
Home: {
screen: Home
},
tab: top,
RestaurantDetail: {
screen: RestaurantDetail,
navigationOptions:()=>{
return {
tabBarVisible:false,
};
}
},
})
AppStack.navigationOptions = ({ navigation }) => {
let tabBarVisible = true;
if (navigation.state.index > 0) {
tabBarVisible = false; }
return {
tabBarVisible,
}
}
const bottomNav = createBottomTabNavigator({
Home : AppStack,
Logout : {screen: Logout}
})
const Nav = createSwitchNavigator({
App: bottomNav,
Auth: AuthStack
}, {
initialRouteName: 'Auth',
})
export default createAppContainer(Nav)

Answer 1

I saw your problem and I feels your code is little bit in a chaos.
firstly you can change
onPress={() => this.props.nav.navigation.navigate("Plat",
to
onPress={() => this.props.nav.navigation.navigate("TabScreen",
and then try this code in your Tab Screens
this.props.navigation.dangerouslyGetParent().getParam('restaurant')
this.props.navigation.dangerouslyGetParent().getParam('token')
this.props.navigation.dangerouslyGetParent().getParam('uri')
Hope it helps .feel free for doubts