Question 34009 in React native Question posted in
The official React Native documentation can be found here.

React/React-Native rendering components – React native

I want to display components based on the authorization status. How do I make sure that during rendering I do not display components that fit the default state? I tried changing the state in useLayoutEffect, but I still see a second display of the component I didn’t need

Check this screens plsenter image description here
enter image description here[![enter image description here]

I tried to display the components using useEffect & useLayoutEffect, but did not get the desired effect that I expected

Tags:

2

Answers


  1. 0

    You can use two different stacks and you can check the authentication status from context api (if you are not storing it in local storage and context, you should do so). Here is an article for better understanding.

    Login or Signup to reply.
  2. 0

    In may case I`ve separated the routes in AppRoutes(routes that you can only see if you’re logged) and AuthRoutes(routes this is visible for all profiles). In this file.

    import {useSelector} from 'react-redux';
import AppRoutes from './app.routes';
import AuthRoutes from './auth.routes';
import User from './@types'

const Routes: React.FC = () => {
  const user = useSelector((state: User) => state.user);
  return user?.token ? <AppRoutes /> : <AuthRoutes />;
};

export default Routes;```

In you're App.tsx you can use the Routes(the code above)

return (
<NavigationContainer ref={navigationRef}>
 <NativeBaseProvider>
  <Provider store={Store}>
   <PersistGate loading={null} persistor={Persistor}>
    <Routes />
   </PersistGate>
  </Provider>
 </NativeBaseProvider>
</NavigationContainer>
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search