Using stacknavigator, whenever user navigates to a new screen everything on the screen flashes out, then back in even if the elements are the same on both starting and ending screen. For example, I have a searchbar at the top of every page and sticky footer at the bottom. Is there any way to keep those elements on the screen during the navigation?
Ideal result is like with Tabnavigator, the tabs stay on screen during navigation.
Related
I have a flatList with 3columns in a row in screenA and also there is screenB with a flatList that also shows screenA data in different way. Once user click an item in screenA it navigate to screenB and scrolls to item's index. I am using react-query for fetching data. My question is how can I handle fetchNextPage in true way. Because if user scrolls in screenB next page data should be loaded in both screens. Is it correct to pass all {data, fetchNextPage, hasNextPage, refetch} returned from useInfiniteQuery to screenB? or there is another solution?
Briefly something like instagram's profile screen. As you can see in main profile screen under a tab user click on item and it's navigate to second image. All the data loaded in second screen when user scrolls also loaded in main profile tab.
thanks for any help
I need help in React Navigation when I create a tab bar like I have button home and I want to access another screen in the Home with show tab bar inside it to keep selected on the Home icon.
First Screen
Second Screen
I want show tabBar with continue select Home button.
This solved my problem by A stack navigator for each tab.
https://reactnavigation.org/docs/tab-based-navigation/?fbclid=IwAR071_HAYPP9NYGbVHq88j1ZssyBn8226Qnne_PzUdGdIM56XrVD5shU10c#a-stack-navigator-for-each-tab
I think you should have a variable that would keep track of the home page and when you are on it and thus provide the styling you need on the homepage icon....and when you are in the second screen it should be still be set to true so nothing changes
I have a DrawerNavigator with a list of screens. The problem is that if I go to another screen and come back, the first screen re-initializes completely. How to prevent this re-initialization so that whatever the state of the first screen was, is preserved on coming back?
I've created a Snack for this: https://snack.expo.io/HJebCIoiM
The problem is really simple, but most issues I've found on GH and SO are about the opposite behaviour: resetting the StackNavigator to its initial route when switching between items in the DrawerNavigator.
App structure
Drawer
Router
First screen
Second screen
Other screen
The initial route is Router, which by default shows the first screen.
Current behaviour
I go from the first screen to the second screen
I toggle the drawer
I go to the other screen in the drawer
I go back to the Router
It shows the first screen
Expected behaviour:
In step 5. it should show the second screen, because that's the last route I was on when I toggled the DrawerNavigator.
I don't understand why it doesn't preserve the state of the stack, and just takes me back to the screen I was on before, but instead resets the stack to its initial route.
What confuses me even more is that many people are reporting that this is the default behaviour of their app, but they do want to reset the stack and are struggling with this:
Resetting the navigation stack for the home screen (React Navigation and React Native)
Clear stack being navigated to React-Navigation
How to reset the state of a StackNavigator nested in a DrawerNavigatior?
I don't understand why it does reset it all the time in my case. (and as you should be able to reproduce with the Snack I posted above.
I'm using the StackNavigator from react-navigation and I'm trying to customize the navigation process.
On one screen, I have two buttons that both use the "navigate" function to redirect the user to the same screen (which is a scrollview). Is there any way to have one of the buttons scroll down to a different part of the screen after navigating?