Merge pull request #80 from dohooo/fix/issue_79

refactor: refactor useAutoPlay hooks

Author: dohooo

example/src/components/SBImageItem.tsx

@@ -2,13 +2,16 @@ import React from 'react';
 import { StyleSheet, View, Image, ActivityIndicator } from 'react-native';
 
 const ISBImageItem: React.FC = () => {
+    const uri = React.useRef(
+        `https://picsum.photos/400/300?t=${new Date().getTime()}`
+    );
     return (
         <View style={styles.container}>
             <ActivityIndicator size="small" />
             <Image
                 style={styles.image}
                 source={{
-                    uri: `https://picsum.photos/800/600?t=${new Date().getTime()}`,
+                    uri: uri.current,
                 }}
             />
         </View>

example/src/normal/index.tsx

@@ -11,6 +11,7 @@ const PAGE_WIDTH = window.width;
 function Index() {
     const [isVertical, setIsVertical] = React.useState(false);
     const [isFast, setIsFast] = React.useState(false);
+    const [isAutoPlay, setIsAutoPlay] = React.useState(false);
 
     const baseOptions = isVertical
         ? ({
@@ -29,7 +30,7 @@ function Index() {
             <Carousel
                 {...baseOptions}
                 loop
-                autoPlay
+                autoPlay={isAutoPlay}
                 autoPlayInterval={isFast ? 100 : 1500}
                 data={[...new Array(6).keys()]}
                 renderItem={() => <SBImageItem />}
@@ -48,6 +49,13 @@ function Index() {
             >
                 {isFast ? 'NORMAL' : 'FAST'}
             </SButton>
+            <SButton
+                onPress={() => {
+                    setIsAutoPlay(!isAutoPlay);
+                }}
+            >
+                AutoPlay:{`${isAutoPlay}`}
+            </SButton>
         </View>
     );
 }

src/Carousel.tsx

@@ -124,19 +124,19 @@ function Carousel<T>(
     }, [onScrollBegin]);
 
     const scrollViewGestureOnScrollBegin = React.useCallback(() => {
-        pause();
+        !autoPlay && pause();
         _onScrollBegin();
-    }, [_onScrollBegin, pause]);
+    }, [_onScrollBegin, pause, autoPlay]);
 
     const _onScrollEnd = React.useCallback(() => {
         computedIndex();
         onScrollEnd?.(sharedPreIndex.current, sharedIndex.current);
     }, [sharedPreIndex, sharedIndex, computedIndex, onScrollEnd]);
 
     const scrollViewGestureOnScrollEnd = React.useCallback(() => {
-        run();
+        autoPlay && run();
         _onScrollEnd();
-    }, [_onScrollEnd, run]);
+    }, [_onScrollEnd, run, autoPlay]);
 
     const offsetX = useDerivedValue(() => {
         const totalSize = size * data.length;

src/hooks/useAutoPlay.ts

@@ -16,26 +16,29 @@ export function useAutoPlay(opts: {
 
     const timer = React.useRef<NodeJS.Timer>();
 
-    const run = React.useCallback(() => {
-        if (autoPlay) {
-            timer.current = setInterval(() => {
-                autoPlayReverse
-                    ? carouselController.prev()
-                    : carouselController.next();
-            }, autoPlayInterval);
-        }
-    }, [autoPlay, autoPlayReverse, carouselController, autoPlayInterval]);
-
     const pause = React.useCallback(() => {
         timer.current && clearInterval(timer.current);
     }, []);
 
+    const run = React.useCallback(() => {
+        if (timer.current) {
+            pause();
+        }
+        timer.current = setInterval(() => {
+            autoPlayReverse
+                ? carouselController.prev()
+                : carouselController.next();
+        }, autoPlayInterval);
+    }, [autoPlayReverse, carouselController, autoPlayInterval, pause]);
+
     React.useEffect(() => {
-        run();
-        return () => {
-            !!timer.current && clearInterval(timer.current);
-        };
-    }, [run, timer]);
+        if (autoPlay) {
+            run();
+        } else {
+            pause();
+        }
+        return pause;
+    }, [run, pause, autoPlay]);
 
     return {
         run,