Conditional Screen Rendering - How to hide origin screen tabBar and Header - react-native

Question

What i'm trying to achieve from the Orders Screen is: If the user is not logged in he is directed to another screen. Which is also part of the stack. The transition is well but the header of origin screen (which in this case is orders.js) doesnt change
Orders.js
class Orders extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
headerTitle: <TextHeader title={I18n.t('tabsLang.orders')} />,
headerTitleStyle: header.title,
headerLeft: <View />,
headerRight: <View />,
};
};
constructor(props) {
super(props);
this.state = {
orders: true,
isLoggedIn: false,
};
}
render() {
if (this.state.isLoggedIn) {
if (!this.state.orders) {
//Orders
return (
<View style={styles.container}>
<OrderItem />
</View>
);
} else {
//No Orders Screen
return <NoOrders />;
}
} else {
return <UserSplash/>;
}
}
}
export default Orders;
UserSplash.js
class Login extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
header: null,
};
};
render() {...
}
}

Answer 1

There are two things I need to point out.
1. Double Header confusion
<Order>
Static navigationOptions = {
headerTitle: Something
}
render(){
if(state.isLoggedIn){
<View>
... Show orders or not
</View>
} else {
<UserSplash>
Static navigationOptions = {
header: null
}
</UserSplash>
}
}
</Order>
if you look at this, when you disable the header of the UserSplash, you are literally disabling the doubleheaders last one. If you don't disable it, you will see 2 headers on top of the view.
2. NavigationOptions
When you are setting the
navigationOptions
you are declaring it as Static if you are realized that. So it is not possible to change the parameters. I suggest you separate the UserSplash from the Order.js and just Navigate with your navigation.
Hope it helps. Good luck!