I want to know why my react navigation not updated after state update. here is my code

const [isShow, setIsShow] = useState(false);
useEffect(() => {
     _renderdata()
  }, []);

const _renderdata = async () => {
    try {
      const user_type = await AsyncStorage.getItem('user_type');
      if (user_type !== null) {
        setIsShow(true)
      }
    } catch (error) {
      console.warn((error))
    }
  }

My view

<Tab.Navigator>
  <Tab.Screen> .... </Tab.Screen>
  {
    isShowUser &&
    <Tab.Screen> .... </Tab.Screen>
  }
</Tab.Navigator>

I want to hide one of my tab.screen on the basis of user type but in my case Every time the value of isShow is false and I am not able to view that screen . What is the issue?

full code

const createBottomTabs = (route) => {
  const [isShow, setIsShow] = React.useState(false);
  useEffect(() => {
    setTimeout(() => {
      AsyncStorage.getItem('user_type').then(response => {
        if (response == '"Driver"') {
          setIsShow(true)
          console.log(isShow)
        }
      })
    }, 5000);
  }, [isShow]);

  return (
    <Tab.Navigator
      lazy={true}
      labeled={false}
      shifting={true}
      barStyle={{ backgroundColor: '#ffff', }}
      initialRouteName="Dashboard"
      screenOptions={{ unmountOnBlur: false }}
    >
      <Tab.Screen
        name='Dashboard'
        component={Dashboard}
      />
      <Tab.Screen
        name="Chat"
        component={Chat}
      />
      {isShow ? (
        <Tab.Screen
          name='Orders'
          component={Orders}
        />
      ) : null}
      <Tab.Screen
        name="Notification"
        children={Notification}
      />
      <Tab.Screen
        name="Profile"
        component={Profile}
      />
    </Tab.Navigator>
  )
}

CodePudding user response：

You have a typo. setiisShow should be setIsShow (for correct camel case).

CodePudding user response：

Here is a working code

https://snack.expo.dev/@raajnadar/dynamic-render-bottom-bar-screen

Wait for 5 seconds you will see the tab added

function MyTabs() {
  const [isShow, setShow] = React.useState(false);

  React.useEffect(() => {
    setTimeout(() => {
      setShow(true);
    }, 5000);
  }, []);

  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
      {isShow && <Tab.Screen name="Profile" component={SettingsScreen} />}
    </Tab.Navigator>
  );
}