react-native-3dcube-navigation
$ yarn add react-native-3dcube-navigation
$ npm i react-native-3dcube-navigation --save
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 >
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 >
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
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 >
) ;
}
scrollTo(index, animated)
Name
Type
default
Description
index
number
undefined
Scroll to the page, start in 0.
animated
bool
true
$ cd examples
$ npm i
$ react-native run-ios
Inspired by tlackemann but implemented only with react-native libs.