diff --git a/types/react-native-snap-carousel/index.d.ts b/types/react-native-snap-carousel/index.d.ts index d7b38c752e..e83fc45cb6 100644 --- a/types/react-native-snap-carousel/index.d.ts +++ b/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 // Jacob Froman // Nikolay Polukhin // Guillaume Amat // Vitor Luiz Cavalcanti +// Lemon Garrett // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 @@ -336,6 +337,18 @@ export type ParallaxImageProperties = ParallaxImageProps & React.Props { } 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; + /** + * 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, diff --git a/types/react-native-snap-carousel/react-native-snap-carousel-tests.tsx b/types/react-native-snap-carousel/react-native-snap-carousel-tests.tsx index 1a085f91cc..01e52bb5c3 100644 --- a/types/react-native-snap-carousel/react-native-snap-carousel-tests.tsx +++ b/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 {} @@ -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) => { - 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 })} /> + 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} + /> ); }