When using react-navigation when you go from one screen to another screen you can easily swipe back to get to the previous screen, but it does not allow you to swipe forward to get back to the screen you came from. Is this possible?
In other words
Screen 1 -> Screen 2 -> Screen 3
Go to Screen 1, then to Screen 2, then to Screen 3. Then you swipe back and get to Screen 2, and swipe back again to get to Screen 1. But if you go from Screen 1 to Screen 2 to Screen 3, then swipe back to Screen 2, how do you swipe forward in Screen 2 to get back to Screen 3? Is this not a thing?
I have researched how to do this and can't find it in the docs anywhere. Please let me know if I am missing it somewhere. Thanks!
EDIT: What I am looking for is the equivalent of backBehavior in the docs but for forwardBehavior
One option is to store forward route in each screen state and then go forward,but this will only help to go one page forward.
to go multiple page forward you have to store it in asyncStorage or somewhere
Related
I have a small app with React Navigation v6 composed of a bottomTabNavigator with 3 tabs, the first two tabs are stackNavigators, the third tab is just a profile screen for the user.
First tab stack has 2 screens, a screen for list of active news about products (initial screen for the stack) and the second screen in the stack is for historic news (already read news).
Second tab stack has algo 2 screens: a screen with a list of products (initial screen for the stack) and a screen with details about the product
First time I open the app it will load the screen with the list of active news, I can press the products tab and it will show me the list of products screen no problem, then I can go back and keep navigating back and foward. The problem is if i load the app from scratch and in the first screen (the active news screen) if I click on an item it navigates to the second tab and to the screen of product details (thats the correct flow), but from now onwards the product list screen is forever lost, I have no way of navigating there, tried pressing back, pressing the tab, everything, but can't get there. Its like if I haden't "loaded" it at first then its lost.
Is this a bug or am I missing something? Thanks in advance!
I use react native.
And when I navigation.goBack() to previous screen, can I go to exact height of previous screen?
In detail, I use Flatlist in previous screen,
so let's say, if I have 1 -> 2 -> 3 screen feed, I scrolled down to 3.
I go another screen then go back from next screen, screen goes to top, which is 1.
can i go to 3 screen's height again?
I am not sure if this is the best answer, but flatlist has scrollToIndex property, that accept index of item you want to scroll. The problem is that you would have to save that index somewhere, like redux. If you want to do this to one or two flatlist it's okay, but if you have multiple of them, it isn't the best answer.
I have an application where I have a tab screen and few screens.
From tab I navigate in order screen 1 -> screen 2 -> screen 3 .
From screen 3's button click, I want to open screen - 4 i.e listing screen and on backpress I want to navigate agin tab screen.
I dont want to reset full stack using props.navigation.reset({index: 0,routes: [{name: "home"}],});, also number of navigating screen between tab screen and screen 4 is not fixed so I can't use props.navigation.pop(3) also.
Can anyone guide me, how to achieve this?
Thanks in advance
I found a way to achieve above navigation.
props.navigation.popToTop();
This will remove all screen from stack except main screen.
Hope this helps others!!
I have several nested navigator with above structure:
StackNavigator
authNav
homeNav
main(default)
create
subCreate1(default)
subCreate2
subCreate3
list
subList1(default)
subList2
Actually I play to navigate it. It's work as I expected.
But when I stay on subCreate3 screen, I want to navigate to subList1 screen, then when back or dismiss from subList1 it should go to main screen not go to subCreate3 again.
any idea with this ?. thank react-native user :D
Navigation has stack of all the pushed screen, So when we will try to dismiss or goBack then it will navigate to top stack screen.
In your case, subCreate3 is top most screen when you are on subList1. So it will move there.
If you need to move to particular screen, then below is the logic:
this.props.navigation.navigate(YOUR_SCREEN_NAME)
For more information, checkout navigation
when you navigate to screens using navigate screens are pushed to stack and when you go back it goes back to the previous screen in the stack. In your case subCreate3 is the previous screen in stack.
If you want to go main screen you have to use navigate function again.
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!