rn3

react-native-3dcube-navigation

npm i react-native-3dcube-navigation

Readme

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

PropDefaultTypeDescription
expandViewfalseboolIf true, the view expands not showing the background
loopfalseboolIf true, the last face will be allowed to scroll to the first
scrollLockPagenullnumberLock swipe to the next pages, referring the index number of the page
responderCaptureDx60numberThe increment at which the responder captures the touch
callBackAfterSwipenullfunctionCallback function after release
callbackOnSwipenullfunctionCallback function on start swipe & release, callback's first argument started defines if it's the start of the swipe or the release

Events

callBackAfterSwipe

NameTypeDescription
positionnumberPosition of the view.
indexnumberIndex of the view
callBackAfterSwipe = (position, index){
  
}

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

Methods

scrollTo(index, animated)

NameTypedefaultDescription
indexnumberundefinedScroll to the page, start in 0.
animatedbooltrue

Examples

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

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

Jump To