Change navigation direction react native - react-native

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)

Related

Modal in React native Covers screen, want it to be say, half of screen

I am trying to make a Modal.
So this is what i have in My App.js in order to show a Modal
<Stack.Group screenOptions={{presentation: "modal"}} >
<Stack.Screen name="AuthModal" component={AuthModal} options={{headerShown:false}} />
</Stack.Group>
But it covers the full screen. I dont want it covering the full screen. Just half of the screen is fine is there a way i can do something like this.?

Example for displaying modal or card using latest react-native-navigation library

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

How can i open another Screen using a button ReactNative

Let me explain properly what I want to do.
I have these screens in react-native mobile-app
App.js
WalletDetails.js
Then I have another screen called PaymentDetails.js amongst many other screens
So what I want to do is that I need a button with onPress that would open directly walletDetails.js screen from PaymentDetails.js.
I have this code already on the paymentdetails page
<TouchableOpacity style={styles.cardPayBtn} onPress={()=>props.navigation.navigate("WalletDetails"); }}> <Text style={styles.buttonTitle}>{userdata && userdata.usertype == 'rider' ? t('payWithCard') : t('request_payment')}</Text> </TouchableOpacity>
I think for navigating between screens, React recomments react-navigation, it's a module to handle multiple screens (I'm using it myself and I really like it).
To get started, the react-navigation getting-started-guide helps a lot!
You can use for this navigation purpose between one screen to another.
onPress={()=>this.props.navigation.navigate("WalletDetails")

Disable drawer for a specific nested screen

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
}}
/>

React Navigation + custom notification UI

I have a react native app with the following frameworks
react-native : 0.44.2
react-navigation : 1.0.0-beta.11
redux : 3.6.0
ReactNavigation structure
Root navigator (Stack navigator)
Tab navigator
Tab details (Stack navigator)
Login screen (Stack navigator that is full screen)
I'm trying to create an "in-app custom notification UI" as that's required per the design of the app. I can't use the normal "local/push notification". And since I'm using redux, I've created a custom middleware that handles notification actions.
When a notification action is fired from anywhere in the app, this redux middleware catches it and passes the notification to my NotificationUI component. This all works well.
My issue is with how to show this NotificationUI (with ReactNavigation)?
I need this NotificationUI to be injected from the root (so to speak) so that I don't need to add the NotificationUI for every "screen" that I have for the app.
What is the most elegant way to handle that?
I've tried creating a Higher Order Component out of NotificationUI component and "wrapping" the 'Root navigator' in it, but that results in something like the following. (Notification is the red bar at the bottom). It's stacking on top of each other. But I want one to be in the background and the other to be on the foreground.
This is how I solved it in code:
<Provider store={store}>
<React.Fragment>
<SystemNotificationComponent />
<RootStack />
</React.Fragment>
</Provider>
);
And yes, SystemNotificationComponent should be positioned as 'absolute' of course!
This will show content from SystemNotificationComponent on top of any navigation screens.