Conditional render in drawer navigator React Native

Question

I am programming small app in React Native with Redux. When user register, I want to show him "Setup screen" where he can set up his bank account. Also when he log in or register, I am checking his bank account on the backend in Redux and then send them in the component where I want to retrieve this data. All works fine, but data come after some time (I think this is the whole problem). Then based on this data I want to change initialRouteName of my DrawerNavigator. If it´s empty string or undefined return Setup screen, otherwise return HomeDrawerScreen. But it always returns me Setup screen. This is my code:

  const Drawer = createDrawerNavigator();

  export class Main extends Component {
  constructor(props) {
  super(props);

   this.role = null;
   this.state = {
   loading: true,
   loaded: false,
   };
   } 

    componentWillReceiveProps(nextProps) {
    if (this.props.bankAccount !== nextProps.bankAccount) {

    if (
    this.props.bankAccount !== "" ||
    this.props.bankAccount !== undefined  /*THIS MEANS DATA DOES NOT CAME FROM REDUX YET*/
     ) {
     this.setState({ loaded: true });
   
  }
}
     }
     render() {
     return (
     <Drawer.Navigator
     drawerContent={
     this.role
     ? props => <DrawerContentAdmin {...props} />
     : props => <DrawerContent {...props} />
    }
    drawerStyle={{ backgroundColor: "#4949FF" }}
    initialRouteName={this.state.loaded ? "HomeDrawer" : "Setup"}
  >
   <Drawer.Screen
      name="Setup"
      component={Setup}
      options={{
        swipeEnabled: false,
      }}
    />
    <Drawer.Screen name="HomeDrawer" component={MainTabScreen} />
   /...*OTHER SCREENS*/
  </Drawer.Navigator>
   }

   }

score 1 · Answer 1 · answered Jun 01 '21 at 14:25

From what I can tell, you dont hhave your conditional setup in for the user to go to any other screen other than the Setup. I think you want something like this

<Drawer.Navigator>
{isSignedIn ? (
  <>
   <Drawer.Screen
      name="Setup"
      component={Setup}
      options={{
        swipeEnabled: false,
      }}
    />
  </> ) :(
   <Drawer.Screen name="HomeDrawer" component={MainTabScreen} />
   /...*OTHER SCREENS*/
  )}
</Drawer.Navigator>

Conditional render in drawer navigator React Native

1 Answers1