CODEWITHSUNDEEP
react-nativeexporeact-navigation
Jarrett GXZ
Jarrett GXZ

Reputation: 608

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

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!

Upvotes: 2

Views: 2294

Answers (1)

Kartikey
Kartikey

Reputation: 4992

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>
  );
}

Upvotes: 2

Related Questions