Skip to content
Swipe to navigate
Branch: master
Clone or download
Latest commit 06da621 Jan 9, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
examples/snapchat-demo swipe navigator Jan 8, 2018
lib
.babelrc swipe navigator Jan 8, 2018
.eslintignore
.eslintrc.json swipe navigator Jan 8, 2018
.gitignore
.npmignore swipe navigator Jan 8, 2018
LICENSE Initial commit Jan 8, 2018
README.md
design.png add usage guide Jan 9, 2018
giphy.gif swipe navigator Jan 8, 2018
giphy2.gif
giphy3.gif add usage guide Jan 9, 2018
package.json swipe navigator Jan 8, 2018
yarn.lock swipe navigator Jan 8, 2018

README.md

React native swipe navigation

Swipe to navigate

It's another react native navigation library -- still in beta version --

Snapchat demo

Installation

yarn add react-native-swipe-navigation

or

npm install --save react-native-swipe-navigation

Usage

If we want to implement this navigation style

Check the Demo

So this library provides for us a clean and an easy way to do it

import SwipeNavigator from 'react-native-swipe-navigation';

const Navigator = SwipeNavigator({
  Map: {
    screen: Map,
    left: 'Notifications',
    right: 'Menu',
    top: 'Search',
    bottom: 'Messages',
  },

  Notifications: {
    screen: Notifications,
    type: 'push', // push is the default type
  },

  Menu: {
    screen: Menu,
    type: 'over',
  },

  Search: {
    screen: Search,
    type: 'place',
  },

  Messages: {
    screen: Messages,
    right: 'Chat',
  },

  Chat: {
    screen: Chat,
    type: 'over',
    color: '#fbb464', // this property will make an overlay effect
  },

  Profile: {
    screen: Profile,
    left: '@BACK',
    type: 'over',
  },
});

export default Navigator

Now the SwipeNavigator will pass a nav props to all screens for more control

  class Map extends React.Component {
    componentDidMount() {
      const { nav } = this.props;

      // Here we can control the navigation using these listeners

      /***
        if a navigation detected so the navigator will ask for a permission just for the active screen
      */
      nav.onNavigateShouldAllow(() => {
        return true;
      });

      nav.onNavigateLeftShouldAllow(() => {
        return true;
      });

      nav.onNavigateRightShouldAllow(() => {
        return true;
      });

      nav.onNavigateUpShouldAllow(() => {
        return true;
      });

      nav.onNavigateDownShouldAllow(() => {
        return true;
      });

      /**
        if we are navigating from screen A to screen B
        so the navigator will fire onNavigateStarted
        and onNavigateCompleted listeners for both A and B
      */

      nav.onNavigateLeftStartedListener(({isBack, isMain}) => {
        // Do anything you want to do here
        /**
          isMain -> Boolean - define if this screen is the active one
          isBack -> Boolean - define if we are navigating back
        */
      });

      nav.onNavigateLeftCompletedListener(({completed, isBack}) => {
        // completed -> Boolean - define if the navigation realized
      });

      nav.onNavigateRightStartedListener(({isBack, isMain}) => {

      });

      nav.onNavigateRightCompletedListener(({completed, isBack}) => {

      });

      nav.onNavigateDownStartedListener(({isBack, isMain}) => {

      });

      nav.onNavigateDownCompletedListener(({completed, isBack}) => {

      });

      nav.onNavigateUpStartedListener(({isBack, isMain}) => {

      });

      nav.onNavigateUpCompletedListener(({completed, isBack}) => {

      });

      /**
        Also you can navigate using these methods:

        * nav.navigateLeft()

        * nav.navigateRight()

        * nav.navigateDown()

        * nav.navigateUp()

        * nav.navigateBack()

        * nav.navigate(screen, config)

            screen: String or React.Component

            config: {
              leaveFrom: 'left' | 'right' | 'top' | 'bottom'
              type: 'over' | 'push' | 'place'
              color: 'it should be in hex format'
           }

      */

    }

    componentWillUnmount() {
      // clean all listeners of this screen
      this.props.nav.cleanUp()
    }

    render() {
      return (
        <View style={{flex: 1, backgroundColor: 'blue'}}>
          <TouchableOpacity onPress={() => this.props.nav.navigate('Profile')}>
            <Text>GO TO PROFILE</Text>
          </TouchableOpacity>
        </View>
      );
    }
  }
You can’t perform that action at this time.