React Native Navigation - swipe to next screen

Question

I have a very simple configuration for react native navigation

Navigation.startTabBasedApp({
  tabs: [
    {
      label: "One",
      screen: "example.FirstTabScreen",
      title: "Screen One"
    },
    {
      label: "Two",
      screen: "example.SecondTabScreen",
      title: "Screen Two"
    }
  ]
}

I can't find in documentation any API for swiping from screen 1 to screen 2. Do you know if is it even possible?

Nour · Answer 1 · 2020-01-12T12:29:49.250

That's 3 pages Swiper starting from middle page (just import your screens).

Import this swipe inside your navigation as a screen (you can navigate to the swipe or you can navigate to any screen under the swipe)

import {
  createMaterialTopTabNavigator,
  createAppContainer
} from "react-navigation";

const SwipeTabs = createMaterialTopTabNavigator(
  {
    screen1: { screen: screen1},
    screen2: { screen: screen2},
    screen3: { screen: screen3}
  },
  {
    initialRouteName: "screen2",
    animationEnabled: true,
    tabBarOptions: {
      showLabel: false,
      showIcon: false,
      style: { height: 0 }
    }
  }
);

export default createAppContainer(SwipeTabs);

No, not that I know, You can use swipe gesture (up and down) with normal navigation (with animation to navigate with slide from up or down animation) but this is not a swipe it's gesture — Nour, Dec 24 '19 at 15:46

score 6 · Answer 2 · answered Feb 10 '18 at 12:33

I dont know react navigation has a swipe feature but you can use any other swipe library.

Example library : https://www.npmjs.com/package/react-native-swipe-gestures

At this library you can use swipe functions and in swipe functions you can navigate to any page.

score 3 · Answer 3 · answered Oct 13 '19 at 18:43

For navigating through swipe you can use createMaterialTopTabNavigator which was introduced in the react-navigation 2.x version. It lets you switch between different routes by tapping the route or swiping horizontally. https://reactnavigation.org/docs/en/material-top-tab-navigator.html

If you want slider or swipe tabs you can use the following:- https://www.npmjs.com/package/react-native-app-intro-slider

For multiple tabs on the same screen:- https://www.npmjs.com/package/react-native-tab-view

this is the only answer that is actually answering the OPs question which included where to find the info in the reactnavigation docs. this should be the accepted answer — Hugobop, Jun 22 '23 at 22:14

score 1 · Answer 4 · answered Sep 21 '19 at 15:11

This library worked for me. Installation was pretty light. And implementation was simple.

You can either swipe or tap the menu items to navigate between screens.

https://github.com/react-native-community/react-native-tab-view

Documentation seems detailed too. They have a lot of elements and parameters listed out here. The only thing for me was that it took me a while to figure out how to add customisation to the tabs. There was no example. To save you some time (hopefully), here is my component looks like. Notice how I’m adding extra stuff to customise the styling.

  <TabView
    navigationState={this.state}
    renderScene={SceneMap({
      first: App1,
      second: App2,
      third: App3
    })}
    onIndexChange={index => this.setState({ index })}
    initialLayout={{ width: Dimensions.get('window').width }}
    tabBarPosition="bottom"

    renderTabBar={props =>
    <TabBar
      {...props}
      indicatorStyle={{ 
        backgroundColor: 'blue', 
        height:3 }}
      style={{ backgroundColor: 'lightgrey' }}
      renderLabel={({ route, focused, color }) => (
      <Text style={{ 
        fontSize: 18,
        fontWeight: 'bold', 
        margin: 10 }}>
        {route.title}
      </Text>
    )}
    />
  }
  // End of renderTabBar

  />

score 0 · Answer 5 · answered Jun 14 '19 at 01:03

0

now there are package to do what do you want https://github.com/react-navigation/material-bottom-tabs

answered Jun 14 '19 at 01:03

Abanoub Istfanous

856
9
24

React Native Navigation - swipe to next screen

5 Answers5