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.
Related
I have a stack navigator in React Native with around 14 screens. When a user clicks next, I use navigation.navigate to go to the next page. I have a lot of parameters and I want to know if I have to explicitly write out each parameter each time the user goes to the next page, or will it carry over from before?
E.g to navigate between screen 1 and screen 2, it passes the value of email:
navigation.navigate("Screen2", {
email: await getData("email"),
});
Then on Screen 2, it navigates to screen 3, not writing email as a parameter:
navigation.navigate("Screen3",
username: uname.trim(),
});
Will screen 3 be able to access/use route.params.email, since it was passed from Screen 1 to Screen 2?
I'm struggling to understand the existing code and thought this might be a solution to the problem I'm facing. The value 'email' is not used in every screen but it is used in both screen 1 and screen 9, so in between this value is not passed between the screens.
No, email will not be available in the nested screens where you didn't pass the email as a param.
I suggest you to use React Context Api, its great for smaller projects for state management.
If your project is large with more than 30 40 screens then you can go with such libraries like Redux and Recoil.
I hope this answer will help you out. Thanks!
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 }
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?
I am trying to figure out displaying a screen with new information, which is already in stack.
The screen order is like
Profile A -> Followers List of Profile A (clicking on Profile B) -> Profile B -> Followers List of Profile B
Profile and Followers List are both screen files. When I switch screens, if the screen is already in stack, it goes to the previous one. For example, when I click on "Profile B" in "Followers list of Profile A", it goes back and shows "Profile A",because the profile screen is already in stack.
How can I generate a new screen which can be added to the stack?
Try navigate using push with adding extra key.
For example :
this.props.navigation.push('ProfileB', {
// others param,
key: maths.random().toString()
});
Note: do not use id of followers here, because if you click on same follower then it will match same idea, so it may be can go back. Which is not good. So used any random keys.
react-navigation-stack has 3 way of navigation between screens:
navigate: standard navigation, if you are navigating to a new screen not in stack, it pushes it in the so-said stack. If you navigate to a screen that's already been mounted, it will pop back to it.
replace: Takes thes current component and replaces it with the one you want to navigate
push: pushes a new component to the stack, creating a new instace of it.
Imaging a stack that's like:
screen 3
screen 2
screen 1
Using push you will be able to start another instace of screen 1.
this.props.navigation.push("screen 1")
Will leave the stack as:
screen 1
screen 3
screen 2
screen 1
The problem with this method is that, if navigating back, you'll be brought to the previous instances of the screen with the old data
When I navigate from a notification in closed app i'm able to navigate to the required screen.
The app navigates to dashboard when i click on the hardware back button, but when i go back from a custom back button in toolbar header it navigates to the dashboard(as required) but instantly comes back to the same page.
Navigating from a notification:
this.props.navigation.push("screen", {
data: somedata,
})
Navigating back to dashboard:
this.props.navigation.push('Dashboard')
I also tried using ResetAction function but it had the same results.
How to solve this?
This is due to , your screen is not stack that time, for that You have firstly push that screen to stack and navigate it.
And without any operation of notification click , its default open the app first screen.
You should use this code when you press on notification tray.
this.props.navigation.navigate('XYZScreen'{itemID:id,fromWhere:"NOTIFICATION"})
this line navigate you to XYZScreen with this keys params. and there you can identify that you are coming from NOTIFICATION . so according this you can come back the any screen.
Please use this code , it helps me.
because you don't have any screen in stack
please use replace function like
this.props.navigation.replace('Dashboard')
and for hardware back press use backHander and same code in that listener function