fix: merge conflicts and FLashList api

Author: isekovanic

package/src/components/Message/Message.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   GestureResponderEvent,
-  Keyboard,
   StatusBar,
   StyleProp,
   useWindowDimensions,

package/src/components/MessageList/MessageFlashList.tsx

@@ -316,6 +316,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
   const [scrollToBottomButtonVisible, setScrollToBottomButtonVisible] = useState(false);
   const [isUnreadNotificationOpen, setIsUnreadNotificationOpen] = useState<boolean>(false);
   const [stickyHeaderDate, setStickyHeaderDate] = useState<Date | undefined>();
+  const [scrollEnabled, setScrollEnabled] = useState<boolean>(true);
 
   const stickyHeaderDateRef = useRef<Date | undefined>(undefined);
   /**
@@ -717,20 +718,28 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     [],
   );
 
+  const setNativeScrollability = useStableCallback((value: boolean) => {
+    // FlashList does not have setNativeProps exposed, hence we cannot use that.
+    // Instead, we resort to state.
+    setScrollEnabled(value);
+  });
+
   const messageListItemContextValue: MessageListItemContextValue = useMemo(
     () => ({
       goToMessage,
       messageListPreviousAndNextMessageStore,
       modifiedTheme,
       noGroupByUser,
       onThreadSelect,
+      setNativeScrollability,
     }),
     [
       goToMessage,
       messageListPreviousAndNextMessageStore,
       modifiedTheme,
       noGroupByUser,
       onThreadSelect,
+      setNativeScrollability,
     ],
   );
 
@@ -1083,6 +1092,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
             onViewableItemsChanged={stableOnViewableItemsChanged}
             ref={refCallback}
             renderItem={renderItem}
+            scrollEnabled={scrollEnabled}
             scrollEventThrottle={isLiveStreaming ? 16 : undefined}
             showsVerticalScrollIndicator={false}
             style={flatListStyle}

package/src/components/UIComponents/BottomSheetModal.tsx

@@ -9,13 +9,8 @@ import {
   useWindowDimensions,
   View,
 } from 'react-native';
-import {
-  Gesture,
-  GestureDetector,
-  GestureHandlerRootView,
-  GestureUpdateEvent,
-  PanGestureHandlerEventPayload,
-} from 'react-native-gesture-handler';
+import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
+import type { KeyboardEventData } from 'react-native-keyboard-controller';
 import Animated, {
   cancelAnimation,
   Easing,
@@ -26,11 +21,9 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
-import type { KeyboardEventData } from 'react-native-keyboard-controller';
-
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { KeyboardControllerPackage } from '../KeyboardCompatibleView/KeyboardControllerAvoidingView';
 import { useStableCallback } from '../../hooks';
+import { KeyboardControllerPackage } from '../KeyboardCompatibleView/KeyboardControllerAvoidingView';
 
 export type BottomSheetModalProps = {
   onClose: () => void;