react-native-slick-slider v1.0.1

react-native-slick

Roadmap

see: ROADMAP.md

Changelogs

• v1.0.0
  • Fix bugs and copy updates from original repo
  • 52b7023, 61a189d Update: using PropTypes from prop-types and Change View.propTypes to ViewPropTypes (@thanks @ahmed3mar).
  • 84840b3 Update README.md - fix links image readme (@thanks @Eric013).
  • react-natie-swiper Fork original repository and change name to react-native-slick.

see more: CHANGELOG.md

Show Cases

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

examples/components/Basic

examples/components/Slick

examples/components/SlickNumber

examples/components/Phone

examples/components/LoadMinimal

examples/components/PhotoView

with react-native-photo-view

Getting Started

• Installation
• Basic Usage
• Properties
  • Basic
  • Custom basic style & content
  • Pagination
  • Autoplay
  • Control buttons
  • Props of Children
  • Basic props of <ScrollView />
  • Supported ScrollResponder
• Examples
• Development

Installation

$ npm i react-native-slick --save

Basic Usage

• Install react-native first

$ npm i react-native -g

• Initialization of a react-native project

$ react-native init AwsomeProject

• Then, edit AwsomeProject/index.ios.js, like this:

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

import Slick from 'react-native-slick';

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 slick = React.createClass({
  render: function() {
    return (
      <Slick style={styles.wrapper} showsButtons={true}>
        <View style={styles.slide1}>
          <Text style={styles.text}>Hello Slick</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>
      </Slick>
    )
  }
})

AppRegistry.registerComponent('AwsomeProject', () => slick);

Properties

Basic

Custom basic style & content

Pagination

Autoplay

Control buttons

Props of Children

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 slick's this) from params, for example:

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

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.
• @ahmed3mar.
• @gauravkrp.

Questions

Feel free to contact me or create an issue

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