I have an icon in the header that opens a screen with stack navigator with a list view, and on pressing list item it open child/detail page.
All working fine, what I need is when clicking on the icon again in the header it goes back to root.
NOTE: header is not part of the navigation it is a custom header
this is the screenshot if help to understand
enter image description here
Related
Pasting the entire code would be very long, so I created a snack for this: https://snack.expo.dev/#kickbk/fd9160
If you click the bottom tabs on "Account" -> "Go To Profile" -> "Go To Auth Navigator", you will then notice the back button shows "< Root", but I expect it to show the last screen that we navigated from (Profile).
How do I get the back button to show the screen title that navigated into it?
I do not want to place the Authentication navigator screens inside the root navigator. They need to stay inside Authentication navigator.
I'm currently building an app that has a bottom tab bar with a navigation stack in each tab. Now I want to create an image screen where the tab bar is hidden. I've followed the docs at https://reactnavigation.org/docs/hiding-tabbar-in-screens, which works fine if you only want the user to able to navigate to the screen and then navigate back to the tab stack.
The problem is that I want it to feel like the image screen is part of the tab stack so the user can navigate from the image screen to another screen (i.e. push another screen on top of the stack). This doesn't work for me using the method mentioned above...
I've also tried using the option tabBarVisible: false, but it makes the "hide animation" glitchy (which the docs also warns for: https://reactnavigation.org/docs/bottom-tab-navigator).
I am trying to implement a bottom sheet using react-native-reanimated-bottom-sheet that triggers when a user presses a tab in a React Navigation Tab Navigator.
I want it to appear above whichever screen is currently rendered and look kind of like the below image:
I have not had any luck so far. I have created a new component for the bottom sheet, but when the user presses the corresponding tab it changes to a new page.
Is this even possible using React Navigation Tab Navigator?
I'm new to react-native and I'm trying to add a feature to my navigation. Basically I would like it when you click on a drawer item it would stack a new page accompanied by a back button.
I've searched everywhere to try and figure it out but couldn't find an answer.
The feature is used in an app in the images below.
The arrow next to 'Dublin Bikes' is used for closing drawer menu (not a stack arrow).
After the drawer is opened and you pick either "Settings" or "My Account" a single page is stacked.
It's pretty much using the drawer item as a button to call a stack.
Is there a good way to do this? All I have found is to rebuild the drawer and add them as buttons. That didn't seem right.
Any help would be great. Thanks a lot.
when you click on a drawer item it would stack a new page accompanied by a back button,
what i understood is when you click on drawer button on home screen it should navigate to new screen with back button and not the one currently showing,
i feel for this feature, instead for drawer you can have a custom drawer open button on the header and when you click on that it will navigate ( navigation.navigate("newpage") ) to you new page accompanied by a back button
I am creating a react native app and now I wanted to open one of the footer tab screens when clicking on the menu item. Here I attached my sample screen and can get a clear idea about my problem from that.
Here is my GitHub repository. (https://github.com/SidathDananjaya/Event-App/tree/master/Event-App)