stream-chat-react-native-core 9.0.0-beta.9 → 9.0.0

package/src/contexts/overlayContext/MessageOverlayHostLayer.tsx

@@ -1,5 +1,14 @@
 import React, { useEffect, useMemo } from 'react';
-import { Platform, Pressable, StyleSheet, useWindowDimensions, View } from 'react-native';
+import {
+  I18nManager,
+  Platform,
+  Pressable,
+  StyleSheet,
+  StyleProp,
+  useWindowDimensions,
+  View,
+  ViewStyle,
+} from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
   clamp,
@@ -21,21 +30,22 @@ import {
   Rect,
   useOverlayController,
 } from '../../state-store';
+import { useComponentsContext } from '../componentsContext/ComponentsContext';
 import { useTheme } from '../themeContext/ThemeContext';
 
 const DURATION = 300;
 
-const DefaultMessageOverlayBackground = () => {
+export const DefaultMessageOverlayBackground = () => {
   const {
     theme: { semantics },
   } = useTheme();
 
   return (
-    <View pointerEvents='none' style={StyleSheet.absoluteFillObject}>
+    <View pointerEvents='none' style={StyleSheet.absoluteFill}>
       <View
         pointerEvents='none'
         style={[
-          StyleSheet.absoluteFillObject,
+          StyleSheet.absoluteFill,
           {
             backgroundColor: semantics.badgeBgOverlay,
           },
@@ -45,11 +55,15 @@ const DefaultMessageOverlayBackground = () => {
   );
 };
 
-type MessageOverlayHostLayerProps = {
-  BackgroundComponent?: React.ComponentType;
+export type MessageActionsProps = {
+  bottomItemStyle: StyleProp<ViewStyle>;
+  hostStyle: StyleProp<ViewStyle>;
+  portalHostStyle: StyleProp<ViewStyle>;
+  topItemStyle: StyleProp<ViewStyle>;
 };
 
-export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayHostLayerProps) => {
+export const MessageOverlayHostLayer = () => {
+  const { MessageActions, MessageOverlayBackground } = useComponentsContext();
   const { id, closing } = useOverlayController();
   const insets = useSafeAreaInsets();
   const { height: screenH } = useWindowDimensions();
@@ -116,7 +130,7 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
     opacity: backdrop.value,
   }));
 
-  const OverlayBackground = BackgroundComponent ?? DefaultMessageOverlayBackground;
+  const OverlayBackground = MessageOverlayBackground;
 
   const messageShiftY = useDerivedValue(() => {
     if (!messageH.value || !topH.value || !bottomH.value) return 0;
@@ -150,70 +164,56 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
   });
 
   const topItemStyle = useAnimatedStyle(() => {
-    if (!topH.value) return { height: 0 };
+    if (!topH.value) return { opacity: 0, height: 0, width: 0 };
+    const translateY = isActive ? (closing ? closeCorrectionY.value : messageShiftY.value) : 0;
+    const horizontalPosition = I18nManager.isRTL ? { right: topH.value.x } : { left: topH.value.x };
     return {
       height: topH.value.h,
-      left: topH.value.x,
+      opacity: 1,
       position: 'absolute',
       top: topH.value.y,
-      width: topH.value.w,
-    };
-  });
-
-  const topItemTranslateStyle = useAnimatedStyle(() => {
-    const target = isActive ? (closing ? closeCorrectionY.value : messageShiftY.value) : 0;
-    return {
       transform: [
         { scale: backdrop.value },
-        { translateY: withSpring(target, { duration: DURATION }) },
+        { translateY: withSpring(translateY, { duration: DURATION }) },
       ],
+      width: topH.value.w,
+      ...horizontalPosition,
     };
-  }, [isActive, closing]);
+  });
 
   const bottomItemStyle = useAnimatedStyle(() => {
-    if (!bottomH.value) return { height: 0 };
+    if (!bottomH.value) return { opacity: 0, height: 0, width: 0 };
+    const translateY = isActive ? (closing ? closeCorrectionY.value : bottomShiftY.value) : 0;
+    const horizontalPosition = I18nManager.isRTL
+      ? { right: bottomH.value.x }
+      : { left: bottomH.value.x };
     return {
       height: bottomH.value.h,
-      left: bottomH.value.x,
+      opacity: 1,
       position: 'absolute',
       top: bottomH.value.y,
-      width: bottomH.value.w,
-    };
-  });
-
-  const bottomItemTranslateStyle = useAnimatedStyle(() => {
-    const target = isActive ? (closing ? closeCorrectionY.value : bottomShiftY.value) : 0;
-    return {
       transform: [
         { scale: backdrop.value },
-        { translateY: withSpring(target, { duration: DURATION }) },
+        { translateY: withSpring(translateY, { duration: DURATION }) },
       ],
+      width: bottomH.value.w,
+      ...horizontalPosition,
     };
-  }, [isActive, closing]);
+  });
 
   const hostStyle = useAnimatedStyle(() => {
     if (!messageH.value) return { height: 0 };
+    const translateY = isActive ? (closing ? closeCorrectionY.value : messageShiftY.value) : 0;
     return {
       height: messageH.value.h,
       left: messageH.value.x,
       position: 'absolute',
       top: messageH.value.y,
+      transform: [{ translateY: withSpring(translateY, { duration: DURATION }) }],
       width: messageH.value.w,
     };
   });
 
