Carousel inside a vertical scrollview was laggy and buggy, but no more after I did this using patch-pacakage

[mufaddalhamidofficial]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-reanimated-carousel@3.5.1 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-reanimated-carousel/src/Carousel.tsx b/node_modules/react-native-reanimated-carousel/src/Carousel.tsx
index 980baac..c0c883e 100644
--- a/node_modules/react-native-reanimated-carousel/src/Carousel.tsx
+++ b/node_modules/react-native-reanimated-carousel/src/Carousel.tsx
@@ -202,33 +202,31 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
     );

     return (
-      <GestureHandlerRootView>
-        <CTX.Provider value={{ props, common: commonVariables }}>
-          <ScrollViewGesture
-            key={mode}
-            size={size}
-            translation={handlerOffset}
-            style={[
-              styles.container,
-              {
-                width: width || "100%",
-                height: height || "100%",
-              },
-              style,
-              vertical
-                ? styles.itemsVertical
-                : styles.itemsHorizontal,
-            ]}
-            testID={testID}
-            onScrollBegin={scrollViewGestureOnScrollBegin}
-            onScrollEnd={scrollViewGestureOnScrollEnd}
-            onTouchBegin={scrollViewGestureOnTouchBegin}
-            onTouchEnd={scrollViewGestureOnTouchEnd}
-          >
-            {data.map(renderLayout)}
-          </ScrollViewGesture>
-        </CTX.Provider>
-      </GestureHandlerRootView>
+      <CTX.Provider value={{ props, common: commonVariables }}>
+        <ScrollViewGesture
+          key={mode}
+          size={size}
+          translation={handlerOffset}
+          style={[
+            styles.container,
+            {
+              width: width || "100%",
+              height: height || "100%",
+            },
+            style,
+            vertical
+              ? styles.itemsVertical
+              : styles.itemsHorizontal,
+          ]}
+          testID={testID}
+          onScrollBegin={scrollViewGestureOnScrollBegin}
+          onScrollEnd={scrollViewGestureOnScrollEnd}
+          onTouchBegin={scrollViewGestureOnTouchBegin}
+          onTouchEnd={scrollViewGestureOnTouchEnd}
+        >
+          {data.map(renderLayout)}
+        </ScrollViewGesture>
+      </CTX.Provider>
     );
   },
 );

This issue body was partially generated by patch-package.

[dosubot[bot]]

@mufaddalhamidofficial Hello! 👋 I'm here to help you with any questions or issues you have while waiting for a human maintainer. Let's work together to solve the problem!

It looks like you've removed the GestureHandlerRootView wrapper from the Carousel component, which helped resolve the laggy and buggy behavior when used inside a vertical ScrollView. This change aligns with some common solutions for similar issues.

Here are some related discussions and solutions:

1. Horizontal Carousel scrolling conflicts with vertical ScrollView scrolling: Adjusting panGestureHandlerProps to manage gesture conflicts ^[1].

2. Carousel in ScrollView layout: Wrapping the entire layout with GestureHandlerRootView was suggested, but your solution seems to work without it ^[2].

Your approach might be beneficial for others facing similar issues, especially if the GestureHandlerRootView is causing conflicts in specific setups.

To continue talking to Dosu, mention @dosu.