fix: scroll view bug for react native gesture handler

Author: AsteriskZuo

docs/v3/cn/qa.md

@@ -17,6 +17,7 @@
       - [expo-updates 的问题](#expo-updates-的问题)
       - [创建 expo 项目 集成 uikit 问题](#创建-expo-项目-集成-uikit-问题)
       - [flipper compilation problem](#flipper-compilation-problem)
+      - [ScrollView from react-native-gesture-handler](#scrollview-from-react-native-gesture-handler)
 
 # 问题列表
 
@@ -116,3 +117,7 @@ Showing Recent Errors Only
 The easiest way is to add the header file `#include <functional>` in `FlipperTransportTypes.h`
 
 Reference: [Debugging React Native apps with Flipper is deprecated in React Native 0.73. We will eventually remove out-of-the box support for JS debugging via Flipper.](https://reactnative.dev/docs/debugging)
+
+#### ScrollView from react-native-gesture-handler
+
+ERROR Error: NativeViewGestureHandler must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/react-native-gesture-handler/docs/installation for more details.

docs/v3/en/qa.en.md

@@ -16,6 +16,7 @@
       - [Issues with `expo-updates`](#issues-with-expo-updates)
       - [Create expo project and integrate uikit problem](#create-expo-project-and-integrate-uikit-problem)
       - [flipper compile question](#flipper-compile-question)
+      - [ScrollView from react-native-gesture-handler](#scrollview-from-react-native-gesture-handler)
 
 # Question List
 
@@ -113,3 +114,7 @@ In macOS 14.6.1 with Xcode 15.4, compiling react-native 0.71.11 with flipper 0.1
 The simplest solution is to add the header file #include <functional> in FlipperTransportTypes.h.
 
 Reference: Debugging React Native apps with Flipper is deprecated in React Native 0.73. We will eventually remove out-of-the box support for JS debugging via Flipper.
+
+#### ScrollView from react-native-gesture-handler
+
+ERROR Error: NativeViewGestureHandler must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/react-native-gesture-handler/docs/installation for more details.

packages/react-native-chat-uikit/src/container/Container.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
 import DeviceInfo from 'react-native-device-info';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import { ChatContextProvider } from '../chat';
@@ -180,7 +181,11 @@ export function Container(props: ContainerProps) {
                   <SimpleToastContextProvider>
                     <ToastViewContextProvider>
                       <AlertContextProvider>
-                        <SafeAreaProvider>{children}</SafeAreaProvider>
+                        <SafeAreaProvider>
+                          <GestureHandlerRootView>
+                            {children}
+                          </GestureHandlerRootView>
+                        </SafeAreaProvider>
                       </AlertContextProvider>
                     </ToastViewContextProvider>
                   </SimpleToastContextProvider>