Support auto height layout for vertical carousel (#1294)

Author: ethanshar

demo/src/screens/componentScreens/CarouselVerticalScreen.tsx

@@ -22,7 +22,7 @@ const BACKGROUND_COLORS = [
   Colors.purple60
 ];
 
-const pageHeight = Constants.windowHeight / 2;
+const pageHeight = Constants.windowHeight / 3;
 
 class CarouselVerticalScreen extends Component<{}, State> {
   carousel = React.createRef<typeof Carousel>();
@@ -101,6 +101,17 @@ class CarouselVerticalScreen extends Component<{}, State> {
           </Carousel>
           {this.renderAnimatedCounter()}
         </View>
+
+        <View centerH flex marginT-s3>
+          <Text h3 marginB-s2>
+            iOS Widgets Carousel
+          </Text>
+          <Carousel horizontal={false} containerStyle={styles.widgetsCarousel}>
+            <View flex bg-blue30/>
+            <View flex bg-orange30/>
+            <View flex bg-green30/>
+          </Carousel>
+        </View>
       </View>
     );
   }
@@ -130,6 +141,13 @@ const styles = StyleSheet.create({
     position: 'absolute',
     top: 20,
     left: 20
+  },
+  widgetsCarousel: {
+    height: 150,
+    width: 300,
+    backgroundColor: Colors.grey60,
+    borderRadius: 24,
+    overflow: 'hidden'
   }
 });
 

src/components/carousel/index.tsx

@@ -234,7 +234,7 @@ class Carousel extends Component<CarouselProps, CarouselState> {
       pageHeight
     });
 
-    this.setState({containerWidth, pageWidth, initialOffset});
+    this.setState({containerWidth, pageWidth, pageHeight, initialOffset});
   };
 
   shouldAllowAccessibilityLayout() {
@@ -327,7 +327,9 @@ class Carousel extends Component<CarouselProps, CarouselState> {
 
   renderChild = (child: ReactNode, key: Key): JSX.Element | undefined => {
     if (child) {
-      const paddingLeft = this.props.horizontal ? this.shouldUsePageWidth() ? this.getItemSpacings(this.props) : undefined : 0;
+      const {pageWidth, pageHeight} = this.state;
+      const {horizontal} = this.props;
+      const paddingLeft = horizontal ? this.shouldUsePageWidth() ? this.getItemSpacings(this.props) : undefined : 0;
       const index = Number(key);
       const length = presenter.getChildrenLength(this.props);
       const containerMarginHorizontal = this.getContainerMarginHorizontal();
@@ -338,7 +340,8 @@ class Carousel extends Component<CarouselProps, CarouselState> {
       return (
         <View
           style={{
-            width: this.state.pageWidth,
+            width: pageWidth,
+            height: !horizontal ? pageHeight : undefined,
             paddingLeft,
             marginLeft,
             marginRight,