Pass props to a nested Tabnavigator - reactjs

Question

I am working with react native for 3 months now and i have this problem now for several days without any solution.
The Problem:
I have a nested TabNavigator inside a StackNavigator. Both of these navigators are inside a stateless component:
const MyStackNav = StackNavigator({
Tabs:{
screen: TabNavigator({
Tab1: { screen: TabScreen1},
Tab2: { screen: TabScreen2},
Tab3: { screen: TabScreen3},
...(CONDITION ? { Tab4: {
screen: TabScreen4
}} : {})
})
}
StackScreen1:{
screen: StackScreenOne,
},
StackScreen2:{
screen: StackScreenTwo,
},
})
Calling of the component:
class MainApp extends React.Component {
constructor(props)
{
super(props);
this.state = {
condition: false,
};
}
render() {
return (
<MyStackNav/>
);
}
}
How can I pass the condition from my class MainApp to the condition variable inside the MyNavStack component for the conditional rendering?
So Tab4 should only be rendered if CONDITION is true.
And the second question would be:
How can I pass a prop from my class MainApp to, for example, the first tab screen?
Thanks in advance!

Answer 1

You can give you MyStackNav a property like: <MyStackNav condition={this.state.condition} />
In the MyStackNav you could say:
const MyStackNav = props => StackNavigator({
Tabs:{
screen: TabNavigator({
Tab1: { screen: TabScreen1},
Tab2: { screen: TabScreen2},
Tab3: { screen: TabScreen3},
...(props.condition? { Tab4: {
screen: TabScreen4
}} : {})
})
}
StackScreen1:{
screen: StackScreenOne,
},
StackScreen2:{
screen: StackScreenTwo,
},
})
You don't need to create a React.component, to pass down props.
You can also expand it a bit, in case you'd like to do a little bit more in your component:
const MyStackNav = (props) => {
const { condition } = props;
return StackNavigator({
Tabs: {
screen: TabNavigator({
Tab1: {
screen: TabScreen1
},
Tab2: {
screen: TabScreen2
},
Tab3: {
screen: TabScreen3
},
...(condition ? {
Tab4: {
screen: TabScreen4
}
} : {})
})
}
StackScreen1: {
screen: StackScreenOne,
},
StackScreen2: {
screen: StackScreenTwo,
},
})
}