react-native-swiper-ajusted

v1.6.0-nightly.4

Published

3 years ago

Swiper component for React Native.

Downloads

0High
0Medium
0Low

douglashsilva

react-component react-native ios

react-native-swiper

Roadmap

see: ROADMAP.md

Changelogs

[1.6.0-nightly]
- Dependency
  - Remove ViewPagerAndroid, use ScrollView #1009
- TypeScript
  - correct the wrong types #1000
  - Add missing scrollBy TypeScript definition #931
- New Feature
  - add scrollTo #831
  - Added prop to disable the PrevButton #749
  - Optionally render page #1004
- Bug Fix
  - ES6 and CommonJS compatibility #717
  - Solves the issue of state messing up when parent component calls setState #939
  - replay when autoplay is setted to true #1002

[1.5.6]
- Fix #16, #36, #371, #410, #411, #422, #468 Fix landscape orientation auto resize! (thanks @ahmed3mar, @timmywil)
- Add containerStyle prop to customize the view container.
[1.5.5]
- Update: using PropTypes from prop-types and Change View.propTypes to ViewPropTypes

[1.5.4]
- Added easily accessible pagination point manipulation: use dotColor / activeDotColor and dotStyle / activeDotStyle (thanks @denizs)
- Added scrollEnabled prop to documentation (thanks @ibandominguez)
[1.5.3]
- Add loadMinimalLoader prop to customize <ActivityIndicator /> (thanks @Exilz)
- Disable autoplay timer when prop changes to false (thanks @dizlexik)
- Special thanks to @hypatiah for fixed some grammatical errors in README
[1.5.2]
- Add yarn lock
- Fix jitter when quickly swiping back and forth between pages (iOS) (thanks @nemophrost)
- The first webview always reloaded when injecting the rest of the children (thanks @eosterberg)

see more: CHANGELOG.md

Show Cases

Try these cases by yourself very easy, Just open examples/ios/swiper.xcodeproj in Xcode, then press Cmd + R; you may edit examples/index.ios.js for switch cases.

examples/components/SwiperNumber

examples/components/LoadMinimal

Getting Started

Installation

v1.5.14

$ npm i react-native-swiper --save

v1.6.0-nightly

npm i --save react-native-swiper@nightly

Basic Usage

Install react-native first

$ npm i react-native-cli -g

Initialization of a react-native project

$ react-native init myproject

Then, edit myproject/index.ios.js, like this:

import React, { Component } from 'react'
import { AppRegistry, StyleSheet, Text, View } from 'react-native'

import Swiper from 'react-native-swiper'

const 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'
  }
})

export default class SwiperComponent extends Component {
  render() {
    return (
      <Swiper style={styles.wrapper} showsButtons={true}>
        <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('myproject', () => SwiperComponent)

Properties

Basic

Custom basic style & content

| Prop | Default | Type | Description | | :---------------- | :---------------------: | :-------: | :------------------------------------------------------------------------- | | width | - | number | If no specify default enable fullscreen mode by flex: 1. | | height | - | number | If no specify default fullscreen mode by flex: 1. | | style | {...} | style | See default style in source. | | containerStyle | {...} | style | See default container style in source. | | loadMinimal | false | bool | Only load current index slide , loadMinimalSize slides before and after. | | loadMinimalSize | 1 | number | see loadMinimal | | loadMinimalLoader | <ActivityIndicator /> | element | Custom loader to display when slides aren't loaded |

Pagination

| Prop | Default | Type | Description | | :--------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | showsPagination | true | bool | Set to true make pagination visible. | | paginationStyle | {...} | style | Custom styles will merge with the default styles. | | renderPagination | - | function | Complete control how to render pagination with three params (index, total, context) ref to this.state.index / this.state.total / this, For example: show numbers instead of dots. | | dot | <View style={{backgroundColor:'rgba(0,0,0,.2)', width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} /> | element | Allow custom the dot element. | | activeDot | <View style={{backgroundColor: '#007aff', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} /> | element | Allow custom the active-dot element. | | dotStyle | - | object | Allow custom the active-dot element. | | dotColor | - | string | Allow custom the active-dot element. | | activeDotColor | - | string | Allow custom the active-dot element. | | activeDotStyle | - | object | Allow custom the active-dot element. |

Autoplay

Control buttons

| Prop | Default | Type | Description | | :----------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------: | :------------------------------------------ | | showsButtons | true | bool | Set to true make control buttons visible. | | buttonWrapperStyle | {backgroundColor: 'transparent', flexDirection: 'row', position: 'absolute', top: 0, left: 0, flex: 1, paddingHorizontal: 10, paddingVertical: 10, justifyContent: 'space-between', alignItems: 'center'} | style | Custom styles. | | nextButton | <Text style={styles.buttonText}>›</Text> | element | Allow custom the next button. | | prevButton | <Text style={styles.buttonText}>‹</Text> | element | Allow custom the prev button. |

Props of Children

| Prop | Default | Type | Description | | :---- | :----------------------------------: | :-------: | :------------------------------------------------------------- | | style | {...} | style | Custom styles will merge with the default styles. | | title | {...} | element | If this parameter is not specified, will not render the title. |

Basic props of `<ScrollView />`

@see: http://facebook.github.io/react-native/docs/scrollview.html

Supported ScrollResponder

Note: each ScrollResponder be injected with two params: state and context, you can get state and context(ref to swiper's this) from params, for example:

var swiper = React.createClass({
  _onMomentumScrollEnd: function (e, state, context) {
    console.log(state, context.state)
  },
  render: function() {
    return (
      <Swiper style={styles.wrapper}
      onMomentumScrollEnd ={this._onMomentumScrollEnd}
     ...
      </Swiper>
    )
  }
})

More ScrollResponder info, see: https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollResponder.js

Methods

scrollBy(index, animated)

Scroll by relative index.

Parameters:

Examples

$ cd examples
$ npm i
$ react-native run-ios

Quick start with examples.

Development

$ cd examples
$ npm i
$ npm run dev
$ react-native run-ios

Then launch simulator to preview. Note that you just need to edit the source file src/index.js, the change will auto sync to examples.

And now that this project follows the standard code style, you'd better prepare it for IDE.

Contribution

@leecade The main author.
@rajkissu The secondary contributor.

Questions

Feel free to contact me or create an issue

Inspired by nolimits4web/Swiper & Design material from Dribbble & made with ♥.