support dynamic width for Carousel (#557)

* support dynamic width for Carousel

* improve full page carousel example

* declare on containerWidth in Carousel

Author: ethanshar

demo/src/screens/componentScreens/CarouselScreen.js

@@ -1,11 +1,18 @@
 import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
-import {Constants, View, Text, Carousel} from 'react-native-ui-lib'; // eslint-disable-line
-
+import {Constants, View, Text, Carousel, Image, Card} from 'react-native-ui-lib'; // eslint-disable-line
+import _ from 'lodash';
 
 const INITIAL_PAGE = 0;
 const WIDTH = Constants.screenWidth - 120;
 
+const IMAGES = [
+  'https://images.pexels.com/photos/1212487/pexels-photo-1212487.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
+  'https://images.pexels.com/photos/1366630/pexels-photo-1366630.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
+  'https://images.pexels.com/photos/1477459/pexels-photo-1477459.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
+  'https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
+];
+
 class CarouselScreen extends Component {
   state = {
     currentPage: INITIAL_PAGE
@@ -15,23 +22,25 @@ class CarouselScreen extends Component {
     this.setState({currentPage: index});
   }
 
-  onPagePress = (index) => {
+  onPagePress = index => {
     this.carousel.goToPage(index, true);
-  }
+  };
 
   render() {
     return (
       <View flex>
-        <Text text30 margin-20>Carousel</Text>
-        <Carousel 
-          migrate 
-          ref={r => this.carousel = r}
-          // loop 
-          onChangePage={(index => this.onChangePage(index))} 
+        <Text text30 margin-20>
+          Carousel
+        </Text>
+        <Carousel
+          migrate
+          ref={r => (this.carousel = r)}
+          // loop
+          onChangePage={index => this.onChangePage(index)}
           pageWidth={WIDTH}
           // itemSpacings={20}
           // initialPage={INITIAL_PAGE}
-          containerStyle={{height: 200/* , flex: 1 */}}
+          containerStyle={{height: 160/* , flex: 1 */}}
           pageControlPosition={'under'}
           pageControlProps={{onPagePress: this.onPagePress}}
           // showCounter
@@ -58,10 +67,28 @@ class CarouselScreen extends Component {
             <Text margin-15>PAGE 6</Text>
           </Page>
         </Carousel>
-        
+
         <View margin-20 center /*style={{...StyleSheet.absoluteFillObject}} */ pointerEvents="none">
           <Text text10>{this.state.currentPage}</Text>
         </View>
+
+        <View padding-20>
+          <Carousel test migrate containerStyle={{height: 160}}>
+            {_.map(IMAGES, (image, index) => {
+              return (
+                <View key={index} flex padding-10 bottom>
+                  <Image
+                    style={StyleSheet.absoluteFillObject}
+                    source={{
+                      uri: image
+                    }}
+                  />
+                  <Text white text50>Image {index}</Text>
+                </View>
+              );
+            })}
+          </Carousel>
+        </View>
       </View>
     );
   }

src/components/carousel/index.js

@@ -89,6 +89,7 @@ export default class Carousel extends BaseComponent {
       : props.pageWidth + props.itemSpacings || Constants.screenWidth;
 
     this.state = {
+      containerWidth: undefined,
       currentPage: this.shouldUsePageWidth() ? this.getCalcIndex(props.initialPage) : props.initialPage,
       currentStandingPage: props.initialPage,
       pageWidth: defaultPageWidth,
@@ -145,11 +146,31 @@ export default class Carousel extends BaseComponent {
     return index;
   }
 
+  getSnapToOffsets = () => {
+    const {itemSpacings} = this.props;
+    const {containerWidth, pageWidth} = this.state;
+
+    if (containerWidth) {
+      const spacings = pageWidth === containerWidth ? 0 : itemSpacings;
+      const initialBreak = pageWidth - (containerWidth - pageWidth - spacings) / 2;
+      const snapToOffsets = _.times(presenter.getChildrenLength(this.props), index => initialBreak + index * pageWidth);
+      return snapToOffsets;
+    }
+  }
+
   shouldUsePageWidth() {
     const {loop, pageWidth} = this.props;
     return !loop && pageWidth;
   }
 
+  onContainerLayout = ({nativeEvent: {layout: {width: containerWidth}}}) => {
+    const update = {containerWidth};
+    if (!this.props.pageWidth) {
+      update.pageWidth = containerWidth;
+    }
+    this.setState(update);
+  }
+
   onContentSizeChange = () => {
     // this is to handle initial scroll position (content offset)
     if (Constants.isAndroid) {
@@ -200,6 +221,11 @@ export default class Carousel extends BaseComponent {
   };
 
   renderChildren() {
+    const {containerWidth} = this.state;
+    if (!containerWidth && !this.shouldUsePageWidth()) {
+      return null;
+    }
+
     const {children, loop} = this.props;
     const length = presenter.getChildrenLength(this.props);
 
@@ -257,15 +283,13 @@ export default class Carousel extends BaseComponent {
 
   render() {
     const {containerStyle, itemSpacings, ...others} = this.props;
-    const {initialOffset, pageWidth} = this.state;
+    const {initialOffset} = this.state;
 
     const scrollContainerStyle = this.shouldUsePageWidth() ? {paddingRight: itemSpacings} : undefined;
-    const spacings = pageWidth === Constants.screenWidth ? 0 : itemSpacings;
-    const initialBreak = pageWidth - (Constants.screenWidth - pageWidth - spacings) / 2;
-    const snapToOffsets = _.times(presenter.getChildrenLength(this.props), index => initialBreak + index * pageWidth);
+    const snapToOffsets = this.getSnapToOffsets();
 
     return (
-      <View style={containerStyle}>
+      <View style={containerStyle} onLayout={this.onContainerLayout}>
         <ScrollView
           {...others}
           ref={this.carousel}