fix: image flickers within Carousel when state is updated

fix #32
dohooo · Nov 27, 2021 · 094f3af · 094f3af
1 parent 0c93b86
commit 094f3af
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 59 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -27,6 +27,7 @@ const data: ImageSourcePropType[] = [
 export default function App() {
     const progressValue = useSharedValue<number>(0);
     const r = React.useRef<ICarouselInstance | null>(null);
+
     return (
         <View
             style={{
@@ -56,6 +57,26 @@ export default function App() {
                     )}
                 />
             </View>
+            <View
+                style={{
+                    marginTop: 24,
+                    flexDirection: 'row',
+                    justifyContent: 'space-evenly',
+                }}
+            >
+                <Button
+                    title="Prev"
+                    onPress={() => {
+                        r.current?.prev();
+                    }}
+                />
+                <Button
+                    title="Next"
+                    onPress={() => {
+                        r.current?.next();
+                    }}
+                />
+            </View>
             <View style={{ height: 240 }}>
                 <Carousel<ImageSourcePropType>
                     onProgressChange={(_, absoluteProgress) => {
@@ -98,16 +119,6 @@ export default function App() {
                         })}
                     </View>
                 )}
-                <View
-                    style={{
-                        marginTop: 24,
-                        flexDirection: 'row',
-                        justifyContent: 'space-evenly',
-                    }}
-                >
-                    <Button title="Prev" onPress={() => r.current?.prev()} />
-                    <Button title="Next" onPress={() => r.current?.next()} />
-                </View>
             </View>
         </View>
     );

diff --git a/src/Carousel.tsx b/src/Carousel.tsx
@@ -368,48 +368,52 @@ function Carousel<T extends unknown = any>(
         [getCurrentIndex, goToIndex, next, prev]
     );
 
-    const Layouts = React.useMemo<React.FC<{ index: number }>>(() => {
-        switch (mode) {
-            case 'parallax':
-                return ({ index: i, children }) => (
-                    <ParallaxLayout
-                        parallaxScrollingOffset={parallaxScrollingOffset}
-                        parallaxScrollingScale={parallaxScrollingScale}
-                        computedAnimResult={computedAnimResult}
-                        width={width}
-                        handlerOffsetX={offsetX}
-                        index={i}
-                        key={i}
-                        loop={loop}
-                    >
-                        {children}
-                    </ParallaxLayout>
-                );
-            default:
-                return ({ index: i, children }) => (
-                    <CarouselItem
-                        computedAnimResult={computedAnimResult}
-                        width={width}
-                        height={height}
-                        handlerOffsetX={offsetX}
-                        index={i}
-                        key={i}
-                        loop={loop}
-                    >
-                        {children}
-                    </CarouselItem>
-                );
-        }
-    }, [
-        loop,
-        mode,
-        computedAnimResult,
-        height,
-        offsetX,
-        parallaxScrollingOffset,
-        parallaxScrollingScale,
-        width,
-    ]);
+    const renderLayout = React.useCallback(
+        (item: T, i: number) => {
+            switch (mode) {
+                case 'parallax':
+                    return (
+                        <ParallaxLayout
+                            parallaxScrollingOffset={parallaxScrollingOffset}
+                            parallaxScrollingScale={parallaxScrollingScale}
+                            computedAnimResult={computedAnimResult}
+                            width={width}
+                            handlerOffsetX={offsetX}
+                            index={i}
+                            key={i}
+                            loop={loop}
+                        >
+                            {renderItem(item, i)}
+                        </ParallaxLayout>
+                    );
+                default:
+                    return (
+                        <CarouselItem
+                            computedAnimResult={computedAnimResult}
+                            width={width}
+                            height={height}
+                            handlerOffsetX={offsetX}
+                            index={i}
+                            key={i}
+                            loop={loop}
+                        >
+                            {renderItem(item, i)}
+                        </CarouselItem>
+                    );
+            }
+        },
+        [
+            loop,
+            mode,
+            computedAnimResult,
+            height,
+            offsetX,
+            parallaxScrollingOffset,
+            parallaxScrollingScale,
+            width,
+            renderItem,
+        ]
+    );
 
     return (
         <PanGestureHandler
@@ -426,13 +430,7 @@ function Carousel<T extends unknown = any>(
                     position: 'relative',
                 }}
             >
-                {data.map((item, i) => {
-                    return (
-                        <Layouts index={i} key={i}>
-                            {renderItem(item, i)}
-                        </Layouts>
-                    );
-                })}
+                {data.map(renderLayout)}
             </Animated.View>
         </PanGestureHandler>
     );