feat: add examples

README.md

@@ -11,7 +11,10 @@ English | [简体中文](./README.zh-CN.md)
 [![github closed issues](https://img.shields.io/github/issues-closed/dohooo/react-native-reanimated-carousel.svg?style=flat-square&colorB=44cc11)](https://github.com/dohooo/react-native-reanimated-carousel/issues?q=is%3Aissue+is%3Aclosed)
 
 <p align="center">
-  <img src="assets/normal.gif" width="300"/>  
+  <img src="assets/normal-horizontal.gif" width="300"/>  
+  <img src="assets/normal-vertical.gif" width="300"/>  
+  <img src="assets/parallax-horizontal.gif" width="300"/>  
+  <img src="assets/parallax-vertical.gif" width="300"/>  
 </p>
 
 <br/>
@@ -32,10 +35,10 @@ English | [简体中文](./README.zh-CN.md)
 </p>
 
 <p align="center">
-  Compared with react-native-reanimated-carousel,The actual test was ten slides per second, but it didn't show up very well in gif.（gif 83mb）
+  Compared with react-native-reanimated-carousel,The actual test was ten slides per second, but it didn't show up very well in gif.
 </p>
 <p align="center">
-  <img src="assets/fast.gif" width="50%"/>
+  <img src="assets/normal-fast.gif" width="50%"/>
 </p>
 </details>
 

README.zh-CN.md

@@ -11,7 +11,10 @@
 [![github closed issues](https://img.shields.io/github/issues-closed/dohooo/react-native-reanimated-carousel.svg?style=flat-square&colorB=44cc11)](https://github.com/dohooo/react-native-reanimated-carousel/issues?q=is%3Aissue+is%3Aclosed)
 
 <p align="center">
-  <img src="assets/normal.gif" width="300"/>  
+  <img src="assets/normal-horizontal.gif" width="300"/>  
+  <img src="assets/normal-vertical.gif" width="300"/>  
+  <img src="assets/parallax-horizontal.gif" width="300"/>  
+  <img src="assets/parallax-vertical.gif" width="300"/>  
 </p>
 
 <br/>
@@ -32,10 +35,10 @@
 </p>
 
 <p align="center">
-  使用react-native-reanimated-carousel对比,每秒滚动十张依然顺畅链接，无限滚动。这里使用了gif无法很清晰的看出。（gif 83mb）
+  使用react-native-reanimated-carousel对比,每秒滚动十张依然顺畅链接，无限滚动。这里使用了gif无法很清晰的看出。
 </p>
 <p align="center">
-  <img src="assets/fast.gif" width="50%"/>
+  <img src="assets/normal-fast.gif" width="50%"/>
 </p>
 </details>
 

example/src/components/SButton.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { View, Button, ButtonProps, Text } from 'react-native-ui-lib';
+
+export interface ISButtonProps {}
+
+const SButton: React.FC<ISButtonProps & ButtonProps> = (props) => {
+    return (
+        <View row centerH>
+            <Button {...props} marginT-20 backgroundColor="#26292E">
+                <Text color="white">{props.children}</Text>
+            </Button>
+        </View>
+    );
+};
+
+export default SButton;

example/src/home/index.tsx

@@ -23,7 +23,6 @@ const Index = () => {
                         key={index}
                         onPress={() => navigation.navigate(name)}
                         style={{
-                            // justifyContent: 'center',
                             alignItems: 'center',
                             borderColor: Colors.grey60,
                             borderBottomWidth: 1,

example/src/index.tsx

@@ -21,9 +21,8 @@ function App() {
                 initialRouteName="Home"
                 screenOptions={{
                     contentStyle: {
-                        backgroundColor: 'white',
                         flex: 1,
-                        alignItems: 'center',
+                        backgroundColor: 'white',
                         paddingTop: 100,
                     },
                 }}

example/src/normal/index.tsx

@@ -1,18 +1,35 @@
 import * as React from 'react';
-import { Dimensions, View } from 'react-native';
+import { Dimensions } from 'react-native';
+import { View } from 'react-native-ui-lib';
 import Carousel from '../../../src/index';
+import SButton from '../components/SButton';
 import { CAROUSEL_ITEMS } from '../contant';
 
 const window = Dimensions.get('window');
 const PAGE_WIDTH = window.width;
 
 function Index() {
+    const [isVertical, setIsVertical] = React.useState(false);
+
+    const baseOptions = isVertical
+        ? ({
+              vertical: true,
+              width: PAGE_WIDTH,
+              height: PAGE_WIDTH / 2,
+          } as const)
+        : ({
+              vertical: false,
+              width: PAGE_WIDTH,
+              height: PAGE_WIDTH / 2,
+          } as const);
+
     return (
-        <View style={{ width: PAGE_WIDTH, height: 240 }}>
+        <View style={{ flex: 1 }}>
             <Carousel
-                defaultIndex={0}
-                width={PAGE_WIDTH}
-                parallaxScrollingScale={0.8}
+                {...baseOptions}
+                loop
+                autoPlay
+                autoPlayInterval={1000}
                 data={CAROUSEL_ITEMS}
                 renderItem={(backgroundColor) => (
                     <View
@@ -25,6 +42,13 @@ function Index() {
                     />
                 )}
             />
+            <SButton
+                onPress={() => {
+                    setIsVertical(!isVertical);
+                }}
+            >
+                {isVertical ? 'Set horizontal' : 'Set Vertical'}
+            </SButton>
         </View>
     );
 }

example/src/parallax/index.tsx

@@ -8,12 +8,25 @@ import Animated, {
     useSharedValue,
 } from 'react-native-reanimated';
 import { CAROUSEL_ITEMS } from '../contant';
+import SButton from '../components/SButton';
 
 const window = Dimensions.get('window');
+const PAGE_WIDTH = window.width;
 
 function Index() {
+    const [isVertical, setIsVertical] = React.useState(false);
     const progressValue = useSharedValue<number>(0);
-
+    const baseOptions = isVertical
+        ? ({
+              vertical: true,
+              width: PAGE_WIDTH,
+              height: PAGE_WIDTH / 2,
+          } as const)
+        : ({
+              vertical: false,
+              width: PAGE_WIDTH,
+              height: PAGE_WIDTH / 2,
+          } as const);
     return (
         <View
             style={{
@@ -22,11 +35,14 @@ function Index() {
             }}
         >
             <Carousel
-                onProgressChange={(_, absoluteProgress) => {
-                    progressValue.value = absoluteProgress;
-                }}
+                {...baseOptions}
+                loop
+                autoPlay
+                autoPlayInterval={1000}
+                onProgressChange={(_, absoluteProgress) =>
+                    (progressValue.value = absoluteProgress)
+                }
                 mode="parallax"
-                width={window.width}
                 parallaxScrollingScale={0.8}
                 data={CAROUSEL_ITEMS}
                 renderItem={(backgroundColor) => (
@@ -36,17 +52,24 @@ function Index() {
                             justifyContent: 'center',
                             alignItems: 'center',
                             backgroundColor,
+                            borderRadius: 10,
+                            shadowColor: 'black',
+                            shadowOpacity: 0.2,
+                            shadowRadius: 10,
                         }}
                     />
                 )}
             />
             {!!progressValue && (
                 <View
                     style={{
-                        flexDirection: 'row',
+                        flexDirection: isVertical ? 'column' : 'row',
                         justifyContent: 'space-between',
-                        width: 100,
+                        width: isVertical ? 10 : 100,
                         alignSelf: 'center',
+                        position: 'absolute',
+                        right: isVertical ? 10 : undefined,
+                        top: isVertical ? 40 : 185,
                     }}
                 >
                     {CAROUSEL_ITEMS.map((backgroundColor, index) => {
@@ -56,12 +79,20 @@ function Index() {
                                 animValue={progressValue}
                                 index={index}
                                 key={index}
+                                isRotate={isVertical}
                                 length={CAROUSEL_ITEMS.length}
                             />
                         );
                     })}
                 </View>
             )}
+            <SButton
+                onPress={() => {
+                    setIsVertical(!isVertical);
+                }}
+            >
+                {isVertical ? 'Set horizontal' : 'Set Vertical'}
+            </SButton>
         </View>
     );
 }
@@ -71,9 +102,10 @@ const PaginationItem: React.FC<{
     backgroundColor: string;
     length: number;
     animValue: Animated.SharedValue<number>;
+    isRotate?: boolean;
 }> = (props) => {
-    const { animValue, index, length, backgroundColor } = props;
-    const width = 20;
+    const { animValue, index, length, backgroundColor, isRotate } = props;
+    const width = 10;
 
     const animStyle = useAnimatedStyle(() => {
         let inputRange = [index - 1, index, index + 1];
@@ -105,11 +137,20 @@ const PaginationItem: React.FC<{
                 height: width,
                 borderRadius: 50,
                 overflow: 'hidden',
+                transform: [
+                    {
+                        rotateZ: isRotate ? '90deg' : '0deg',
+                    },
+                ],
             }}
         >
             <Animated.View
                 style={[
-                    { borderRadius: 50, backgroundColor, flex: 1 },
+                    {
+                        borderRadius: 50,
+                        backgroundColor,
+                        flex: 1,
+                    },
                     animStyle,
                 ]}
             />

src/Carousel.tsx

@@ -50,18 +50,17 @@ function Carousel<T>(
         panGestureHandlerProps,
     });
 
-    const width = props.vertical ? 0 : Math.round(props.width || 0);
-    const height = props.vertical ? Math.round(props.height || 0) : 0;
+    const width = Math.round(props.width || 0);
+    const height = Math.round(props.height || 0);
     const size = vertical ? height : width;
-
-    const layoutStyle = React.useMemo(() => {
-        return {
-            width: !vertical ? width : '100%',
-            height: vertical ? height : '100%',
-        };
-    }, [vertical, width, height]);
+    const layoutStyle = { width: width || '100%', height: height || '100%' };
     const defaultHandlerOffsetX = -Math.abs(defaultIndex * size);
     const handlerOffsetX = useSharedValue<number>(defaultHandlerOffsetX);
+
+    React.useEffect(() => {
+        handlerOffsetX.value = 0;
+    }, [vertical, handlerOffsetX]);
+
     const data = React.useMemo<T[]>(() => {
         if (!loop) return _data;
 

src/hooks/useOffsetX.ts

@@ -79,7 +79,7 @@ export const useOffsetX = (opts: IOpts, visibleRanges: IVisibleRanges) => {
         }
 
         return handlerOffsetX.value + size * index;
-    }, [loop, data, viewCount, type, visibleRanges]);
+    }, [loop, data, viewCount, type, size, visibleRanges]);
 
     return x;
 };

src/types.ts

@@ -11,6 +11,7 @@ interface IHorizontalModeProps {
      * Specified carousel container width.
      */
     width: number;
+    height?: number;
 }
 
 interface IVerticalModeProps {
@@ -23,6 +24,7 @@ interface IVerticalModeProps {
      * @default '100%'
      */
     height: number;
+    width?: number;
 }
 
 export type TCarouselProps<T = any> = {