Swipe between screens isn't working in react-native, react navigation - react-native

Question

I am trying to get my app to swipe between screens using react navigation. I have tried setting swipeEnabled, animationEnabled and gesturesEnabled to true but nothing has worked so far.
I am new to react navigation and thought i would give it a try.
I am using createStackNavigator so i dont know if i need to change that.
import React, { Component } from 'react';
import { createBottomTabNavigator,
createStackNavigator, createAppContainer } from 'react-navigation';
const Worcester = createStackNavigator(
{
Wrh,
},
{
initalRouteName: Wrh,
defaultNavigationOptions: {
title: 'Worcester',
headerLeft: <ActionBarImage />,
headerTintColor: '#333333',
headerTitleStyle: {
fontWeight: 'bold',
color: '#000000'
},
tabBarOptions: {
labelStyle: {
fontSize: 40
}
},
headerStyle: {
backgroundColor: '#FFFAFA',
borderBottomColor: '#ffffff',
borderBottomWidth: 3,
},
HeaderTitle: 'Test',
backgroundColor: '#FFDEAD',
swipeEnabled: true,
animationEnabled: true,
gesturesEnabled: true
}
});
const Alex = createStackNavigator(
{
Alx,
},
{
initalRouteName: Alx,
defaultNavigationOptions: {
title: 'Redditch',
headerLeft: <ActionBarImage />,
headerTintColor: '#333333',
headerTitleStyle: {
fontWeight: 'bold',
color: '#000000'
},
tabBarOptions: {
labelStyle: {
fontSize: 20
}
},
headerStyle: {
backgroundColor: '#FFFAFA',
borderBottomColor: '#ffffff',
borderBottomWidth: 3,
swipeEnabled: true,
animationEnabled: true,
gesturesEnabled: true
},
},
});
const TabNavigator = createBottomTabNavigator(
{
Worcester: { screen: Worcester },
Redditch: { screen: Alex },
},
{
tabBarOptions: {
activeTintColor: 'blue',
inactiveTintColor: '#605F60',
inactiveBackgroundColor: 'grey',
activeBackgroundColor: '#FFFAFA',
labelStyle: {
fontSize: 20,
marginTop: 0,
paddingTop: 0
},
style: {
paddingTop: 10
},
swipeEnabled: true,
animationEnabled: true,
gesturesEnabled: true
},
}
);
export default createAppContainer(TabNavigator);

Answer 1

You should use a topTabNavigator/bottomTabNavigator to swipe between screens on the same stack.
Then you use your stacknavigators,screens like that :
...
import { createMaterialTopTabNavigator, createStackNavigator } from 'react-navigation';
...
const someTabNavigator= createMaterialTopTabNavigator(
{
SomeScreen: {
screen:TheScreen,
navigationOptions: {
tabBarAccessibilityLabel: 'The Screen',
tabBarLabel: ({ tintColor }) => <LabelTitle tintColor={tintColor} label="The Screen" />,
},
},
SomeOtherScreen: {
screen: TheOtherScreen,
navigationOptions: {
tabBarAccessibilityLabel: 'The Other Screen',
tabBarLabel: ({ tintColor }) => <LabelTitle tintColor={tintColor} label="The Other Screen" />,
},
},
},
{
// Configs and etc.
swipeEnabled: true,
lazy: true,
optimizationsEnabled: true,
animationEnabled: true,
tabBarPosition: 'top',
tabBarOptions: {
scrollEnabled: true,
style: {
backgroundColor: colors.white,
},
inactiveTintColor: inactiveTintLabelColor,
activeTintColor: activeTintLabelColor,
indicatorStyle: {
backgroundColor: colors.primaryColor,
},
tabStyle: {
width: screen.screenWidth >= 600 ? 210 : 120,
}
},
}
)