Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zehfernandes/react-native-3dcube-navigation
https://github.com/zehfernandes/react-native-3dcube-navigation
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/zehfernandes/react-native-3dcube-navigation
- Owner: zehfernandes
- License: mit
- Created: 2017-10-05T21:46:26.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-02-27T17:48:04.000Z (over 1 year ago)
- Last Synced: 2024-05-01T23:34:34.638Z (5 months ago)
- Language: JavaScript
- Size: 3.76 MB
- Stars: 282
- Watchers: 8
- Forks: 48
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-3dcube-navigation ★80 - Page Swiper component with 3D cube transition (horizontal and vertical) (Components / UI)
- awesome-react-native - react-native-3dcube-navigation ★80 - Page Swiper component with 3D cube transition (horizontal and vertical) (Components / UI)
- awesome-made-by-brazilians - react-native-3dcube-navigation
- awesome-react-native - react-native-3dcube-navigation ★80 - Page Swiper component with 3D cube transition (horizontal and vertical) (Components / UI)
- awesome-react-native - react-native-3dcube-navigation ★80 - Page Swiper component with 3D cube transition (horizontal and vertical) (Components / UI)
README
# react-native-3dcube-navigation
### Installation
##### With Yarn
```bash
$ yarn add react-native-3dcube-navigation
```
##### With NPM
```bash
$ npm i react-native-3dcube-navigation --save
```
### Demo
### Basic Usage
##### Horizontal
```js
import { CubeNavigationHorizontal } from 'react-native-3dcube-navigation'
{ this.cube = view; }}>
Horizontal Page 1
Horizontal Page 2
Horizontal Page 3
```
##### Vertical
```js
import { CubeNavigationVertical } from 'react-native-3dcube-navigation'
{ this.cube = view; }}>
Vertical Page 1
Vertical Page 2
Vertical Page 3
```
### 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 |
```js
callBackAfterSwipe = (position, index){
}
render(){
return (
);
}
```
### Methods
#### scrollTo(index, animated)
| Name | Type | default | Description |
| :---- | :------: | :------: | :--- |
| index | `number` | `undefined` | Scroll to the page, start in 0. |
| animated | `bool` | `true` | |
### Examples
```bash
$ cd examples
$ npm i
$ react-native run-ios
```
> Inspired by [tlackemann](https://github.com/tlackemann/react-native-cube-transition) but implemented only with react-native libs.