how to dynamically set drawer items based on authentication in react-navigation? - react-native

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.

Related

React Native Navigation replacement

I have generated all the pages of my desired application separately with custom components and in the order I want. now to navigate between them, if I want to use the Native Stack Navigator, by default it changes my Header and Drawer and Back button, etc. Then I need to replace them all one by one back to my own design, which is not nice.
Is there any better solution to navigate between pages without replacing my custom design of pages?
i.e By pressing the button on the home page, I simply want to replace the home page with the next page, which I have already designed the full structure including back button in header and title and drawer etc. I don't want it to be automatically replaced with another design depending on the platform, in short.
If You want to disable header of a component in navigation Stack
use
options={{ headerShown: false }

how to fix, blank page when trying to use history push in react native

I am working on a APP, where I created a button that navigates you to other page. I imported react native router and use history from react-router dom.
I created seperated folder with login routs (when user is on login screen he can move to sign-up)
Loginrouts.js :
than I created login.js where the button is, it uses useHistory.push() and it calls signup from loginroute.js
But when button is pressed it only shows blank screen, anyone knows why?

Route do not been cleaned when unmountOnBlur

I have an application that pass an order from the screen 1 as a param utilizing this.props.navigation.navigate('Screen',{order}) to the screen 2 and do some stuff in the screen 2. Then I navigate to another screen using the Drawer side menu. When I come back to the screen 2 utilizing the drawer menu the order still in the param (the route was not reseted).
I'm using class Component in my project and when I tried to put something like a reset in the componentWillUnmount, but the react native don't let me do that because this would be a asyncronous call.
In my order class I did (Screen 2):
componentWillUnmout() {
// some code
this.props.navigation.reset();
}
In the Screen 1 I did:
this.props.navigation.navigate('Screen 2', {order});
I tried do what was decribed in this question: https://github.com/react-navigation/react-navigation/issues/6915 but I had no sucess.
How could I reset this params in this conditions? Could I made a listener to reset the route when a navigate to another page in the Drawer Menu?
If your second page is an order details, you better use the stack pile of screens by pushing a new one.
this.props.navigation.push('orderDetails', {order});
Like that, you push a screen at the top of the stack. Navigate function search in your route history and if the screen was already open previously, it came back to it.

React-native Update content of side-menu

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

Dynamically adding tabs in react native app

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