Awesome

react-native-3dcube-navigation

Installation

With Yarn

$ yarn add react-native-3dcube-navigation

With NPM

$ npm i react-native-3dcube-navigation --save

Demo

Basic Usage

Horizontal

import { CubeNavigationHorizontal } from 'react-native-3dcube-navigation'

<View style={styles.father} >
  <CubeNavigationHorizontal ref={view => { this.cube = view; }}>
    <View style={[styles.container, { backgroundColor: '#5CDB8B' }]}>
      <Text style={styles.text}>Horizontal Page 1</Text>
    </View>
    <View style={[styles.container, { backgroundColor: '#A3F989' }]}>
      <Text style={styles.text}>Horizontal Page 2</Text>
    </View>
    <View style={[styles.container, { backgroundColor: '#CBF941' }]}>
      <Text style={styles.text}>Horizontal Page 3</Text>
    </View>
  </CubeNavigationHorizontal>
</View >

Vertical

import { CubeNavigationVertical } from 'react-native-3dcube-navigation'

<View style={styles.father} >
  <CubeNavigationVertical ref={view => { this.cube = view; }}>
    <View style={[styles.container, { backgroundColor: '#5CDB8B' }]}>
      <Text style={styles.text}>Vertical Page 1</Text>
    </View>
    <View style={[styles.container, { backgroundColor: '#A3F989' }]}>
      <Text style={styles.text}>Vertical Page 2</Text>
    </View>
    <View style={[styles.container, { backgroundColor: '#CBF941' }]}>
      <Text style={styles.text}>Vertical Page 3</Text>
    </View>
  </CubeNavigationVertical>
</View >

Properties

Prop	Default	Type	Description
expandView	false	`bool`	If `true`, the view expands not showing the background
loop	false	`bool`	If `true`, the last face will be allowed to scroll to the first
scrollLockPage	null	`number`	Lock swipe to the next pages, referring the index number of the page
responderCaptureDx	60	`number`	The increment at which the responder captures the touch
callBackAfterSwipe	null	`function`	Callback function after release
callbackOnSwipe	null	`function`	Callback function on start swipe & release, callback's first argument `started` defines if it's the start of the swipe or the release

Events

callBackAfterSwipe

Name	Type	Description
position	`number`	Position of the view.
index	`number`	Index of the view

callBackAfterSwipe = (position, index){
  
}

render(){
  return (
    <CubeNavigationHorizontal callBackAfterSwipe={this.callBackAfterSwipe}>
    </CubeNavigationHorizontal>
  );
}

Methods

scrollTo(index, animated)

Name	Type	default	Description
index	`number`	`undefined`	Scroll to the page, start in 0.
animated	`bool`	`true`

Examples

$ cd examples
$ npm i
$ react-native run-ios

<br/>

Inspired by tlackemann but implemented only with react-native libs.