fixes #3 & supports react-native 0.4.1

dist/index.js

@@ -138,7 +138,8 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d
  autoplay: _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].PropTypes.bool,
  autoplayTimeout: _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].PropTypes.number,
  autoplayDirection: _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].PropTypes.bool,
- index: _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].PropTypes.number },
+ index: _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].PropTypes.number,
+ renderPagination: _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].PropTypes['function'] },
 
  mixins: [_TimerMixin2['default']],
 
@@ -268,7 +269,11 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d
  * @return {object} react-dom
  */
  renderPagination: function renderPagination() {
- var dots = [];
+
+ // By default, dots only show when `total` > 2
+ if (this.state.total <= 1) {
+ return null;
+ }var dots = [];
  for (var i = 0; i < this.state.total; i++) {
  dots.push(i === this.state.index ? this.props.activeDot || _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].createElement(_React$StyleSheet$Text$View$ScrollView$TouchableOpacity.View, { style: {
  backgroundColor: '#007aff',
@@ -409,7 +414,7 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d
  }, props),
  pages
  ),
- props.showsPagination && total > 1 && this.renderPagination(),
+ props.showsPagination && (props.renderPagination ? this.props.renderPagination(state.index, state.total) : this.renderPagination()),
  this.renderTitle(),
  this.props.showsButtons && this.renderButtons()
  );

examples/examples/index.js

@@ -138,7 +138,8 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d
  autoplay: _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].PropTypes.bool,
  autoplayTimeout: _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].PropTypes.number,
  autoplayDirection: _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].PropTypes.bool,
- index: _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].PropTypes.number },
+ index: _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].PropTypes.number,
+ renderPagination: _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].PropTypes['function'] },
 
  mixins: [_TimerMixin2['default']],
 
@@ -268,7 +269,11 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d
  * @return {object} react-dom
  */
  renderPagination: function renderPagination() {
- var dots = [];
+
+ // By default, dots only show when `total` > 2
+ if (this.state.total <= 1) {
+ return null;
+ }var dots = [];
  for (var i = 0; i < this.state.total; i++) {
  dots.push(i === this.state.index ? this.props.activeDot || _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].createElement(_React$StyleSheet$Text$View$ScrollView$TouchableOpacity.View, { style: {
  backgroundColor: '#007aff',
@@ -409,7 +414,7 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d
  }, props),
  pages
  ),
- props.showsPagination && total > 1 && this.renderPagination(),
+ props.showsPagination && (props.renderPagination ? this.props.renderPagination(state.index, state.total) : this.renderPagination()),
  this.renderTitle(),
  this.props.showsButtons && this.renderButtons()
  );

examples/examples/swiper_number.js

@@ -0,0 +1,71 @@
+var React = require('react-native')
+var Swiper = require('./')
+var {
+ StyleSheet,
+ Text,
+ View,
+ Image,
+} = React
+
+var styles = StyleSheet.create({
+ wrapper: {
+ },
+ slide: {
+ flex: 1,
+ justifyContent: 'center',
+ backgroundColor: 'transparent',
+ },
+ text: {
+ color: '#fff',
+ fontSize: 30,
+ fontWeight: 'bold',
+ },
+ image: {
+ flex: 1,
+ }
+})
+
+var renderPagination = function (index, total) {
+ return (
+ <View style={{
+ position: 'absolute',
+ bottom: -25,
+ right: 10,
+ }}>
+ <Text><Text style={{
+ color: '#007aff',
+ fontSize: 20,
+ }}>{index + 1}</Text>/{total}</Text>
+ </View>
+ )
+}
+
+var swiper = React.createClass({
+ render: function() {
+ return (
+ <View>
+ <Swiper style={styles.wrapper} height={240}
+ renderPagination={renderPagination}
+ paginationStyle={{
+ bottom: -23, left: null, right: 10,
+ }} loop={false}>
+ <View style={styles.slide} title={<Text numberOfLines={1}>Aussie tourist dies at Bali hotel</Text>}>
+ <Image style={styles.image} source={{uri: 'http://c.hiphotos.baidu.com/image/w%3D310/sign=0dff10a81c30e924cfa49a307c096e66/7acb0a46f21fbe096194ceb468600c338644ad43.jpg'}} />
+ </View>
+ <View style={styles.slide} title={<Text numberOfLines={1}>Big lie behind Nine’s new show</Text>}>
+ <Image style={styles.image} source={{uri: 'http://a.hiphotos.baidu.com/image/w%3D310/sign=4459912736a85edffa8cf822795509d8/bba1cd11728b4710417a05bbc1cec3fdfc032374.jpg'}} />
+ </View>
+ <View style={styles.slide} title={<Text numberOfLines={1}>Why Stone split from Garfield</Text>}>
+ <Image style={styles.image} source={{uri: 'http://e.hiphotos.baidu.com/image/w%3D310/sign=9a8b4d497ed98d1076d40a30113eb807/0823dd54564e9258655f5d5b9e82d158ccbf4e18.jpg'}} />
+ </View>
+ <View style={styles.slide} title={<Text numberOfLines={1}>Learn from Kim K to land that job</Text>}>
+ <Image style={styles.image} source={{uri: 'http://e.hiphotos.baidu.com/image/w%3D310/sign=2da0245f79ec54e741ec1c1f89399bfd/9d82d158ccbf6c818c958589be3eb13533fa4034.jpg'}} />
+ </View>
+ </Swiper>
+ </View>
+ )
+ }
+})
+
+module.exports = swiper
+

examples/index.ios.js

@@ -7,6 +7,7 @@ var {
 
 // var swiper = require('./examples/basic')
 var swiper = require('./examples/swiper')
+// var swiper = require('./examples/swiper_number')
 // var swiper = require('./examples/phone')
 
 AppRegistry.registerComponent('swiper', () => swiper)