Merge pull request #17174 from jnbt/react-native-snap-carousel-v222

Update react-native-snap-carousel to v2.2.2

types/react-native-snap-carousel/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for react-native-snap-carousel 2.1
+// Type definitions for react-native-snap-carousel 2.2
 // Project: https://github.com/archriss/react-native-snap-carousel
 // Definitions by: jnbt <https://github.com/jnbt>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
@@ -7,6 +7,7 @@
 import * as React from 'react';
 import {
     Animated,
+    LayoutChangeEvent,
     NativeSyntheticEvent,
     NativeScrollEvent,
     ScrollViewProperties,
@@ -19,12 +20,24 @@ export interface CarouselProps extends React.Props<ScrollViewProperties> {
 
     /**
      * Width in pixels of your slides, must be the same for all of them
+     * Note: Required with horizontal carousel
      */
-    itemWidth: number;
+    itemWidth?: number;
+    /**
+     * Height in pixels of carousel's items, must be the same for all of them
+     * Note: Required with vertical carousel
+     */
+    itemHeight?: number;
     /**
      * Width in pixels of your slider
+     * Note: Required with horizontal carousel
      */
-    sliderWidth: number;
+    sliderWidth?: number;
+    /**
+     * Height in pixels of the carousel itself
+     * Note: Required with vertical carousel
+     */
+    sliderHeight?: number;
 
     // Behavior
 
@@ -46,18 +59,36 @@ export interface CarouselProps extends React.Props<ScrollViewProperties> {
      * Index of the first item to display
      */
     firstItem?: number;
+    /**
+     * When momentum is disabled, this throttle helps smoothing slides' snapping by
+     * providing a bit of inertia when touch is released.
+     * Note that this will delay callback's execution.
+     */
+    scrollEndDragThrottleValue?: number;
     /**
      * Whether to implement a shouldComponentUpdate strategy to minimize updates
      */
     shouldOptimizeUpdates?: boolean;
     /**
-     * Snapping on android is kinda choppy, especially when swiping quickly so you can disable it
+     * This defines the timeframe during which multiple callback calls should be
+     * "grouped" into a single one.
+     * Note that this will delay callback's execution.
+     */
+    snapCallbackDebounceValue?: number;
+    /**
+     * Snapping on android is kinda choppy, especially when swiping quickly so you
+     * can disable it.
+     * Warning: this prop can't be changed dynamically.
      */
     snapOnAndroid?: boolean;
     /**
      * Delta x when swiping to trigger the snap
      */
     swipeThreshold?: number;
+    /*
+     * Layout slides vertically instead of horizontally
+     */
+    vertical?: boolean;
 
     // Autoplay
 
@@ -111,8 +142,18 @@ export interface CarouselProps extends React.Props<ScrollViewProperties> {
     slideStyle?: ViewStyle;
 
     // Callbacks
+    /**
+     * Exposed View callback; invoked on mount and layout changes
+     */
+    onLayout?(event: LayoutChangeEvent): void;
 
     /**
+     * Exposed ScrollView callback; fired while scrolling
+     */
+    onScroll?(event: NativeSyntheticEvent<NativeScrollEvent>): void;
+
+    /**
+     * @deprecated: use onScroll instead
      * Callback fired while scrolling; direct equivalent of ScrollView's onScroll
      * Since onScroll is overriden by plugin's implementation, you should use prop onScrollViewScroll
      * if you need a callback while scrolling.
@@ -129,7 +170,7 @@ export interface CarouselStatic extends React.ComponentClass<CarouselProps> {
     currentIndex: number;
     startAutoplay(instantly?: boolean): void;
     stopAutoplay(): void;
-    snapToItem(index: number, animated?: boolean): void;
+    snapToItem(index: number, animated?: boolean, fireCallback?: boolean, initial?: boolean): void;
     snapToNext(animated?: boolean): void;
     snapToPrev(animated?: boolean): void;
 }

types/react-native-snap-carousel/react-native-snap-carousel-tests.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+    LayoutChangeEvent,
     NativeSyntheticEvent,
     NativeScrollEvent,
     StyleSheet,
@@ -25,7 +26,9 @@ class SnapCarouselTest extends React.Component<{}, {}> {
                     enableMomentum={true}
                     keyboardDismissMode='interactive'
                     onSnapToItem={this.onSnapToItem}
-                    onScrollViewScroll={this.onScroll}
+                    onScroll={this.onScroll}
+                    onLayout={this.onLayout}
+                    vertical={false}
                 >
                     <View
                         style={styles.item}
@@ -33,6 +36,11 @@ class SnapCarouselTest extends React.Component<{}, {}> {
                         <Text>Item #1</Text>
                     </View>
                 </Carousel>
+                <Carousel
+                    itemHeight={75}
+                    sliderHeight={300}
+                    vertical={true}
+                />
             </View>
         );
     }
@@ -44,6 +52,10 @@ class SnapCarouselTest extends React.Component<{}, {}> {
     private onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
         console.log("Scrolled: ", event);
     }
+
+    private onLayout = (event: LayoutChangeEvent) => {
+        console.log("Layout: ", event);
+    }
 }
 
 const styles = StyleSheet.create({