I have a parent drawer navigator, and I want to disable the drawer in a specific screen which is few navigators down.
I've tried to put the gestureEnabled option on the screen, but it has other effects on a Stack Screen rather than on a Drawer Screen.
In addition I've tried using getFocusedRouteNameFromRoute in the drawer navigator, but it didn't give me the screen's name but one of it's parent navigators.
After researching, I found a few ways achieving this by getting the parent navigator using the dangerouslyGetParent, I didn't like this approach because the navigator I needed was about three layers up.
My navigators hierarchy looks like this - Drawer => Stack => Tab => Multiple Stacks,
we keep in store the current Tab, so what I ended up doing is to dynamically set the swipeEnabled option on the Drawer screen based on the current tab active.
Have you tried also disabling swipe?
<Drawer.Screen name="Home"
component={HomeScreen}
options={{
swipeEnabled:false,
gestureEnabled:false
}}
/>
Related
I have a component that navigates to the Home page using "navigation.navigate('Home');", but the home screen always comes in from the right. How do I make the home screen come in from the left?
Assuming you are using react-navigation and the default stack navigator, you can specify gestureDirection: 'horizontal-inverted' on the entire navigator (to have all screens follow this behaviour) or on the screen you want (so that only this screen slides in from the left:
<Stack.Navigator screenOptions={{gestureDirection: 'horizontal-inverted'}}>
// or:
<Stack.Screen name="Home" component={Home} options={{gestureDirection: 'horizontal-inverted'}}>
You can read more about this option, and animations in general in the docs: https://reactnavigation.org/docs/stack-navigator/#animation-related-options.
Update (native-stack)
When using native-stack navigator, customisation options are limited.
Note that this solution will only work for certain cases, as it depends on the screen hierarchy at the time of navigation.
Essentially, you might use replace instead of navigate or push and specify pop as the animation your Home Screen will use for replace transitions:
<Stack.Screen name="Home" component={HomeScreen} options={{animationTypeForReplace: "pop"}} />
You can find a working example snack here: https://snack.expo.dev/#mlisik/stack-overflow---pop-animation (note that to see the result you will need to run it on device)
I have been searching for a beginner example for creating modal and opening in react-native with stack navigation. But unable to find one.
I created one with below stack group
<Stack.Group screenOptions={{ presentation: "modal" }}>
<Stack.Screen
name="AstroCard"
component={AstroCard}
options={{ contentStyle:{margin:20,backgroundColor:"transparent"} }}
/>
</Stack.Group>
and on press of button, I used props.navigation.navigate("AstroCard")
when i do this, AstroCard screen opens without the back navigation etc, but am not able to set the height or margin to make it look like a overlay. I tried card as well, but couldn't get it to work. Can someone help me with a simple example of how i can implement a card or modal like an overlay.
you can do it without navigation as well
here is the sample code for modal overlay
First add one useState like this:
Then add following code
Some styling as well
I have the following React Native navigation architecture:
Im trying to set the styling on a button in my TabHeader component (see blue arrow) based on which Screen I am on. However in the props passed into it by TabNavigator, I am only seeing the Stack directly beneath it, in this scenario the HomeStack.
Is it possible to get the current Screen (Home) in TabNavigator even when it is 2 levels deep? (Core -> HomeStack -> Home)
Source
You can only modify navigation options for a navigator from one of its screen components. This applies equally to navigators that are nested as screens.
On the same page there is a title Setting parent screen options based on child navigator's state
I have five screens in a material bottom tab navigator. On one of the screens, I want to use a drawer for some settings. In the other screens there are currently no drawers planned, however if they come, they will have different content from this current one.
I want the drawer to be displayed above the bottom navigation bar. However I don't want to solve it by wrapping the whole material bottom tab navigator in a drawer navigator, as this would not make much sense and also provide the same drawer in all of the screens.
Is there another way of making the drawer appear on top of the bottom navigation bar? Ideally, the solution would not include react-navigation for the drawer at all, as I don't use it for navigation.
The answer appears to be to use a Modal, which can server as a popup. https://reactnative.dev/docs/modal for the documentation.
I'm making an app, and in the app there is a home screen. On the home screen, I want to add a bottom navigator with various logos, which when clicked on, navigate the user to a different screen. I only want the bottom navigator to be on the screens that can be accessed from the bottom navigator in home. How would I do this? Would I need different types of navigators in my app.js since I'm using a stack navigator as well? Thanks for any help, I sincerely appreciate it.
Use tab-based-navigation provided by react-navigation. Make tab navigator with the screens that you want to be displayed with tab and wrap that in Stack. Any other screen that you want to display without tab navigation, just add as another stack and wrap all the stacks in Stack.Navigator. Here's the docs they are pretty well explained
https://reactnavigation.org/docs/tab-based-navigation