Use getWidth() and wrapping children to have consistent width

nick · Aug 2, 2016 · 2f374b3 · 2f374b3
1 parent cf8ca56
commit 2f374b3
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/Carousel.js b/Carousel.js
@@ -29,7 +29,7 @@ var Carousel = React.createClass({
       indicatorSpace: 25,
       animate: true,
       delay: 1000,
-      loop: true,
+      loop: true
     };
   },
 
@@ -135,12 +135,17 @@ var Carousel = React.createClass({
   },
 
   render() {
+    let width = this.getWidth()
+    let style = {
+      flex: 1,
+      width: width
+    }
+
     return (
-      <View style={{ flex: 1 }}>
+      <View style={style}>
         <CarouselPager
           ref="pager"
-          width={this.getWidth()}
-          contentContainerStyle={styles.container}
+          width={width}
           onBegin={this._onAnimationBeginPage}
           onEnd={this._onAnimationEnd}
         >

diff --git a/CarouselPager.ios.js b/CarouselPager.ios.js
@@ -1,6 +1,7 @@
 var React = require('react');
 var {
   ScrollView,
+  View
 } = require('react-native');
 
 var CarouselPager = React.createClass({
@@ -29,9 +30,13 @@ var CarouselPager = React.createClass({
       onMomentumScrollEnd={this._onMomentumScrollEnd}
       scrollsToTop={false}
     >
-      {this.props.children}
+      {React.Children.map(this.props.children, this.setWidth)}
     </ScrollView>;
   },
+
+  setWidth(child) {
+    return (<View style={{ width: this.props.width }}>{child}</View>)
+  }
 });
 
 module.exports = CarouselPager;