React-navigation stack horizontal screen gesture for Android. (react-navigation/stack) - react-native

Question

On Android, I am aware that the stack screen animation can be controlled to be horizontal when using the react-navigation-stack library with the transitionConfig prop. However, it doesn't seem to work for the react-navigation/stack library, or rather it doesn't have any support for it. Have anyone managed to make it work with react-navigation/stack? Or are there any way to combine both libraries, as i would find it a waste to rewrite my codes in another library just for this small issue. Any help would be appreciated!

Answer 1

Use it like this -
Working Example
Youtube Tutorial for Navigation Gestures
import * as React from 'react';
import { Button, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { Easing } from 'react-native';
import {
createStackNavigator,
CardStyleInterpolators,
} from '#react-navigation/stack';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
title="Go to Profile"
onPress={() => navigation.navigate('Profile')}
/>
</View>
);
}
function ProfileScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
title="Go to Notifications"
onPress={() => navigation.navigate('Notifications')}
/>
<Button title="Go back" onPress={() => navigation.goBack()} />
</View>
);
}
function NotificationsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
title="Go to Settings"
onPress={() => navigation.navigate('Settings')}
/>
<Button title="Go back" onPress={() => navigation.goBack()} />
</View>
);
}
function SettingsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button title="Go back" onPress={() => navigation.goBack()} />
</View>
);
}
const Stack = createStackNavigator();
const timingConfig = {
animation: 'timing',
config: {
duration: 200,
easing: Easing.linear,
},
};
const options = {
gestureEnabled: true,
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
transitionSpec: {
open: timingConfig,
close: timingConfig,
},
};
function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} options={options} />
<Stack.Screen
name="Notifications"
component={NotificationsScreen}
options={options}
/>
<Stack.Screen
name="Profile"
component={ProfileScreen}
options={options}
/>
<Stack.Screen
name="Settings"
component={SettingsScreen}
options={options}
/>
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyStack />
</NavigationContainer>
);
}