react-native-page-swiper

KO | EN

gitlite — search

#python #hacktoberfest #ai #llm #golang #rust #linux #docker #nodejs #security #ios #mcp #openai #open-source

react-native-page-swiper

(★ 91)

No description available.

File Explorer

Download Latest Version (.zip)

- - .babelrc
  - .flowconfig
  - .gitignore
  - .watchmanconfig
  - index.android.js
  - index.ios.js
  - package.json
- dot.js
- dots.js
- index.js
.eslintrc
.gitignore
.npmignore
CHANGELOG.md
package.json
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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).

react-native-page-swiper

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

react-native-page-swiper

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README