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
Related
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.
Suppose I have three screens in my application.
Screen A, Screen B, Screen C
Now If the user exists or if the app crashes when the user is on Screen B, I want to redirect the user directly to Screen B when the user visits the application again.
I am using react-navigation for navigating between screens.
Should I store the every Screen name visited by the user in async storage and then read that value on app launch and redirect user according to that value or is there any simple and easy way?
First and foremost thing , like i've done it in my app , but there are few catches with it. If you want to redirect to that screen if the app crashes , then it's possible by the way you suggest , that keep the name of page in async storage and then redirect upon app start.
Things to keep in mind.
1. The page which you are redirecting to should not have props dependencies from any page prior to that.
2. If the app starts, then navigation stack is cleared. So in android if user clicks on back button and if you have used this.props.navigation.goBack() it may misbehave, so keep that in mind. A fix to this would be on back button press you can do this.props.navigation.navigate('Screen').
Ive did this in login , like im storing token ,and if user opens next time it doesnt show login page , but home page. so you can do it too. Just take care of above points.
I'm learning react-native with redux and I'm trying to make a kind of social network application.
My problem is: when I'm on a user-1 profile screen and I navigate to user-2 profile, so basically I navigate from Profile.js to Profile.js (same screen) with different props. The problem is when I press the 'back' button, I get the user-2 profile while I should see user-1 profile.
The profile informations are saved in the store with redux.
For navigation I use Actions.sceneKey() from react-native-router-flux.
I already tried :
this.props.navigation.navigate('profile', { key: someRandomKey });
I get "Promise returned from navigate is ignored".
T also tried to save every user profile informations that I visit in an array but I don't know how to manipulate this array when I press back button...
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
I have an app that was created using React Native. In this app I have 2 screens (Home and View Web). In the View Web screen I am opening a webpage inside of a WebView. As an example, let's say the webpage being opened is Stack Overflow (Page A). My problem arises when the user clicks on a link within the Stack Overflow page (Page A), and then navigates to a different page on the site (Page B). When the user wants to go back to the original Stack Overflow page opened within the WebView (Page A), it won't let them, and instead navigates them back to the Home Screen.
Here is what I want to occur:
If the user is on Page B and they hit a back button, I want them to go back to Page A.
If the user is already on Page A and they hit the back button, I want them to go back to the Home Screen.
My question basically boils down to this: Is there a way for a single button to not only allow the user to navigate between pages inside of a WebView, but also allow for navigation between screens in the app itself? If so, please let me know how.
If you use this https://facebook.github.io/react-native/docs/webview, you can check the functions goBack();