From aea630760909aa0a93a50341702ee37315eb972f Mon Sep 17 00:00:00 2001
From: Jarred Witt <me@jarredwitt.com>
Date: Thu, 10 Mar 2016 08:42:44 -0600
Subject: [PATCH 1/3] Added pageInfo Pill

Added pageInfo option. The pageInfo option will display a pill at the bottom of the view with the current page number.

Other options added are:
pageInfo: bool (enable the control, default is false),
pageInfoBackgroundColor: string (set the backgroundColor of the pill, default is black with 0.25 alpha),
pageInfoTextStyle: text style (set the text style of the pill, no default set),
pageInfoTextSeparator: string (set the character used to separate the current page from the amount of pages eg: ' of ' would show 1 of 3. Default is ' / ')
---
 index.js | 51 +++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 45 insertions(+), 6 deletions(-)

diff --git a/index.js b/index.js
index c2801cd..234ba25 100644
--- a/index.js
+++ b/index.js
@@ -24,13 +24,20 @@ var Carousel = React.createClass({
     pageStyle: View.propTypes.style,
     contentContainerStyle: View.propTypes.style,
     autoplay: React.PropTypes.bool,
+    pageInfo: React.PropTypes.bool,
+    pageInfoBackgroundColor: React.PropTypes.string,
+    pageInfoTextStyle: Text.propTypes.style,
+    pageInfoTextSeparator: React.PropTypes.string,
     onAnimateNextPage: React.PropTypes.func
   },
   mixins: [TimerMixin],
   getDefaultProps() {
     return {
       delay: PAGE_CHANGE_DELAY,
-      autoplay: true
+      autoplay: true,
+      pageInfo: false,
+      pageInfoBackgroundColor: 'rgba(0, 0, 0, 0.25)',
+      pageInfoTextSeparator: ' / ',
     };
   },
   getInitialState() {
@@ -99,7 +106,7 @@ var Carousel = React.createClass({
         this.props.onAnimateNextPage(this.state.currentPage)
       }
     })
-    this.refs.scrollView.scrollTo(0, k*size.width);
+    this.refs.scrollView.scrollTo({ y: 0, x: k*size.width });
     this._setUpTimer();
   },
   _calculateCurrentPage(offset) {
@@ -111,6 +118,17 @@ var Carousel = React.createClass({
       }
     });
   },
+  _renderPageInfo(pageLength) {
+    return (
+      <View style={styles.pageInfoBottomContainer}>
+        <View style={styles.pageInfoContainer}>
+          <View style={[styles.pageInfoPill, { backgroundColor: this.props.pageInfoBackgroundColor }]}>
+            <Text style={[styles.pageInfoText, this.props.pageInfoTextStyle]}>{`${this.state.currentPage}${this.props.pageInfoTextSeparator}${pageLength}`}</Text>
+          </View>
+        </View>
+      </View>
+    );
+  },
   //TODO: add optional `dots` for displaying current page (like pageControl)
   render() {
     var pages = [],
@@ -152,9 +170,8 @@ var Carousel = React.createClass({
     }
 
     pages = pages.map((page, i) =>
-        <View
-          style={[{width: size.width, height: size.height}, this.props.pageStyle]}
-          key={"page"+i}>{page}
+        <View style={[{width: size.width, height: size.height}, this.props.pageStyle]} key={"page"+i}>
+          {page}
         </View>
     );
 
@@ -186,6 +203,7 @@ var Carousel = React.createClass({
       return (
         <View {...containerProps}>
           {contents}
+          {this.props.pageInfo && this._renderPageInfo(children.length)}
         </View>
       );
   },
@@ -193,7 +211,28 @@ var Carousel = React.createClass({
 
 var styles = StyleSheet.create({
   horizontalScroll: {
-    position:'absolute'
+    position:'absolute',
+  },
+  pageInfoBottomContainer: {
+    position: 'absolute',
+    bottom: 20,
+    left: 0,
+    right: 0,
+  },
+  pageInfoContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  pageInfoPill: {
+    width: 80,
+    height: 20,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  pageInfoText: {
+    textAlign: 'center',
   }
 });
 

From 622c3c97ab63121a93b053d765aba1e40498e19f Mon Sep 17 00:00:00 2001
From: Jarred Witt <me@jarredwitt.com>
Date: Thu, 10 Mar 2016 08:49:33 -0600
Subject: [PATCH 2/3] Update package.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e496d42..b5e3531 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
   ],
   "license": "MIT",
   "peerDependencies": {
-    "react-native": ">=0.16.0 <=0.17.0"
+    "react-native": ">=0.16.0 <=0.21.0"
   },
   "dependencies": {
     "react-timer-mixin": "^0.13.3"

From 79621a850e5cafc76d973c7994b60ec038059d6e Mon Sep 17 00:00:00 2001
From: Jarred Witt <me@jarredwitt.com>
Date: Thu, 10 Mar 2016 09:38:50 -0600
Subject: [PATCH 3/3] Removed Scrolling Dead Zone

Add pointerEvents="none" to the container view around the pill. This allows scrolling even when a touch event occurs on the pageInfo pill.
---
 index.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/index.js b/index.js
index 234ba25..5e8c228 100644
--- a/index.js
+++ b/index.js
@@ -120,7 +120,7 @@ var Carousel = React.createClass({
   },
   _renderPageInfo(pageLength) {
     return (
-      <View style={styles.pageInfoBottomContainer}>
+      <View style={styles.pageInfoBottomContainer} pointerEvents="none">
         <View style={styles.pageInfoContainer}>
           <View style={[styles.pageInfoPill, { backgroundColor: this.props.pageInfoBackgroundColor }]}>
             <Text style={[styles.pageInfoText, this.props.pageInfoTextStyle]}>{`${this.state.currentPage}${this.props.pageInfoTextSeparator}${pageLength}`}</Text>
@@ -218,11 +218,12 @@ var styles = StyleSheet.create({
     bottom: 20,
     left: 0,
     right: 0,
+    backgroundColor: 'transparent',
   },
   pageInfoContainer: {
-    flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
+    backgroundColor: 'transparent'
   },
   pageInfoPill: {
     width: 80,