diff --git a/types/react-native-snap-carousel/index.d.ts b/types/react-native-snap-carousel/index.d.ts new file mode 100644 index 0000000000..8d08f3ff82 --- /dev/null +++ b/types/react-native-snap-carousel/index.d.ts @@ -0,0 +1,124 @@ +// Type definitions for react-native-snap-carousel 2.1 +// Project: https://github.com/archriss/react-native-snap-carousel +// Definitions by: jnbt +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +import * as React from 'react'; +import { + Animated, + ScrollViewProperties, + ScrollViewStyle, + ViewStyle +} from 'react-native'; + +interface CarouselProps extends React.Props { + // Required + + /** + * Width in pixels of your slides, must be the same for all of them + */ + itemWidth: number; + /** + * Width in pixels of your slider + */ + sliderWidth: number; + + // Behavior + + /** + * From slider's center, minimum slide distance to be scrolled before being set to active + */ + activeSlideOffset?: number; + /** + * Since 1.5.0, the snapping effect can now be based on momentum instead of when you're + * releasing your finger. It means that the component will wait until the ScrollView + * isn't moving anymore to snap + */ + enableMomentum?: boolean; + /** + * If enabled, releasing the touch will scroll to the center of the nearest/active item + */ + enableSnap?: boolean; + /** + * Index of the first item to display + */ + firstItem?: 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 + */ + snapOnAndroid?: boolean; + /** + * Delta x when swiping to trigger the snap + */ + swipeThreshold?: number; + + // Autoplay + + /** + * Trigger autoplay on mount + */ + autoplay?: boolean; + /** + * Delay before enabling autoplay on startup & after releasing the touch + */ + autoplayDelay?: number; + /** + * Delay in ms until navigating to the next item + */ + autoplayInterval?: number; + + // Style and animation + + /** + * Animated animation to use. Provide the name of the method + */ + animationFunc?: 'decay' | 'timing' | 'spring'; + /** + * Animation options to be merged with the default ones. Can be used w/ animationFunc + */ + animationOptions?: Animated.DecayAnimationConfig | Animated.TimingAnimationConfig | Animated.SpringAnimationConfig; + /** + * Optional styles for Scrollview's global wrapper + */ + containerCustomStyle?: ScrollViewStyle; + /** + * Optional styles for Scrollview's items container + */ + contentContainerCustomStyle?: ScrollViewStyle; + /** + * Value of the opacity effect applied to inactive slides + */ + inactiveSlideOpacity?: number; + /** + * Value of the 'scale' transform applied to inactive slides + */ + inactiveSlideScale?: number; + /** + * Optional style for each item's container (the one whose scale and opacity are animated) + */ + slideStyle?: ViewStyle; + + // Callbacks + + /** + * Callback fired when navigating to an item + */ + onSnapToItem?(slideIndex: number): void; +} + +export interface CarouselStatic extends React.ComponentClass { + currentIndex: number; + startAutoplay(instantly?: boolean): void; + stopAutoplay(): void; + snapToItem(index: number, animated?: boolean): void; + snapToNext(animated?: boolean): void; + snapToPrev(animated?: boolean): void; +} + +export type CarouselProperties = ScrollViewProperties & CarouselProps & React.Props; + +export default class Carousel extends React.Component { } 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 new file mode 100644 index 0000000000..88fb764b03 --- /dev/null +++ b/types/react-native-snap-carousel/react-native-snap-carousel-tests.tsx @@ -0,0 +1,49 @@ +import * as React from 'react'; +import { + StyleSheet, + Text, + View, + ViewStyle +} from 'react-native'; + +import Carousel from 'react-native-snap-carousel'; + +class SnapCarouselTest extends React.Component<{}, {}> { + render(): React.ReactElement { + return ( + + + + + Item #1 + + + + ); + } + + private onSnapToItem = (index: number) => { + console.log("Snapped to: ", index); + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1 + } as ViewStyle, + item: { + width: 75 + } as ViewStyle +}); diff --git a/types/react-native-snap-carousel/tsconfig.json b/types/react-native-snap-carousel/tsconfig.json new file mode 100644 index 0000000000..0764309c6f --- /dev/null +++ b/types/react-native-snap-carousel/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true, + "jsx": "react" + }, + "files": [ + "index.d.ts", + "react-native-snap-carousel-tests.tsx" + ] +} diff --git a/types/react-native-snap-carousel/tslint.json b/types/react-native-snap-carousel/tslint.json new file mode 100644 index 0000000000..377cc837d4 --- /dev/null +++ b/types/react-native-snap-carousel/tslint.json @@ -0,0 +1 @@ +{ "extends": "../tslint.json" }