update pagination proptypes according to updated docs for react-native-snap-carousel (#43097)

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

@@ -1,10 +1,11 @@
-// Type definitions for react-native-snap-carousel 3.7
+// Type definitions for react-native-snap-carousel 3.8
 // Project: https://github.com/archriss/react-native-snap-carousel
 // Definitions by: jnbt <https://github.com/jnbt>
 //                 Jacob Froman <https://github.com/j-fro>
 //                 Nikolay Polukhin <https://github.com/gazaret>
 //                 Guillaume Amat <https://github.com/GuillaumeAmat>
 //                 Vitor Luiz Cavalcanti <https://github.com/VitorLuizC>
+//                 Lemon Garrett <https://github.com/egarrett94>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
@@ -336,6 +337,18 @@ export type ParallaxImageProperties = ParallaxImageProps & React.Props<ParallaxI
 export class ParallaxImage extends React.Component<ParallaxImageProperties> { }
 
 export interface PaginationProps {
+    /**
+     * Length of dot animation (milliseconds)
+     */
+    animatedDuration: number;
+    /**
+     * Controls "bounciness"/overshoot on dot animation
+     */
+    animatedFriction: number;
+    /**
+     * Controls speed dot animation
+     */
+    animatedTension: number;
     /**
      * Number of dots to display
      */
@@ -357,6 +370,10 @@ export interface PaginationProps {
      * Style for dots' container that will be merged with the default one
      */
     containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Delay in ms, from the start of the touch, before onPressIn is called on dot
+     */
+    delayPressInDot: number;
     /**
      * Background color of the active dot.
      * Use this if you want to animate the change between active and inactive colors,

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

@@ -8,7 +8,7 @@ import {
     View,
     ViewStyle,
 } from 'react-native';
-import Carousel, { Pagination, ParallaxImage, AdditionalParallaxProps, } from 'react-native-snap-carousel';
+import Carousel, { Pagination, ParallaxImage, AdditionalParallaxProps } from 'react-native-snap-carousel';
 
 class StringCarousel extends Carousel<string> {}
 
@@ -33,7 +33,7 @@ class SnapCarouselTest extends React.Component {
                     sliderWidth={300}
                     containerCustomStyle={styles.container}
                     enableMomentum={true}
-                    keyboardDismissMode='interactive'
+                    keyboardDismissMode="interactive"
                     onSnapToItem={this.onSnapToItem}
                     onBeforeSnapToItem={this.onBeforeSnapToItem}
                     lockScrollTimeoutDuration={900}
@@ -54,23 +54,23 @@ class SnapCarouselTest extends React.Component {
     }
 
     private readonly onBeforeSnapToItem = (index: number) => {
-        console.log("Before snap to: ", index);
+        console.log('Before snap to: ', index);
     }
 
     private readonly onSnapToItem = (index: number) => {
-        console.log("Snapped to: ", index);
+        console.log('Snapped to: ', index);
     }
 
     private readonly onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-        console.log("Scrolled: ", event);
+        console.log('Scrolled: ', event);
     }
 
     private readonly onLayout = (event: LayoutChangeEvent) => {
-        console.log("Layout: ", event);
+        console.log('Layout: ', event);
     }
 }
 
-class SnapCarouselWithPaginationTest extends React.Component<{}, {activeSlide: number}> {
+class SnapCarouselWithPaginationTest extends React.Component<{}, { activeSlide: number }> {
     state = { activeSlide: 0 };
 
     renderItem({ item }: { item: string }): React.ReactNode {
@@ -89,23 +89,27 @@ class SnapCarouselWithPaginationTest extends React.Component<{}, {activeSlide: n
                     renderItem={item => this.renderItem(item)}
                     itemWidth={75}
                     sliderWidth={300}
-                    keyboardDismissMode='interactive'
-                    onSnapToItem={(index) => this.setState({ activeSlide: index })}
+                    keyboardDismissMode="interactive"
+                    onSnapToItem={index => this.setState({ activeSlide: index })}
                 />
                 <Pagination
-                        dotsLength={2}
-                        activeDotIndex={this.state.activeSlide}
-                        containerStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.75)' }}
-                        dotStyle={{
-                            width: 10,
-                            height: 10,
-                            borderRadius: 5,
-                            marginHorizontal: 8,
-                            backgroundColor: 'rgba(255, 255, 255, 0.92)'
-                        }}
-                        inactiveDotOpacity={0.4}
-                        inactiveDotScale={0.6}
-                        />
+                    dotsLength={2}
+                    activeDotIndex={this.state.activeSlide}
+                    containerStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.75)' }}
+                    dotStyle={{
+                        width: 10,
+                        height: 10,
+                        borderRadius: 5,
+                        marginHorizontal: 8,
+                        backgroundColor: 'rgba(255, 255, 255, 0.92)',
+                    }}
+                    inactiveDotOpacity={0.4}
+                    inactiveDotScale={0.6}
+                    animatedDuration={250}
+                    animatedFriction={4}
+                    animatedTension={50}
+                    delayPressInDot={0}
+                />
             </View>
         );
     }