I am trying to find StackNavigator's to UINavigationContoller's popToViewController(_ viewController: UIViewController, animated: Bool).
According to the docs goBack() only ever goes back one position, the argument you pass in is where you are going back from rather than where you want to go back to.
There are no tabs or nesting of navigators just a simple A->B->C->D->E with the ability to go back to any of the previous screens from E.
You could actually make use of the navigation.navigate function
Another common requirement is to be able to go back multiple screens
-- for example, if you are several screens deep in a stack and want to dismiss all of them to go back to the first screen. In this case, we
know that we want to go back to Home so we can use navigate('Home')
https://reactnavigation.org/docs/en/navigating.html
As per docs react navigation doesn't provide a way to pop to a desired screen. For that you can refere this hack
https://medium.com/handlebar-labs/replace-a-screen-using-react-navigation-a503eab207eb
Related
From reading the documentation it would seem so, but I suppose I'm confused as to why it isn't called out that they're interchangeable when pop() is called without arguments, or why there would even be two different functions with such similar behavior (and why goBack() wouldn't also take an argument for the number of screens to go back)?
pop - go back in the stack
The difference is:
pop is specific to stack navigator, accepts arguments like the number of screens to pop which is relevant for the stack navigator
goBack is more general, it works in any navigator: stack, tabs drawer
It's not exactly interchangable since it depends on which navigator are you in. For example, if your screen is in a tab navigator nested in stack navigator, if you use pop(), it'll go back in the parent stack navigator, but if you call goBack(), it'll go back in the tab navigator (depending on if there are any screens to go back in both cases).
So generally you probably want to use goBack() which will do the appropriate behavior in most cases, and use pop() only if you have specific requirements and want the specific behaviour it provides.
With the help of pop you can go back a few screens back in a stack
goBack takes you back to the last screen
see here
The pop action takes you back to a previous screen in the stack. It takes one optional argument (count), which allows you to specify how many screens to pop back by.
import { StackActions } from '#react-navigation/native';
StackActions.pop(2);
I have a StackNavigator, and I have a screen for creating new content on my app. Once the content is created I push to the screen for the content. At this point I can still create new content from that screen, so it's possible to push a new create content screen. But if the user does a GO_BACK, or swipes i.e. POPs back, I want them to skip the previous create content screen.
I think it's fairly common behaviour where you want to selectively skip screens on the way back. I've looked at the docs to try and figure this out. The easiest looking fix was the auth-flow. That skips the screen going back, but it also stops you pushing the screen if you take it out of the navigator.
The current best approach I have is to use a custom stack router, and in getStateForAction remove the create content screen from the routes whenever the user is pushing away from it. The downside on this is that there's a janky animation on iOS pushes from the create content screen, as the create content screen is sliding out it's also sliding up (I guess because it's being removed).
Is there a recommended best way to do this?
On the previous create screen use navigation.replace("ScreenName", {params})
i am stuck in a problem that is,
in my application one screen has a Tabbar component so i have used Tabnavigation from react-navigation.
so there is two tabs in that screen and both of that tabs have GET API for displaying data
so my main problem is when tab screen is open at that time both tabs file is calling API because of tabnavigator is in stack navigator.
So please help me to solve this issue.
i have to do like this::-
when i click on tab then after API will be call but here when the screen is arrive at that time both tabs call their API.
so please sort out this issue guys.
You can use TabNavigator's lazy prop.
lazy - Whether to lazily render tabs as needed as opposed to rendering them upfront.
This way your API call will happen only when you switch to that tab. The call will happen only on first switch though. You may need to add some logic to recall API on certain event or time to get the new data.
I have this use case which is a bit confusing compared to the norm , and Im not sure how to structure it. I have a screen (tabs) with 4 tabs .
The thing is that the contents of each tab (their screens) are actually in One big page, when scrolling down the page and it reaches the contents of Tab2 , the tab should change too to Tab2 (its not actually a screen change) .
Now initially I have used react-navigation and it's tab navigator. But here Im not sure if this should use tab navigator. The questions that arise to me (from the top of my head):
Q1) If we wrap the components (each tab's screen) in a parent one. How do we go about detecting where the scroll reached! (or something that notifies we are viewing contents of tab2 and so on...)
Q2) How can I handle the animation of the tabs (especially the line under them as shown in the image) to transition back and forth?
Q3) Is there a better way to do this! (better than my initial thoughts above)
Q1. You must use the TabNavigator to avoid the problem as you asking in Q1. So you don't need to worry about the Scroll.
Q2. I recommend using StyleSheet, create a CSS style for line bar then maybe you just need to call a function to set the CSS of current tab or use the navigation options.
Q3. TabNavigator is a good option here and it belongs to react-navigation.
TabNavigator
Animation example with custom function
--- Update ------
I have created an example project for you to solve the problem, I'm not sure if you're doing the same.
Check the Scroll.js, I added a function Callme that changes tabs when scroll reaches to end.
To detect the Scroll reaches to end or not, I have used the isCloseToBottom from another StackOverflow answer.
Follow the following link to Github project.
Change-Tabs-When-Scroll-End
Thanks
_Pradeep
I recently implemented navigation in my app using NavigatorIOS in React Native. However, I think I've encountered a problem. Say I have 10 nav buttons on my home screen. Correct me if I'm wrong but I'm assuming (since I haven't done the backend yet) that if I use the first button to navigate to the next screen (let's call it Second.js), wrote/saved some data, and then went back and navigated to Second.js with the second button, that data from before would still be there? If so, is there a way for each button to navigate to a different "version" of the same screen? For example, could each button go to its own version of Second.js so that each button has its own local data in its Second screen, or would I have to make Second1.js, Second2.js, Second3.js, etc.? If the former isn't possible, I'd need a fixed number of nav buttons, plus a lot of memory is wasted with all these new classes that are basically replicas of each other. Thank you!