fix: android attachment picker timing coordination (#3539)

## 🎯 Goal

This PR stabilizes attachment picker and keyboard behavior on both
Android and iOS by simplifying the picker open/close flow and removing
timing based workarounds.

The main changes are:

- removed the delayed keyboard close/open coordination path
- removed `forceClose()` and the extra delayed `close()` fallback
- kept picker state changes aligned with bottom sheet state
- added a small handoff lock to prevent rapid picker/keyboard toggles
from desynchronizing the composer and picker

Net result: picker/keyboard transitions are more reliable, the Android
flicker/stuck states are resolved, and rapid toggling no longer leaves
the composer and attachment picker out of sync.

This is now finally stable and correct on Android.

## 🛠 Implementation details

<!-- Provide a description of the implementation -->

## 🎨 UI Changes

<!-- Add relevant screenshots -->

<details>
<summary>iOS</summary>


<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>


<details>
<summary>Android</summary>

<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>

## 🧪 Testing

<!-- Explain how this change can be tested (or why it can't be tested)
-->

## ☑️ Checklist

- [ ] I have signed the [Stream
CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform)
(required)
- [ ] PR targets the `develop` branch
- [ ] Documentation is updated
- [ ] New code is tested in main example apps, including all possible
scenarios
  - [ ] SampleApp iOS and Android
  - [ ] Expo iOS and Android

Author: isekovanic

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -8,6 +8,8 @@ import {
   LayoutChangeEvent,
 } from 'react-native';
 
+import { runOnJS, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
+
 import { useBottomSheetSpringConfigs } from '@gorhom/bottom-sheet';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
@@ -119,15 +121,44 @@ export const AttachmentPicker = () => {
     [semantics.backgroundCoreElevation1],
   );
 
+  const animatedIndex = useSharedValue(currentIndex);
+
+  // This is required to prevent the attachment picker from getting out of sync
+  // with the rest of the state. While there are more prudent fixes, this is about
+  // as much as we can do now without refactoring the entire state layer for the
+  // picker. When we do that, this can be removed completely.
+  const reactToIndex = useStableCallback((index: number) => {
+    if (index === -1) {
+      attachmentPickerStore.setSelectedPicker(undefined);
+    }
+
+    if (index === 0) {
+      // TODO: Extend the store to at least accept a default value.
+      //       This in particular is not nice.
+      attachmentPickerStore.setSelectedPicker('images');
+    }
+  });
+
+  useAnimatedReaction(
+    () => animatedIndex.value,
+    (index, previousIndex) => {
+      if ((index === 0 || index === -1) && index !== previousIndex) {
+        runOnJS(reactToIndex)(index);
+      }
+    },
+  );
+
   return (
     <BottomSheet
+      android_keyboardInputMode='adjustResize'
       backgroundStyle={backgroundStyle}
       enablePanDownToClose={false}
       enableContentPanningGesture={false}
       enableDynamicSizing={false}
       handleComponent={RenderNull}
       index={currentIndex}
       onAnimate={setCurrentIndex}
+      animatedIndex={animatedIndex}
       // @ts-ignore
       ref={ref}
       snapPoints={snapPoints}

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -7,7 +7,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Alert, Linking, Platform, TextInput, TextInputProps } from 'react-native';
+import { Alert, Linking, TextInput, TextInputProps } from 'react-native';
 
 import { lookup as lookupMimeType } from 'mime-types';
 import {
@@ -540,19 +540,9 @@ export const MessageInputProvider = ({
    */
   const openAttachmentPicker = useCallback(() => {
     dismissKeyboard();
-    const run = () => {
-      attachmentPickerStore.setSelectedPicker('images');
-      openPicker();
-    };
-
-    if (Platform.OS === 'android') {
-      setTimeout(() => {
-        run();
-      }, 200);
-    } else {
-      run();
-    }
-  }, [openPicker, attachmentPickerStore]);
+    attachmentPickerStore.setSelectedPicker('images');
+    openPicker();
+  }, [attachmentPickerStore, openPicker]);
 
   /**
    * Function to close the attachment picker if the MediaLibrary is installed.

package/src/hooks/useAttachmentPickerBottomSheet.ts

@@ -1,36 +1,19 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useRef } from 'react';
 
 import BottomSheet from '@gorhom/bottom-sheet';
 import { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 
 /**
  * This hook is used to manage the state of the attachment picker bottom sheet.
  * It provides functions to open and close the bottom sheet, as well as a reference to the bottom sheet itself.
- * It also handles the cleanup of the timeout used to close the bottom sheet.
  * The bottom sheet is used to display the attachment picker UI.
  * The `openPicker` function opens the bottom sheet, and the `closePicker` function closes it.
  * The `bottomSheetRef` is a reference to the bottom sheet component, which allows for programmatic control of the bottom sheet.
- * The `bottomSheetCloseTimeoutRef` is used to store the timeout ID for the close operation, allowing for cleanup if necessary.
  */
 export const useAttachmentPickerBottomSheet = () => {
-  const bottomSheetCloseTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
   const bottomSheetRef = useRef<BottomSheet>(null);
 
-  useEffect(
-    () =>
-      // cleanup the timeout if the component unmounts
-      () => {
-        if (bottomSheetCloseTimeoutRef.current) {
-          clearTimeout(bottomSheetCloseTimeoutRef.current);
-        }
-      },
-    [],
-  );
-
   const openPicker = useCallback((ref: React.RefObject<BottomSheetMethods | null>) => {
-    if (bottomSheetCloseTimeoutRef.current) {
-      clearTimeout(bottomSheetCloseTimeoutRef.current);
-    }
     if (ref.current?.snapToIndex) {
       ref.current.snapToIndex(0);
     } else {
@@ -40,27 +23,11 @@ export const useAttachmentPickerBottomSheet = () => {
 
   const closePicker = useCallback((ref: React.RefObject<BottomSheetMethods | null>) => {
     if (ref.current?.close) {
-      if (bottomSheetCloseTimeoutRef.current) {
-        clearTimeout(bottomSheetCloseTimeoutRef.current);
-      }
       ref.current.close();
-      // Attempt to close the bottomsheet again to circumvent accidental opening on Android.
-      // Details: This to prevent a race condition where the close function is called during the point when a internal container layout happens within the bottomsheet due to keyboard affecting the layout
-      // If the container layout measures a shorter height than previous but if the close snapped to the previous height's position, the bottom sheet will show up
-      // this short delay ensures that close function is always called after a container layout due to keyboard change
-      // NOTE: this timeout has to be above 500 as the keyboardAnimationDuration is 500 in the bottomsheet library - see src/hooks/useKeyboard.ts there for more details
-      bottomSheetCloseTimeoutRef.current = setTimeout(() => {
-        ref.current?.close();
-      }, 600);
     }
   }, []);
 
-  useEffect(() => {
-    closePicker(bottomSheetRef);
-  }, [closePicker]);
-
   return {
-    bottomSheetCloseTimeoutRef,
     bottomSheetRef,
     closePicker,
     openPicker,

package/src/hooks/useKeyboardVisibility.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { EventSubscription, Keyboard } from 'react-native';
+import { EventSubscription, Keyboard, Platform } from 'react-native';
 
 import { KeyboardControllerPackage } from '../components/KeyboardCompatibleView/KeyboardControllerAvoidingView';
 
@@ -24,8 +24,16 @@ export const useKeyboardVisibility = () => {
         ),
       );
     } else {
-      listeners.push(Keyboard.addListener('keyboardWillShow', () => setIsKeyboardVisible(true)));
-      listeners.push(Keyboard.addListener('keyboardWillHide', () => setIsKeyboardVisible(false)));
+      listeners.push(
+        Keyboard.addListener(Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow', () =>
+          setIsKeyboardVisible(true),
+        ),
+      );
+      listeners.push(
+        Keyboard.addListener(Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide', () =>
+          setIsKeyboardVisible(false),
+        ),
+      );
     }
 
     return () => listeners.forEach((listener) => listener.remove());