CODEWITHSUNDEEP
react-nativereact-native-navigation
feerlay
feerlay

Reputation: 2638

React Native Navigation - swipe to next screen

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?

Upvotes: 6

Views: 38651

Answers (5)

Nour
Nour

Reputation: 121

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

Upvotes: 7

Kumar Parth
Kumar Parth

Reputation: 569

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

Upvotes: 4

L.U.
L.U.

Reputation: 521

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

  />

Upvotes: 1

Abanoub Istfanous
Abanoub Istfanous

Reputation: 966

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

Upvotes: 0

VolkanSahin45
VolkanSahin45

Reputation: 1968

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.

Upvotes: 6

Related Questions