The best Swiper component for React Native.
Feature
-
Infinite loop
-
Direction control
-
Complete custom style
-
Allow title display & custom
-
Multiple instances
-
Custom container size
-
Control buttons
-
Autoplay
Changelogs & TODO
-
More switch effects
-
Unit tests
-
Check typo
-
Optimal performance when
<Image />
re-render -
Making the
width
/height
optional prop, usemeasure
function instead -
[v1.0.3] fixes#1 Two 'horizontal' in propTypes. (thanks@MacyzZ)
-
[v1.0.4] fixes#2 Solve the problem of installation. (thanks@jamwaffles)
Show Cases
Try these cases by yourself very easy, Just open examples/swiper.xcodeproj
with Xcode, then press Cmd + R
; you may edit examples/index.ios.js
for switch cases.
examples/basic.js
examples/swiper.js
examples/phone.js
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-swiper --save
Basic Usage
var Swiper = require('react-native-swiper')
// es6
// import Swiper from 'react-native-swiper'
var {
AppRegistry,
} = 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} 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('swiper', () => swiper)
Properties
Prop | Default | Type | Describe |
---|---|---|---|
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 | Describe |
---|---|---|---|
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 | Describe |
---|---|---|---|
showsPagination | true | bool | Set to true make pagination visible. |
paginationStyle | {...} | style | Custom styles will merge with the default styles. |
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 | Describe |
---|---|---|---|
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 | Describe |
---|---|---|---|
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, {color: !this.props.loop && this.state.index == this.state.total - 1 ? 'rgba(0,0,0,0)' : '#007aff'}]}>›</Text> | element | Allow custom the next button. |
prevButton | <Text style={[styles.buttonText, {color: !this.props.loop && this.state.index == 0 ? 'rgba(0,0,0,0)' : '#007aff'}]}>‹</Text> | element | Allow custom the prev button. |
Props of Children
Prop | Default | Type | Describe |
---|---|---|---|
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 />
Prop | Default | Type | Describe |
---|---|---|---|
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. |
Supported ScrollResponder
Prop | Default | Type | Describe |
---|---|---|---|
onMomentumScrollBegin | - | function | When animation begins after letting up |
onMomentumScrollEnd | - | function | Makes no sense why this occurs first during bounce |
onTouchStartCapture | - | function | Immediately after onMomentumScrollEnd |
onTouchStart | - | function | Same, but bubble phase |
onTouchEnd | - | function | You could hold the touch start for a long time |
onResponderRelease | - | function | When lifting up - you could pause forever before * lifting |