fix: can't override the carousel styles. e.g. "overflow: visible;"

fix #260
dohooo · Sep 27, 2022 · 2ab0bff · 2ab0bff
1 parent 3b03c5c
commit 2ab0bff
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 64 deletions.
diff --git a/src/Carousel.tsx b/src/Carousel.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Animated, { runOnJS, useDerivedValue } from 'react-native-reanimated';
+import { runOnJS, useDerivedValue } from 'react-native-reanimated';
 
 import { useCarouselController } from './hooks/useCarouselController';
 import { useAutoPlay } from './hooks/useAutoPlay';
@@ -8,7 +8,7 @@ import { ScrollViewGesture } from './ScrollViewGesture';
 import { useVisibleRanges } from './hooks/useVisibleRanges';
 
 import type { ICarouselInstance, TCarouselProps } from './types';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { BaseLayout } from './layouts/BaseLayout';
 import { useLayoutConfig } from './hooks/useLayoutConfig';
 import { useInitProps } from './hooks/useInitProps';
@@ -198,40 +198,29 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
 
         return (
             <CTX.Provider value={{ props, common: commonVariables }}>
-                <View
+                <ScrollViewGesture
+                    key={mode}
+                    size={size}
+                    translation={handlerOffsetX}
                     style={[
                         styles.container,
-                        { width: width || '100%', height: height || '100%' },
+                        {
+                            width: width || '100%',
+                            height: height || '100%',
+                        },
                         style,
+                        vertical
+                            ? styles.itemsVertical
+                            : styles.itemsHorizontal,
                     ]}
                     testID={testID}
+                    onScrollBegin={scrollViewGestureOnScrollBegin}
+                    onScrollEnd={scrollViewGestureOnScrollEnd}
+                    onTouchBegin={scrollViewGestureOnTouchBegin}
+                    onTouchEnd={scrollViewGestureOnTouchEnd}
                 >
-                    <ScrollViewGesture
-                        size={size}
-                        translation={handlerOffsetX}
-                        onScrollBegin={scrollViewGestureOnScrollBegin}
-                        onScrollEnd={scrollViewGestureOnScrollEnd}
-                        onTouchBegin={scrollViewGestureOnTouchBegin}
-                        onTouchEnd={scrollViewGestureOnTouchEnd}
-                    >
-                        <Animated.View
-                            key={mode}
-                            style={[
-                                styles.container,
-                                {
-                                    width: width || '100%',
-                                    height: height || '100%',
-                                },
-                                style,
-                                vertical
-                                    ? styles.itemsVertical
-                                    : styles.itemsHorizontal,
-                            ]}
-                        >
-                            {data.map(renderLayout)}
-                        </Animated.View>
-                    </ScrollViewGesture>
-                </View>
+                    {data.map(renderLayout)}
+                </ScrollViewGesture>
             </CTX.Provider>
         );
     }

diff --git a/src/ScrollViewGesture.tsx b/src/ScrollViewGesture.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 import {
     PanGestureHandler,
     PanGestureHandlerGestureEvent,
@@ -27,11 +27,12 @@ type GestureContext = {
 interface Props {
     size: number;
     infinite?: boolean;
+    testID?: string;
+    style?: StyleProp<ViewStyle>;
     onScrollBegin?: () => void;
     onScrollEnd?: () => void;
     onTouchBegin?: () => void;
     onTouchEnd?: () => void;
-    style?: StyleProp<ViewStyle>;
     translation: Animated.SharedValue<number>;
 }
 
@@ -51,8 +52,10 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
     } = React.useContext(CTX);
 
     const {
-        translation,
         size,
+        translation,
+        testID,
+        style = {},
         onScrollBegin,
         onScrollEnd,
         onTouchBegin,
@@ -269,42 +272,22 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
         ]
     );
 
-    const directionStyle = React.useMemo(() => {
-        return vertical ? styles.contentHorizontal : styles.contentVertical;
-    }, [vertical]);
-
     return (
-        <Animated.View
-            style={[
-                styles.container,
-                directionStyle,
-                { width: '100%', height: '100%' },
-            ]}
-            onTouchStart={onTouchBegin}
-            onTouchEnd={onTouchEnd}
+        <PanGestureHandler
+            {...panGestureHandlerProps}
+            enabled={enabled}
+            onGestureEvent={panGestureEventHandler}
         >
-            <PanGestureHandler
-                {...panGestureHandlerProps}
-                enabled={enabled}
-                onGestureEvent={panGestureEventHandler}
+            <Animated.View
+                testID={testID}
+                style={style}
+                onTouchStart={onTouchBegin}
+                onTouchEnd={onTouchEnd}
             >
                 {props.children}
-            </PanGestureHandler>
-        </Animated.View>
+            </Animated.View>
+        </PanGestureHandler>
     );
 };
 
 export const ScrollViewGesture = IScrollViewGesture;
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        overflow: 'hidden',
-    },
-    contentVertical: {
-        flexDirection: 'column',
-    },
-    contentHorizontal: {
-        flexDirection: 'row',
-    },
-});