react-native-swiper2
Based on react-native-swiper, which was the best Swiper component for React Native.
However for some reason, react-native-swiper didn't update for long time, and can not run on recent react native versions.
So I forked this react-native-swiper2
, and would maintain it as long as I could.
PRs or Issues are deeply welcomed.
Changelogs
-
[v2.0.7]
- correct onPageChange index. https://github.com/sunnylqm/react-native-swiper2/pull/12
-
[v2.0.6]
- support RN 0.25+. (@xirc).
-
[v2.0.5]
- add scrollTo for android. (@LeeChSien).
-
[v2.0.4]
- fix scrollTo warning.
-
[v2.0.3]
- support pagination on android.
-
[v2.0.2]
- add simple support for android.
-
[v2.0.1]
- fix the dimensions module error.
- fix the keys warning when render dots.
-
[v1.3.0]
-
[v1.2.2]
- 890c0ce ensure
onMomentumScrollEnd
synchronous updateindex
.
- 890c0ce ensure
-
[v1.2.0]
-
[v1.1.1]
- 21f0b00 fixes #6 a define-propType error. (thanks @benjamingeorge)
-
[v1.1.0]
- 44ec630 fixes #4
onMoementumScrollEnd
gets overridden. (thanks @subpublicanders) - 5de06a7 New prop:
renderPagination
. (thanks @aksonov)
- 44ec630 fixes #4
-
[v1.0.4]
- 21cb373 fixes #2 Solve the problem of installation. (thanks @jamwaffles)
-
[v1.0.3]
Show Cases
Try these cases by yourself very easy, Just open
examples/swiper.xcodeproj
with Xcode, then pressCmd + R
; you may editexamples/index.ios.js
for switch cases.
examples/basic.js
examples/swiper.js
examples/swiper_number.js
examples/phone.js
Getting Started
Installation
$ npm i react-native-swiper2 --save
Basic Usage
- Install
react-native-cli
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:
var Swiper = // es6// import Swiper from 'react-native-swiper2' var React = ;var AppRegistry StyleSheet Text View = React; var styles = StyleSheet var swiper = React AppRegistry
Properties
Basic
Prop | Default | Type | Description |
---|---|---|---|
horizontal | true | bool |
If true , the scroll view's children are arranged horizontally in a row instead of vertically in a column. |
loop | true | bool |
Set to true to enable continuous loop mode. |
index | 0 | number |
Index number of initial slide. |
showsButtons | false | bool |
Set to true make control buttons visible. |
autoplay | false | bool |
Set to true enable auto play mode. |
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. |
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. |
Autoplay
Prop | Default | Type | Description |
---|---|---|---|
autoplay | true | bool |
Set to true enable auto play mode. |
autoplayTimeout | 2.5 | number |
Delay between auto play transitions (in second). |
autoplayDirection | true | bool |
Cycle direction control. |
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. |
<ScrollView />
Basic props of Prop | Default | Type | Description |
---|---|---|---|
horizontal | true | bool |
If true , the scroll view's children are arranged horizontally in a row instead of vertically in a column. |
pagingEnabled | true | bool |
If true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination. |
showsHorizontalScrollIndicator | false | bool |
Set to true if you want to show horizontal scroll bar. |
showsVerticalScrollIndicator | false | bool |
Set to true if you want to show vertical scroll bar. |
bounces | false | bool |
If true , the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. If false , it disables all bouncing even if the alwaysBounce* props are true. |
scrollsToTop | false | bool |
If true, the scroll view scrolls to top when the status bar is tapped. |
removeClippedSubviews | true | bool |
If true, offscreen child views (whose overflow value is hidden) are removed from their native backing superview when offscreen. This canimprove scrolling performance on long lists. |
automaticallyAdjustContentInsets | false | bool |
Set to true if you need adjust content insets automation. |
@see: http://facebook.github.io/react-native/docs/scrollview.html
Supported ScrollResponder
Prop | Params | Type | Description |
---|---|---|---|
onMomentumScrollBegin | e / state / context |
function |
When animation begins after letting up |
onMomentumScrollEnd | e / state / context |
function |
Makes no sense why this occurs first during bounce |
onTouchStartCapture | e / state / context |
function |
Immediately after onMomentumScrollEnd |
onTouchStart | e / state / context |
function |
Same, but bubble phase |
onTouchEnd | e / state / context |
function |
You could hold the touch start for a long time |
onResponderRelease | e / state / context |
function |
When lifting up - you could pause forever before * lifting |
Note: each ScrollResponder be injected with two params:
state
andcontext
, you can getstate
andcontext
(ref to swiper'sthis
) from params, for example:
var swiper = React
More ScrollResponder info, see: https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollResponder.js
Examples
@TODO, see code in examples first.
Development
$ npm start
Contribution
- @leecade The main author of the original version .
Questions
Feel free to create an issue
Inspired by nolimits4web/Swiper & Design material from Dribbble & made with ♥.