I am working on a application which have two types of users, user and admin, I want to import only those screens which are related to userType after authentication, for now I am importing all screens but I want to do it in this way, import only login screen on stack-navigator and after authentication push the screens related to the userType.
Related
I have 5 different applications developed in react-native, I want give a better experience to my users, so if an application being logged I want the next one not to need to do login again if it is called from within the logged-in app.
How Can I do it?
There could be a lot of ways to do this, for me i use Redux for storing the Auth Token which i generate by Random string function, and i use 2 type of Stack 1) App Stack 2) Auth stack. So before that i wrap it inside a condition where it says { loginKey ?<AppStack/>:<AuthStack/> } where appStack is all the apps screens, AuthStack is login/signup screen and loginKey is redux state which stores the key one time (which we generate on successful login/signup).
Other way is as mentioned in above answer using user - login state and check if login state is true then show user your main apps screen else show user login screen.
I am using Amazon Cognito SDK and while implementing the login flow, getting the following warning
Non-serializable values were found in the navigation state
The login flow consists of two screens
Login screen where a user would enter his registered email id
OTP screen where the user would fill the OTP received via Email
The above warning occurs when I pass the Cognito user (a class object from Cognito SDK) from Login screen to OTP screen, this object needs to passed from Login screen to OTP screen because the sendCustomChallengeAnswer needs that user object in order to verify the OTP entered by the user.
Though the react-navigation library recommends using a global store to pass complex data from one screen to another, I am not utilising any state management library such as redux.
Is there any other way to pass such objects from one screen to another screen?
You can use Context (https://reactjs.org/docs/context.html) to store the information at the root of the component
I used react-native-navigation drawer. I have a sidemenu that displays the name of the logged-in user. Now I want this name changed whenever the user updates his profile. I really dont know how to go about this. On the profile page I imported the Sidemenu like below
import SideMenu from './SideMenu';
and I did
new SideMenu().updateState("new name");
UpdateState(name) is a method in sideMenu that sets state that displays name. Name is not getting changed
i want to set items dynamically in drawer based on login status.
When any user login into application, then some extra drawer items like change password,Inquiry or etc to be shown. Login is not mandatory for app and i have used contentComponent to generate the drawer items.
I am creating an app in which the user selects certain regions from dropdown and i want to create tabs for each selected region dynamically.
I end up using react-native-tab-view and managed to implement dynamic tab navigation.
On our app we have group permissions so if the user is an admin on group he can see the megaphone the first tab and if he is not an admin he can't see.
group side navigation
Tab navigation if the user is admin
Tab navigation if the user is not an admin