react-native-3dcube-navigation

Installation

$ 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.