fix: bottom sheet android content issues (#3340)

## 🎯 Goal

I unfortunately noticed today that there was a serious concurrency issue
introduced on Android with [this
PR](#3339),
where the bottom sheet content would simply not load 90% of the time.

The issue was that the animation got cancelled in-flight and so the
animation callback of `withTiming` fired with `finished: false` every
time, causing the content to never really be shown. These changes should
address that now.

I also introduced optionality for the lazy loading so that the sheet can
properly be reused in the future.

## 🛠 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

examples/SampleApp/src/screens/ThreadScreen.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import {
   Channel,

package/src/components/MessageMenu/MessageReactionPicker.tsx

@@ -155,7 +155,7 @@ export const MessageReactionPicker = (props: MessageReactionPickerProps) => {
         renderItem={renderItem}
       />
       {emojiViewerOpened ? (
-        <BottomSheetModal height={300} onClose={closeModal} visible={true}>
+        <BottomSheetModal height={300} lazy={true} onClose={closeModal} visible={true}>
           <FlatList
             columnWrapperStyle={styles.bottomSheetColumnWrapper}
             contentContainerStyle={styles.bottomSheetContentContainer}

package/src/components/UIComponents/BottomSheetModal.tsx

@@ -26,14 +26,31 @@ import { useStableCallback } from '../../hooks';
 import { KeyboardControllerPackage } from '../KeyboardCompatibleView/KeyboardControllerAvoidingView';
 
 export type BottomSheetModalProps = {
+  /**
+   * Function to call when the modal is closed.
+   * @returns void
+   */
   onClose: () => void;
+  /**
+   * Whether the modal is visible.
+   */
   visible: boolean;
+  /**
+   * The height of the modal.
+   */
   height?: number;
+  /**
+   * Whether the sheet content should be lazy loaded or not. Particularly
+   * useful when the content is something heavy and we don't want to disrupt
+   * the animations while this is happening.
+   */
+  lazy?: boolean;
 };
 
+// TODO: V9: Animate the backdrop as well.
 export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>) => {
   const { height: windowHeight, width: windowWidth } = useWindowDimensions();
-  const { children, height = windowHeight / 2, onClose, visible } = props;
+  const { children, height = windowHeight / 2, onClose, visible, lazy = false } = props;
 
   const {
     theme: {
@@ -44,81 +61,119 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
 
   const translateY = useSharedValue(height);
   const keyboardOffset = useSharedValue(0);
+
   const isOpen = useSharedValue(false);
+  const isOpening = useSharedValue(false);
 
   const panStartY = useSharedValue(0);
 
-  const [renderContent, setRenderContent] = useState(false);
+  const [renderContent, setRenderContent] = useState(!lazy);
+
+  const showContent = useStableCallback(() => {
+    if (lazy) {
+      setRenderContent(true);
+    }
+  });
+
+  const hideContent = useStableCallback(() => {
+    if (lazy) {
+      setRenderContent(false);
+    }
+  });
 
   const close = useStableCallback(() => {
-    // close always goes fully off-screen and only then notifies JS
-    setRenderContent(false);
+    // hide content immediately
+    hideContent();
 
     isOpen.value = false;
+    isOpening.value = false;
+
     cancelAnimation(translateY);
-    translateY.value = withTiming(height, { duration: 200 }, (finished) => {
-      if (finished) runOnJS(onClose)();
-    });
+
+    translateY.value = withTiming(
+      height,
+      { duration: 180, easing: Easing.out(Easing.cubic) },
+      (finished) => {
+        if (finished) runOnJS(onClose)();
+      },
+    );
   });
 
-  // Open animation: keep it simple (setting shared values from JS still runs on UI)
+  // modal opening layout effect - we make sure to only show the content
+  // after the animation has finished if `lazy` has been set to true
   useLayoutEffect(() => {
     if (!visible) return;
 
     isOpen.value = true;
-    keyboardOffset.value = 0;
+    isOpening.value = true;
 
-    // clean up any leftover animations
     cancelAnimation(translateY);
-    // kick animation on UI thread so JS congestion can't delay the start; only render content
-    // once the animation finishes
+
+    // start from closed
     translateY.value = height;
 
+    // Snapshot current keyboard offset as the open target.
+    // If keyboard changes during opening, we’ll adjust after.
+    const initialTarget = keyboardOffset.value;
+
     translateY.value = withTiming(
-      keyboardOffset.value,
-      { duration: 200, easing: Easing.inOut(Easing.ease) },
+      initialTarget,
+      { duration: 220, easing: Easing.out(Easing.cubic) },
       (finished) => {
-        if (finished) runOnJS(setRenderContent)(true);
+        if (!finished) return;
+
+        // opening the modal has now truly finished
+        isOpening.value = false;
+
+        // reveal the content if we want to load it lazily
+        runOnJS(showContent)();
+
+        // if keyboard offset changed while we were opening, we do a
+        // follow-up adjustment (we do not gate the content however)
+        const latestTarget = keyboardOffset.value;
+        if (latestTarget !== initialTarget && isOpen.value) {
+          cancelAnimation(translateY);
+          translateY.value = withTiming(latestTarget, {
+            duration: 200,
+            easing: Easing.inOut(Easing.ease),
+          });
+        }
       },
     );
-  }, [visible, height, isOpen, keyboardOffset, translateY]);
+  }, [visible, height, hideContent, isOpen, isOpening, keyboardOffset, showContent, translateY]);
 
   // if `visible` gets hard changed, we force a cleanup
   useEffect(() => {
     if (visible) return;
 
-    setRenderContent(false);
-
     isOpen.value = false;
+    isOpening.value = false;
     keyboardOffset.value = 0;
 
     cancelAnimation(translateY);
     translateY.value = height;
-  }, [visible, height, isOpen, keyboardOffset, translateY]);
+  }, [visible, height, isOpen, isOpening, keyboardOffset, translateY]);
 
-  const keyboardDidShow = useStableCallback((event: KeyboardEvent) => {
+  const keyboardDidShowRN = useStableCallback((event: KeyboardEvent) => {
     const offset = -event.endCoordinates.height;
     keyboardOffset.value = offset;
 
-    if (isOpen.value) {
-      cancelAnimation(translateY);
-      translateY.value = withTiming(offset, {
-        duration: 250,
-        easing: Easing.inOut(Easing.ease),
-      });
-    }
+    // We just record the offset, but we avoid cancelling the animation
+    // if it's in the process of opening. The same logic applies to all
+    // other keyboard related callbacks in this specific conditional.
+    if (!isOpen.value || isOpening.value) return;
+
+    cancelAnimation(translateY);
+    translateY.value = withTiming(offset, { duration: 250, easing: Easing.inOut(Easing.ease) });
   });
 
   const keyboardDidHide = useStableCallback(() => {
     keyboardOffset.value = 0;
 
-    if (isOpen.value) {
-      cancelAnimation(translateY);
-      translateY.value = withTiming(0, {
-        duration: 250,
-        easing: Easing.inOut(Easing.ease),
-      });
-    }
+    if (!isOpen.value || isOpening.value) return;
+
+    cancelAnimation(translateY);
+    translateY.value = withTiming(0, { duration: 250, easing: Easing.inOut(Easing.ease) });
   });
 
   useEffect(() => {
@@ -127,31 +182,27 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
     const listeners: EventSubscription[] = [];
 
     if (KeyboardControllerPackage?.KeyboardEvents) {
-      const keyboardDidShow = (event: KeyboardEventData) => {
+      const keyboardDidShowKC = (event: KeyboardEventData) => {
         const offset = -event.height;
         keyboardOffset.value = offset;
 
-        if (isOpen.value) {
-          cancelAnimation(translateY);
-          translateY.value = withTiming(offset, {
-            duration: 250,
-            easing: Easing.inOut(Easing.ease),
-          });
-        }
+        if (!isOpen.value || isOpening.value) return;
+
+        cancelAnimation(translateY);
+        translateY.value = withTiming(offset, { duration: 250, easing: Easing.inOut(Easing.ease) });
       };
 
       listeners.push(
-        KeyboardControllerPackage.KeyboardEvents.addListener('keyboardDidShow', keyboardDidShow),
+        KeyboardControllerPackage.KeyboardEvents.addListener('keyboardDidShow', keyboardDidShowKC),
         KeyboardControllerPackage.KeyboardEvents.addListener('keyboardDidHide', keyboardDidHide),
       );
     } else {
-      listeners.push(Keyboard.addListener('keyboardDidShow', keyboardDidShow));
+      listeners.push(Keyboard.addListener('keyboardDidShow', keyboardDidShowRN));
       listeners.push(Keyboard.addListener('keyboardDidHide', keyboardDidHide));
     }
-    return () => {
-      listeners.forEach((listener) => listener.remove());
-    };
-  }, [visible, keyboardDidHide, keyboardDidShow, keyboardOffset, isOpen, translateY]);
+
+    return () => listeners.forEach((l) => l.remove());
+  }, [visible, keyboardDidHide, keyboardDidShowRN, keyboardOffset, isOpen, isOpening, translateY]);
 
   const sheetAnimatedStyle = useAnimatedStyle(() => ({
     transform: [{ translateY: translateY.value }],
@@ -160,13 +211,16 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
   const gesture = useMemo(
     () =>
       Gesture.Pan()
+        // disable pan until content is rendered (prevents canceling the opening timing).
+        .enabled(renderContent)
         .onBegin(() => {
           cancelAnimation(translateY);
           panStartY.value = translateY.value;
         })
         .onUpdate((event) => {
           const minY = keyboardOffset.value;
-          translateY.value = Math.max(panStartY.value + event.translationY, minY);
+          const next = panStartY.value + event.translationY;
+          translateY.value = Math.max(next, minY);
         })
         .onEnd((event) => {
           const openY = keyboardOffset.value;
@@ -177,9 +231,15 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
 
           if (shouldClose) {
             isOpen.value = false;
-            translateY.value = withTiming(height, { duration: 100 }, (finished) => {
-              if (finished) runOnJS(onClose)();
-            });
+            isOpening.value = false;
+
+            translateY.value = withTiming(
+              height,
+              { duration: 140, easing: Easing.out(Easing.cubic) },
+              (finished) => {
+                if (finished) runOnJS(onClose)();
+              },
+            );
           } else {
             isOpen.value = true;
             translateY.value = withTiming(openY, {
@@ -188,13 +248,13 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
             });
           }
         }),
-    [height, isOpen, keyboardOffset, onClose, panStartY, translateY],
+    [height, isOpen, isOpening, keyboardOffset, onClose, panStartY, renderContent, translateY],
   );
 
   return (
     <View style={[styles.wrapper, wrapper]}>
       <Modal onRequestClose={onClose} transparent visible={visible}>
-        <GestureHandlerRootView style={{ flex: 1 }}>
+        <GestureHandlerRootView style={styles.sheetContentContainer}>
           <GestureDetector gesture={gesture}>
             <View style={[styles.overlay, { backgroundColor: overlay }, overlayTheme]}>
               <TouchableWithoutFeedback onPress={close}>
@@ -214,7 +274,10 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
                 />
                 <View style={[styles.contentContainer, contentContainer]}>
                   {renderContent ? (
-                    <Animated.View entering={FadeIn.duration(300)} style={{ flex: 1 }}>
+                    <Animated.View
+                      entering={FadeIn.duration(250)}
+                      style={styles.sheetContentContainer}
+                    >
                       {children}
                     </Animated.View>
                   ) : null}
@@ -247,6 +310,9 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'flex-end',
   },
+  sheetContentContainer: {
+    flex: 1,
+  },
   wrapper: {
     alignItems: 'center',
     flex: 1,