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

Add type definition for „react-native-snap-carousel“

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 <https://github.com/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<ScrollViewProperties> {
+    // 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<CarouselProps> {
+    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<CarouselStatic>;
+
+export default class Carousel extends React.Component<CarouselProperties, {}> { }

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<any> {
+        return (
+            <View>
+                <Carousel
+                    itemWidth={75}
+                    sliderWidth={300}
+                />
+                <Carousel
+                    itemWidth={75}
+                    sliderWidth={300}
+                    containerCustomStyle={styles.container}
+                    enableMomentum={true}
+                    keyboardDismissMode='interactive'
+                    onSnapToItem={this.onSnapToItem}
+                >
+                    <View
+                        style={styles.item}
+                    >
+                        <Text>Item #1</Text>
+                    </View>
+                </Carousel>
+            </View>
+        );
+    }
+
+    private onSnapToItem = (index: number) => {
+        console.log("Snapped to: ", index);
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1
+    } as ViewStyle,
+    item: {
+        width: 75
+    } as ViewStyle
+});

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"
+    ]
+}

types/react-native-snap-carousel/tslint.json

@@ -0,0 +1 @@
+{ "extends": "../tslint.json" }