# react-native-page-swiper

> Page Swiper component for React Native.

Latest version **0.4.0** (published 2019-06-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-page-swiper
pnpm add react-native-page-swiper
yarn add react-native-page-swiper
bun add react-native-page-swiper
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2019-06-18 |
| First published | 2015-11-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=4 |
| Dependencies | 0 |
| Unpacked size | 153.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 91 |
| Author | Christopher Garvis |
| Maintainers | cgarvis, esauter5 |
| Keywords | react, react-component, react-native, swiper, ios, android |

## Links

- npm: https://www.npmjs.com/package/react-native-page-swiper
- Repository: https://github.com/fixt/react-native-page-swiper
- Homepage: https://github.com/fixt/react-native-page-swiper#readme
- Issues: https://github.com/fixt/react-native-page-swiper/issues
- npm.io page: https://npm.io/package/react-native-page-swiper

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.4.0 (latest) — 2019-06-18
- 0.3.0 — 2016-07-12
- 0.1.0 — 2016-04-05
- 0.0.2 — 2015-11-17
- 0.0.1 — 2015-11-17

## 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 (
      <Swiper style={styles.wrapper}>
        <View style={styles.slide1}>
          <Text style={styles.text}>Hello Swiper</Text>
        </View>
        
        <View style={styles.slide2}>
          <Text style={styles.text}>Beautiful</Text>
        </View>
        
        <View style={styles.slide3}>
          <Text style={styles.text}>And simple</Text>
        </View>
      </Swiper>
    )
  }
})

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:code@fixt.co) 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).

---
_Source: https://npm.io/package/react-native-page-swiper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._