feat: first commit of carousel component

dohooo · Sep 7, 2021 · af964e3 · af964e3
1 parent 72f2e94
commit af964e3
Show file tree

Hide file tree

Showing 20 changed files with 23,943 additions and 66 deletions.
diff --git a/README.md b/README.md
@@ -1,23 +1,72 @@
 # react-native-reanimated-carousel
 
-Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.
+<img src="./assets/example-01.gif" style='margin:0 auto;width:300px;display:block'/>
+
+<br/>
+<h2 style="text-align:center;">Simple carousel component.</h2>
+<h2 style="text-align:center;">Fully implemented using Reanimated 2.</h2>
+<h2 style="text-align:center;">Infinitely scrolling, very smooth.</h2>
+
+> The common RN infinite scroll component. It's common to get stuck on a fast slide. Wait for the next element to appear. This component will not have similar problems. That's why this library was created.
 
 ## Installation
 
+Open a Terminal in the project root and run:
+
+```sh
+yarn add react-native-reanimated-carousel
+```
+
+Or if you use npm:
+
 ```sh
 npm install react-native-reanimated-carousel
 ```
 
+Now we need to install [`react-native-gesture-handler`](https://github.com/kmagiera/react-native-gesture-handler) and [`react-native-reanimated(>=2.0.0)`](https://github.com/kmagiera/react-native-reanimated). 
+Don't use Expo to install reanimated it not supported `Reanimated(v2)`
+
 ## Usage
 
-```js
-import ReanimatedCarousel from "react-native-reanimated-carousel";
+```typescript
+import Carousel from "react-native-reanimated-carousel";
 
 // ...
 
-const result = await ReanimatedCarousel.multiply(3, 7);
+<Carousel<{ color: string }>
+  width={width}
+  data={[{ color: "red" }, { color: "purple" }, { color: "yellow" }]}
+  renderItem={({ color }) => {
+    return (
+      <View
+        style={{
+          backgroundColor: color,
+          justifyContent: "center",
+          flex: 1,
+        }}
+      />
+    );
+  }}
+/>;
 ```
 
+## Props
+
+| name                    | required | default | types                                       | description                                                                    |
+| ----------------------- | -------- | ------- | ------------------------------------------- | ------------------------------------------------------------------------------ |
+| data                    | true     |         | T[]                                         | Carousel items data set                                                        |
+| width                   | true     |         | number                                      | Specified carousel container width                                             |
+| renderItem              | true     |         | (data: T, index: number) => React.ReactNode | Render carousel item                                                           |
+| autoPlay                | false    | false   | boolean                                     | Auto play                                                                      |
+| autoPlayReverse         | false    | false   | boolean                                     | Auto play reverse playback                                                     |
+| autoPlayInterval        | false    | 1000    | autoPlayInterval                            | Auto play playback interval                                                    |
+| layout                  | false    | defalut | 'default'                                   | Carousel Animated transitions                                                  |
+| parallaxScrollingOffset | false    | 100     | number                                      | When use 'default' Layout props,this prop can be control prev/next item offset |
+| parallaxScrollingScale  | false    | 0.8     | number                                      | When use 'default' Layout props,this prop can be control prev/next item scale  |
+| onPressItem             | false    |         | (data: any, index: number) => void          | Press item callback                                                            |
+| style                   | false    | {}      | ViewStyle                                   | Carousel container style                                                       |
+| height                  | false    | '100%'  | undefined \| string \| number               | Specified carousel container height                                            |
+
 ## Contributing
 
 See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

diff --git a/assets/example-01.gif b/assets/example-01.gif
diff --git a/babel.config.js b/babel.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
+    presets: ['module:metro-react-native-babel-preset'],
 };
diff --git a/example/babel.config.js b/example/babel.config.js
@@ -2,21 +2,22 @@ const path = require('path');
 const pak = require('../package.json');
 
 module.exports = function (api) {
-  api.cache(true);
+    api.cache(true);
 
-  return {
-    presets: ['babel-preset-expo'],
-    plugins: [
-      [
-        'module-resolver',
-        {
-          extensions: ['.tsx', '.ts', '.js', '.json'],
-          alias: {
-            // For development, we want to alias the library to the source
-            [pak.name]: path.join(__dirname, '..', pak.source),
-          },
-        },
-      ],
-    ],
-  };
+    return {
+        presets: ['babel-preset-expo'],
+        plugins: [
+            [
+                'module-resolver',
+                {
+                    extensions: ['.tsx', '.ts', '.js', '.json'],
+                    alias: {
+                        // For development, we want to alias the library to the source
+                        [pak.name]: path.join(__dirname, '..', pak.source),
+                    },
+                },
+            ],
+            'react-native-reanimated/plugin',
+        ],
+    };
 };
diff --git a/example/package.json b/example/package.json
@@ -25,6 +25,8 @@
     "@babel/runtime": "^7.9.6",
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-preset-expo": "8.3.0",
-    "expo-cli": "^4.0.13"
+    "expo-cli": "^4.0.13",
+    "react-native-gesture-handler": "^1.10.3",
+    "react-native-reanimated": "^2.2.0"
   }
 }
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,31 +1,55 @@
+/* eslint-disable react-native/no-inline-styles */
 import * as React from 'react';
+import { Button, Dimensions, View } from 'react-native';
+import { ICarouselInstance } from '../../src/Carousel';
 
-import { StyleSheet, View, Text } from 'react-native';
-import ReanimatedCarousel from 'react-native-reanimated-carousel';
+import Carousel from '../../src/index';
 
-export default function App() {
-  const [result, setResult] = React.useState<number | undefined>();
-
-  React.useEffect(() => {
-    ReanimatedCarousel.multiply(3, 7).then(setResult);
-  }, []);
+const { width } = Dimensions.get('window');
 
-  return (
-    <View style={styles.container}>
-      <Text>Result: {result}</Text>
-    </View>
-  );
+export default function App() {
+    const r = React.useRef<ICarouselInstance | null>(null);
+    return (
+        <View
+            style={{
+                flex: 1,
+                alignItems: 'center',
+                backgroundColor: 'black',
+            }}
+        >
+            <View style={{ height: 300 }}>
+                <Carousel<{ color: string }>
+                    width={width}
+                    data={[
+                        { color: 'red' },
+                        { color: 'purple' },
+                        { color: 'yellow' },
+                    ]}
+                    renderItem={({ color }) => {
+                        return (
+                            <View
+                                style={{
+                                    backgroundColor: color,
+                                    justifyContent: 'center',
+                                    flex: 1,
+                                }}
+                            />
+                        );
+                    }}
+                />
+            </View>
+            <Button
+                title="pre"
+                onPress={() => {
+                    r.current.prev();
+                }}
+            />
+            <Button
+                title="next"
+                onPress={() => {
+                    r.current.next();
+                }}
+            />
+        </View>
+    );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  box: {
-    width: 60,
-    height: 60,
-    marginVertical: 20,
-  },
-});
diff --git a/example/tsconfig.json b/example/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "jsx": "react-native",
+    "target": "esnext",
+    "lib": [
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node"
+  }
+}