1.0.24 • Published 3 years ago
react-native-3dcube-navigation-typescript v1.0.24
react-native-3dcube-navigation-typescript
Installation
With Yarn
$ yarn add react-native-3dcube-navigation-typescript
With NPM
$ npm i react-native-3dcube-navigation-typescript --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 >
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.
1.0.24
3 years ago
1.0.23
3 years ago
1.0.22
3 years ago
1.0.21
3 years ago
1.0.20
3 years ago
1.0.19
3 years ago
1.0.18
3 years ago
1.0.17
3 years ago
1.0.16
3 years ago
1.0.15
3 years ago
1.0.14
3 years ago
1.0.13
3 years ago
1.0.12
3 years ago
1.0.11
3 years ago
1.0.9
3 years ago
1.0.10
3 years ago
1.0.8
3 years ago
1.0.7
3 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago