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)