react-native-3dcube-navigation

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

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