-  const hostTranslateStyle = useAnimatedStyle(() => {
-    const target = isActive ? (closing ? closeCorrectionY.value : messageShiftY.value) : 0;
-
-    return {
-      transform: [
-        {
-          translateY: withSpring(target, { duration: DURATION }),
-        },
-      ],
-    };
-  }, [isActive, closing]);
-
   const tap = useMemo(
     () =>
       Gesture.Tap()
@@ -254,10 +254,7 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
     <GestureDetector gesture={tap}>
       <View pointerEvents='box-none' style={StyleSheet.absoluteFill}>
         {isActive ? (
-          <Animated.View
-            pointerEvents='none'
-            style={[StyleSheet.absoluteFillObject, backdropStyle]}
-          >
+          <Animated.View pointerEvents='none' style={[StyleSheet.absoluteFill, backdropStyle]}>
             <OverlayBackground />
           </Animated.View>
         ) : null}
@@ -266,29 +263,37 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
           {isActive ? (
             <Pressable
               onPress={closeOverlay}
-              style={StyleSheet.absoluteFillObject}
+              style={StyleSheet.absoluteFill}
               testID='message-overlay-backdrop'
             />
           ) : null}
 
-          <Animated.View style={[topItemStyle, topItemTranslateStyle]} testID='message-overlay-top'>
-            <PortalHost name='top-item' style={StyleSheet.absoluteFillObject} />
-          </Animated.View>
-
-          <Animated.View
-            pointerEvents='box-none'
-            style={[hostStyle, hostTranslateStyle]}
-            testID='message-overlay-message'
-          >
-            <PortalHost name='message-overlay' style={StyleSheet.absoluteFillObject} />
-          </Animated.View>
-
-          <Animated.View
-            style={[bottomItemStyle, bottomItemTranslateStyle]}
-            testID='message-overlay-bottom'
-          >
-            <PortalHost name='bottom-item' style={StyleSheet.absoluteFillObject} />
-          </Animated.View>
+          {MessageActions ? (
+            <MessageActions
+              bottomItemStyle={bottomItemStyle}
+              hostStyle={hostStyle}
+              portalHostStyle={styles.absoluteFill}
+              topItemStyle={topItemStyle}
+            />
+          ) : (
+            <>
+              <Animated.View style={topItemStyle} testID='message-overlay-top'>
+                <PortalHost name='top-item' style={styles.absoluteFill} />
+              </Animated.View>
+
+              <Animated.View
+                pointerEvents='box-none'
+                style={hostStyle}
+                testID='message-overlay-message'
+              >
+                <PortalHost name='message-overlay' style={styles.absoluteFill} />
+              </Animated.View>
+
+              <Animated.View style={bottomItemStyle} testID='message-overlay-bottom'>
+                <PortalHost name='bottom-item' style={styles.absoluteFill} />
+              </Animated.View>
+            </>
+          )}
         </View>
 
         <ClosingPortalHostsLayer closeCoverOpacity={closeCoverOpacity} />
@@ -296,3 +301,13 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
     </GestureDetector>
   );
 };
