khalid32 / 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
scrollLockPage	null	number	Lock swipe to the next pages, referring the index number of the page
callBackAfterSwipe	null	function	Callback function after release

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.