Description:
This is a fancy 3D cube navigation/carousel/swiper for React Native app.
Installation:
# NPM $ npm install react-native-3dcube-navigation --save
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 >Default props.
- callBackAfterSwipe: callback function
- scrollLockPage: number
- expandView: true or false
Preview:
