Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fixt/react-native-page-swiper
https://github.com/fixt/react-native-page-swiper
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/fixt/react-native-page-swiper
- Owner: fixt
- Created: 2015-11-16T16:22:14.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2019-11-01T18:25:54.000Z (almost 5 years ago)
- Last Synced: 2024-08-01T10:28:50.117Z (about 2 months ago)
- Language: JavaScript
- Size: 116 KB
- Stars: 91
- Watchers: 4
- Forks: 47
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-react-native - react-native-page-swiper ★83 - Page Swiper component for React Native. (Components / UI)
- awesome-react-native - react-native-page-swiper ★83 - Page Swiper component for React Native. (Components / UI)
- awesome-react-native - react-native-page-swiper ★83 - Page Swiper component for React Native. (Components / UI)
- awesome-react-native-ui - react-native-page-swiper ★68 - Page Swiper component for React Native. (Components / UI)
- awesome-react-native - react-native-page-swiper ★83 - Page Swiper component for React Native. (Components / UI)
README
# react-native-page-swiper
Page Swiper component for React Native.
## Getting Started
- [Installation](#installation)
- [Basic Usage](#basic-usage)
- [Properties](#properties)
- [Examples](#examples)
- [Development](#development)
### Installation
```bash
$ npm i react-native-page-swiper --save
```
### Basic Usage
- Install `react-native` first
```bash
$ npm i react-native -g
```
- Initialization of a react-native project
```bash
$ react-native init myproject
```
- Then, edit `myproject/index.ios.js`, like this:
```jsx
var Swiper = require('react-native-page-swiper')
// es6
// import Swiper from 'react-native-page-swiper'
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;
var styles = StyleSheet.create({
wrapper: {
},
slide1: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#9DD6EB',
},
slide2: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#97CAE5',
},
slide3: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#92BBD9',
},
text: {
color: '#fff',
fontSize: 30,
fontWeight: 'bold',
}
})
var swiper = React.createClass({
render: function() {
return (
Hello Swiper
Beautiful
And simple
)
}
})
AppRegistry.registerComponent('swiper', () => swiper)
```
### Properties
| Prop | Default | Type | Description |
| :------------ |:---------------:| :---------------:| :-----|
| index | `0` | `number` | Index number of initial slide. Changing this number after the component loads will cause the slide to change. |
| pager | `true` | `boolean` | Show pager. |
| onPageChange | | `function` | Callback when page changes. |
| activeDotColor | `blue` | `string` | CSS color of the dot for the current page. |
| threshold | `25` | `number` | Threshold before the swiper captures the pan responder |
### Examples
See code in [examples](https://github.com/fixt/react-native-page-swiper/tree/master/examples/swiper).
## Questions
Feel free to [contact us](mailto:[email protected]) or [create an issue](https://github.com/fixt/react-native-page-swiper/issues/new)
> Inspired by [leecade/react-native-swiper](https://github.com/leecade/react-native-swiper/) & [brentvatne/react-native-scrollable-tab-view](https://github.com/brentvatne/react-native-scrollable-tab-view).