+
+const styles = StyleSheet.create({
+  absoluteFill: {
+    bottom: 0,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+});

package/src/contexts/overlayContext/OverlayContext.tsx

@@ -26,10 +26,6 @@ export const OverlayContext = React.createContext(
 export type OverlayProviderProps = ImageGalleryProviderProps & {
   /** https://github.com/GetStream/stream-chat-react-native/wiki/Internationalization-(i18n) */
   i18nInstance?: Streami18n;
-  /**
-   * Custom backdrop component rendered behind overlay content in `MessageOverlayHostLayer`.
-   */
-  MessageOverlayBackground?: React.ComponentType;
   value?: Partial<OverlayContextValue>;
 };
 

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -44,7 +44,6 @@ export const OverlayProvider = (props: PropsWithChildren<OverlayProviderProps>)
   const {
     children,
     i18nInstance,
-    MessageOverlayBackground,
     value,
     autoPlayVideo,
     giphyVersion,
@@ -107,7 +106,7 @@ export const OverlayProvider = (props: PropsWithChildren<OverlayProviderProps>)
             <PortalProvider>
               {children}
               {overlay === 'gallery' && <ImageGallery overlayOpacity={overlayOpacity} />}
-              <MessageOverlayHostLayer BackgroundComponent={MessageOverlayBackground} />
+              <MessageOverlayHostLayer />
             </PortalProvider>
           </ThemeProvider>
         </ImageGalleryProvider>

package/src/contexts/overlayContext/__tests__/MessageOverlayHostLayer.test.tsx

@@ -13,7 +13,8 @@ import {
   setOverlayMessageH,
   setOverlayTopH,
 } from '../../../state-store';
-import { MessageOverlayHostLayer } from '../MessageOverlayHostLayer';
+import { WithComponents } from '../../componentsContext/ComponentsContext';
+import { MessageActionsProps, MessageOverlayHostLayer } from '../MessageOverlayHostLayer';
 
 jest.mock('react-native', () => {
   const actual = jest.requireActual('react-native');
@@ -75,6 +76,12 @@ jest.mock('react-native-reanimated', () => {
     },
     clamp: (value: number, min: number, max: number) => Math.min(Math.max(value, min), max),
     runOnJS: (fn: (...args: unknown[]) => unknown) => fn,
+    useAnimatedReaction: (
+      prepare: () => unknown,
+      react: (current: unknown, previous: unknown) => void,
+    ) => {
+      react(prepare(), undefined);
+    },
     useAnimatedStyle: (updater: () => unknown) => updater(),
     useDerivedValue: (updater: () => unknown) => ({ value: updater() }),
     useSharedValue: useStableSharedValue,
@@ -86,6 +93,18 @@ const TOP_RECT = { h: 20, w: 90, x: 5, y: 0 };
 const MESSAGE_RECT = { h: 50, w: 180, x: 10, y: 0 };
 const BOTTOM_RECT = { h: 30, w: 140, x: 20, y: 100 };
 const NoopBackground = () => null;
+const CustomMessageActions = ({
+  bottomItemStyle,
+  hostStyle,
+  topItemStyle,
+}: MessageActionsProps) => (
+  <>
+    <Text testID='custom-message-actions'>Custom</Text>
+    <Text style={topItemStyle} testID='custom-message-actions-top' />
+    <Text style={hostStyle} testID='custom-message-actions-message' />
+    <Text style={bottomItemStyle} testID='custom-message-actions-bottom' />
+  </>
+);
 
 const flushAnimationFrameQueue = () => {
   act(() => {
@@ -136,7 +155,11 @@ describe('MessageOverlayHostLayer', () => {
 
   it('renders the custom background only while active and pressing the backdrop starts closing', () => {
     const CustomBackground = () => <Text testID='custom-background'>Background</Text>;
-    render(<MessageOverlayHostLayer BackgroundComponent={CustomBackground} />);
+    render(
+      <WithComponents overrides={{ MessageOverlayBackground: CustomBackground }}>
+        <MessageOverlayHostLayer />
+      </WithComponents>,
+    );
 
     expect(screen.queryByTestId('custom-background')).toBeNull();
     expect(screen.queryByTestId('message-overlay-backdrop')).toBeNull();
@@ -155,7 +178,12 @@ describe('MessageOverlayHostLayer', () => {
   });
 
   it('positions and translates the top, message, and bottom hosts using the registered rects', () => {
-    const { rerender } = render(<MessageOverlayHostLayer BackgroundComponent={NoopBackground} />);
+    const renderTree = () => (
+      <WithComponents overrides={{ MessageOverlayBackground: NoopBackground }}>
+        <MessageOverlayHostLayer />
+      </WithComponents>
+    );
+    const { rerender } = render(renderTree());
 
     act(() => {});
 
@@ -166,7 +194,7 @@ describe('MessageOverlayHostLayer', () => {
       openOverlay('message-1');
     });
 
-    rerender(<MessageOverlayHostLayer BackgroundComponent={NoopBackground} />);
+    rerender(renderTree());
 
     const topSlot = screen.getByTestId('message-overlay-top');
     const messageSlot = screen.getByTestId('message-overlay-message');
@@ -199,7 +227,12 @@ describe('MessageOverlayHostLayer', () => {
   });
 
   it('resets host geometry after finalizeCloseOverlay clears the registered rects', () => {
-    const { rerender } = render(<MessageOverlayHostLayer BackgroundComponent={NoopBackground} />);
+    const renderTree = () => (
+      <WithComponents overrides={{ MessageOverlayBackground: NoopBackground }}>
+        <MessageOverlayHostLayer />
+      </WithComponents>
+    );
+    const { rerender } = render(renderTree());
 
     act(() => {});
 
@@ -210,7 +243,7 @@ describe('MessageOverlayHostLayer', () => {
       openOverlay('message-1');
     });
 
-    rerender(<MessageOverlayHostLayer BackgroundComponent={NoopBackground} />);
+    rerender(renderTree());
 
     expect(
       StyleSheet.flatten(screen.getByTestId('message-overlay-message').props.style),
@@ -223,7 +256,7 @@ describe('MessageOverlayHostLayer', () => {
       finalizeCloseOverlay();
     });
 
-    rerender(<MessageOverlayHostLayer BackgroundComponent={NoopBackground} />);
+    rerender(renderTree());
 
     expect(StyleSheet.flatten(screen.getByTestId('message-overlay-top').props.style)).toMatchObject(
       {
@@ -239,4 +272,50 @@ describe('MessageOverlayHostLayer', () => {
       height: 0,
     });
   });
+
+  it('renders MessageActions override instead of the default host wrappers when provided', () => {
+    const renderTree = () => (
+      <WithComponents
+        overrides={{
+          MessageActions: CustomMessageActions,
+          MessageOverlayBackground: NoopBackground,
+        }}
+      >
+        <MessageOverlayHostLayer />
+      </WithComponents>
+    );
+    const { rerender } = render(renderTree());
+
+    act(() => {
+      setOverlayTopH(TOP_RECT);
+      setOverlayMessageH(MESSAGE_RECT);
+      setOverlayBottomH(BOTTOM_RECT);
+      openOverlay('message-1');
+    });
+
+    rerender(renderTree());
+
+    expect(screen.getByTestId('custom-message-actions')).toBeTruthy();
+    expect(screen.queryByTestId('message-overlay-top')).toBeNull();
+    expect(screen.queryByTestId('message-overlay-message')).toBeNull();
+    expect(screen.queryByTestId('message-overlay-bottom')).toBeNull();
+    expect(
+      StyleSheet.flatten(screen.getByTestId('custom-message-actions-top').props.style),
+    ).toMatchObject({
+      height: TOP_RECT.h,
+      width: TOP_RECT.w,
+    });
+    expect(
+      StyleSheet.flatten(screen.getByTestId('custom-message-actions-message').props.style),
+    ).toMatchObject({
+      height: MESSAGE_RECT.h,
+      width: MESSAGE_RECT.w,
+    });
+    expect(
+      StyleSheet.flatten(screen.getByTestId('custom-message-actions-bottom').props.style),
+    ).toMatchObject({
+      height: BOTTOM_RECT.h,
+      width: BOTTOM_RECT.w,
+    });
+  });
 });

package/src/contexts/themeContext/utils/theme.ts

@@ -107,6 +107,7 @@ export type Theme = {
     bottomSheetContentContainer: ViewStyle;
     durationText: TextStyle;
     content: {
+      actionContainer: ViewStyle;
       container: ViewStyle;
       infoContainer: ViewStyle;
       text: TextStyle;
@@ -640,7 +641,6 @@ export type Theme = {
       textContainer: ViewStyle & {
         onlyEmojiMarkdown: MarkdownStyle;
       };
-      wrapper: ViewStyle;
       timestampText?: TextStyle;
     };
     deleted: {
@@ -1030,6 +1030,7 @@ export const defaultTheme: Theme = {
     bottomSheetContentContainer: {},
     durationText: {},
     content: {
+      actionContainer: {},
       container: {},
       infoContainer: {},
       text: {},
@@ -1566,7 +1567,6 @@ export const defaultTheme: Theme = {
         onlyEmojiMarkdown: { text: { fontSize: 50 } },
       },
       timestampText: {},
-      wrapper: {},
     },
     deleted: {
       containerInner: {},

package/src/contexts/threadsContext/ThreadsContext.tsx

@@ -4,8 +4,6 @@ import { FlatListProps } from 'react-native';
 
 import { Channel, Thread } from 'stream-chat';
 
-import type { ThreadListItemMessagePreviewProps } from '../../components/ThreadList/ThreadListItemMessagePreview';
-import type { ThreadMessagePreviewDeliveryStatusProps } from '../../components/ThreadList/ThreadMessagePreviewDeliveryStatus';
 import { ThreadType } from '../threadContext/ThreadContext';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
@@ -19,13 +17,6 @@ export type ThreadsContextValue = {
   additionalFlatListProps?: Partial<FlatListProps<Thread>>;
   loadMore?: () => Promise<void>;
   onThreadSelect?: (thread: ThreadType, channel: Channel) => void;
-  ThreadListEmptyPlaceholder?: React.ComponentType;
-  ThreadListItem?: React.ComponentType;
-  ThreadListItemMessagePreview?: React.ComponentType<ThreadListItemMessagePreviewProps>;
-  ThreadListLoadingIndicator?: React.ComponentType;
-  ThreadListLoadingMoreIndicator?: React.ComponentType;
-  ThreadListUnreadBanner?: React.ComponentType;
-  ThreadMessagePreviewDeliveryStatus?: React.ComponentType<ThreadMessagePreviewDeliveryStatusProps>;
 };
 
 export const ThreadsContext = React.createContext(

package/src/hooks/index.ts

@@ -7,8 +7,10 @@ export * from './useStableCallback';
 export * from './useLoadingImage';
 export * from './useMessageReminder';
 export * from './useQueryReminders';
+export * from './useAfterKeyboardOpenCallback';
 export * from './useClientNotifications';
 export * from './useInAppNotificationsState';
+export * from './usePortalSettledCallback';
 export * from './useRAFCoalescedValue';
 export * from './useAudioPlayerControl';
 export * from './useAttachmentPickerState';

package/src/hooks/messagePreview/useMessagePreviewIcon.tsx

@@ -2,14 +2,14 @@ import { DraftMessage, LocalMessage, MessageResponse } from 'stream-chat';
 
 import { useGroupedAttachments } from '../../hooks/messagePreview/useGroupedAttachments';
 
-import { CircleBan } from '../../icons/CircleBan';
-import { File } from '../../icons/File';
-import { Link } from '../../icons/Link';
-import { MapPin } from '../../icons/MapPin';
-import { Mic } from '../../icons/Mic';
-import { PhotoIcon } from '../../icons/PhotoIcon';
-import { PollIcon } from '../../icons/PollIcon';
-import { VideoIcon } from '../../icons/VideoIcon';
+import { File } from '../../icons/file';
+import { PhotoIcon } from '../../icons/image';
+import { Link } from '../../icons/link';
+import { MapPin } from '../../icons/location';
+import { CircleBan } from '../../icons/no-sign';
+import { PollIcon } from '../../icons/poll';
+import { VideoIcon } from '../../icons/video';
+import { Mic } from '../../icons/voice';
 import { FileTypes } from '../../types/types';
 
 export const useMessagePreviewIcon = ({

package/src/hooks/messagePreview/useMessagePreviewText.tsx

@@ -10,6 +10,7 @@ import {
 import { useGroupedAttachments } from './useGroupedAttachments';
 
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../hooks/useStateStore';
 
 const selector = (nextValue: PollState) => ({
@@ -21,6 +22,7 @@ export const useMessagePreviewText = ({
 }: {
   message?: LocalMessage | MessageResponse | DraftMessage | null;
 }) => {
+  const { t } = useTranslationContext();
   const { client } = useChatContext();
   const poll = client.polls.fromState(message?.poll_id ?? '');
   const { name: pollName } = useStateStore(poll?.state, selector) ?? {};
@@ -35,9 +37,8 @@ export const useMessagePreviewText = ({
   const onlyAudio = audios?.length === attachmentsLength;
   const onlyVoiceRecordings =
     voiceRecordings?.length && voiceRecordings?.length === attachmentsLength;
-
   if (message?.type === 'deleted') {
-    return 'Message deleted';
+    return t('Message deleted');
   }
 
   if (pollName) {
@@ -50,54 +51,56 @@ export const useMessagePreviewText = ({
       (message?.shared_location as LiveLocationPayload)?.end_at &&
       new Date((message?.shared_location as LiveLocationPayload)?.end_at) > new Date()
     ) {
-      return 'Live Location';
+      return t('Live Location');
     }
-    return 'Location';
+    return t('Location');
+  }
+
+  if (giphys?.length) {
+    return t('Giphy');
   }
 
   if (message?.text) {
-    return message?.text;
+    return message.text;
   }
 
   if (onlyImages) {
     if (images?.length === 1) {
-      return 'Photo';
+      return t('Photo');
     } else {
-      return `${images?.length} Photos`;
+      return t('{{count}} Photos', { count: images?.length });
     }
   }
 
   if (onlyVideos) {
     if (videos?.length === 1) {
-      return 'Video';
+      return t('Video');
     } else {
-      return `${videos?.length} Videos`;
+      return t(`{{count}} Videos`, { count: videos?.length });
     }
   }
 
   if (onlyAudio) {
     if (audios?.length === 1) {
-      return 'Audio';
+      return t('Audio');
     } else {
-      return `${audios?.length} Audios`;
+      return t('{{count}} Audios', { count: audios?.length });
     }
   }
 
   if (onlyVoiceRecordings) {
     if (voiceRecordings?.length === 1) {
-      return `Voice message (${dayjs.duration(voiceRecordings?.[0]?.duration ?? 0, 'seconds').format('m:ss')})`;
+      return t(`Voice message ({{duration}})`, {
+        duration: dayjs.duration(voiceRecordings?.[0]?.duration ?? 0, 'seconds').format('m:ss'),
+      });
     } else {
-      return `${voiceRecordings?.length} Voice messages`;
+      return t('{{count}} Voice messages', { count: voiceRecordings?.length });
     }
   }
 
-  if (giphys?.length) {
-    return 'Giphy';
-  }
-
   if (onlyFiles && files?.length === 1) {
     return files?.[0]?.title;
   }
 
-  return `${attachmentsLength} Files`;
+  return t('{{count}} Files', { count: attachmentsLength });
 };

package/src/hooks/useAfterKeyboardOpenCallback.ts

@@ -0,0 +1,59 @@
+import { useEffect, useRef } from 'react';
+import { EventSubscription, Keyboard, Platform } from 'react-native';
+
+import { useStableCallback } from './useStableCallback';
+
+import { KeyboardControllerPackage } from '../components/KeyboardCompatibleView/KeyboardControllerAvoidingView';
+import { useMessageInputContext } from '../contexts/messageInputContext/MessageInputContext';
+
+/**
+ * A utility hook that returns a stable callback which focuses the message input
+ * and invokes the callback once the keyboard is open.
+ *
+ * @param callback - callback we want to run once the keyboard is ready
+ * @returns A stable callback that will wait for the keyboard to be open before executing.
+ */
+export const useAfterKeyboardOpenCallback = <T extends unknown[]>(
+  callback: (...args: T) => void,
+) => {
+  const { inputBoxRef } = useMessageInputContext();
+  const keyboardSubscriptionRef = useRef<EventSubscription | undefined>(undefined);
+  // This callback runs from a keyboard event listener, so it must stay fresh across rerenders.
+  const stableCallback = useStableCallback(callback);
+
+  /** Clears the pending keyboard listener, if any. */
+  const clearKeyboardSubscription = useStableCallback(() => {
+    keyboardSubscriptionRef.current?.remove();
+    keyboardSubscriptionRef.current = undefined;
+  });
+
+  useEffect(() => clearKeyboardSubscription, [clearKeyboardSubscription]);
+
+  return useStableCallback((...args: T) => {
+    clearKeyboardSubscription();
+
+    const runCallback = () => {
+      clearKeyboardSubscription();
+      stableCallback(...args);
+    };
+
+    if (!inputBoxRef.current) {
+      runCallback();
+      return;
+    }
+
+    if (Keyboard.isVisible()) {
+      inputBoxRef.current.focus();
+      runCallback();
+      return;
+    }
+
+    const keyboardEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+
+    keyboardSubscriptionRef.current = KeyboardControllerPackage?.KeyboardEvents
+      ? KeyboardControllerPackage.KeyboardEvents.addListener(keyboardEvent, runCallback)
+      : Keyboard.addListener(keyboardEvent, runCallback);
+
+    inputBoxRef.current.focus();
+  });
+};