stream-chat-react-native-core 9.0.0-beta.21 → 9.0.0-beta.23

package/lib/typescript/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2CAA2C,CAAC;AAC1D,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2CAA2C,CAAC;AAC1D,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC"}

package/lib/typescript/hooks/useAfterKeyboardOpenCallback.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 declare const useAfterKeyboardOpenCallback: <T extends unknown[]>(callback: (...args: T) => void) => import("./useStableCallback").StableCallback<T, void>;
+//# sourceMappingURL=useAfterKeyboardOpenCallback.d.ts.map

package/lib/typescript/hooks/useAfterKeyboardOpenCallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAfterKeyboardOpenCallback.d.ts","sourceRoot":"","sources":["../../../src/hooks/useAfterKeyboardOpenCallback.ts"],"names":[],"mappings":"AAUA;;;;;;GAMG;AACH,eAAO,MAAM,4BAA4B,GAAI,CAAC,SAAS,OAAO,EAAE,EAC9D,UAAU,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,IAAI,0DA2C/B,CAAC"}

package/lib/typescript/hooks/usePortalSettledCallback.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Returns a stable callback that is safe to run after a `PortalWhileClosingView`
+ * has settled back into its original tree.
+ *
+ * Some followup actions are sensitive to that handoff window. If they run
+ * while a view is still being returned from a portal host to its in place host,
+ * they can target a node that is about to be reattached. On Android, that is
+ * especially noticeable with focus sensitive work, where the target can lose
+ * focus again mid keyboard animation.
+ *
+ * Two frames are intentional here:
+ * - frame 1 lets the portal retarget and React commit the component tree
+ * - frame 2 lets the native view hierarchy settle in its final host
+ *
+ * iOS does not currently need this settle window for this flow.
+ *
+ * A good example is the message composer edit action: after closing the message
+ * overlay, we wait for the portal handoff to settle before focusing the input
+ * and opening the keyboard. Doing this prematurely will result in the keyboard
+ * being immediately closed.
+ *
+ * Another good example would be having a button wrapped in a `PortalWhileClosingView`,
+ * that possibly renders (or morphs into) something when pressed. Handling `onPress`
+ * prematurely here may lead to the morphed button rendering into a completely different
+ * part of the UI hierarchy, causing unknown behaviour. This hook prevents that from
+ * happening.
+ *
+ * @param callback - callback we want to invoke once the portal handoff has settled
+ * @returns A stable callback gated behind the portal settle window.
+ */
+export declare const usePortalSettledCallback: <T extends unknown[]>(callback: (...args: T) => void) => import("./useStableCallback").StableCallback<T, void>;
+//# sourceMappingURL=usePortalSettledCallback.d.ts.map

package/lib/typescript/hooks/usePortalSettledCallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePortalSettledCallback.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePortalSettledCallback.ts"],"names":[],"mappings":"AA+BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,wBAAwB,GAAI,CAAC,SAAS,OAAO,EAAE,EAAE,UAAU,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,IAAI,0DAgB3F,CAAC"}

package/lib/typescript/state-store/message-overlay-store.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"message-overlay-store.d.ts","sourceRoot":"","sources":["../../../src/state-store/message-overlay-store.ts"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAExE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAKzC,KAAK,YAAY,GAAG;IAClB,0BAA0B,EAAE,MAAM,EAAE,CAAC;IACrC,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC;IACvB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,IAAI,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,CAAC;AAC9E,MAAM,MAAM,wBAAwB,GAAG;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;CAC3B,CAAC;AAmBF,KAAK,4BAA4B,GAAG;IAClC,yBAAyB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACjC,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CAC/B,CAAC;AAIF,eAAO,MAAM,oCAAoC,GAAI,YAAY,4BAA4B,eAO5F,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,UAAU,IAAI,SAEhD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,MAAM,IAAI,SAExC,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,SAAS,IAAI,SAE9C,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,8BAAyB,SAElE,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,QAAQ,iBAAiB,GAAG,MAAM,SAS7D,CAAC;AAEF,eAAO,MAAM,YAAY,YAYxB,CAAC;AAIF,eAAO,MAAM,qBAAqB,GAAI,QAAQ,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,SAOvE,CAAC;AAEF,eAAO,MAAM,oBAAoB,YAMhC,CAAC;AAEF,eAAO,MAAM,YAAY,0BAA6C,CAAC;AAKvE,eAAO,MAAM,uCAAuC,cACiB,CAAC;AAuCtE,eAAO,MAAM,sBAAsB,GAAI,UAAU,MAAM,EAAE,IAAI,MAAM,EAAE,QAAQ,IAAI,SAkBhF,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,UAAU,MAAM,EAAE,IAAI,MAAM,SAkBpE,CAAC;AAuBF,eAAO,MAAM,oBAAoB;;;;CAEhC,CAAC;AAUF,eAAO,MAAM,mBAAmB,eAE/B,CAAC;AAEF,eAAO,MAAM,kCAAkC,gBAE9C,CAAC;AAEF,eAAO,MAAM,gCAAgC,GAAI,UAAU,MAAM,EAAE,IAAI,MAAM,YAY5E,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,6BAA6B,GAAI,WAAW,MAAM,EAAE,EAAE,iBAAc,SAyBhF,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,uBAAuB,kDAWnC,CAAC;AAIF,eAAO,MAAM,kBAAkB,GAAI,IAAI,MAAM;;;CAQ5C,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,WAAW,YAAY;;CAA2B,CAAC;AAEpF,eAAO,MAAM,cAAc,eAI1B,CAAC"}
+{"version":3,"file":"message-overlay-store.d.ts","sourceRoot":"","sources":["../../../src/state-store/message-overlay-store.ts"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAExE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAKzC,KAAK,YAAY,GAAG;IAClB,0BAA0B,EAAE,MAAM,EAAE,CAAC;IACrC,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC;IACvB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,IAAI,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,CAAC;AAC9E,MAAM,MAAM,wBAAwB,GAAG;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;CAC3B,CAAC;AAmBF,KAAK,4BAA4B,GAAG;IAClC,yBAAyB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACjC,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CAC/B,CAAC;AAIF,eAAO,MAAM,oCAAoC,GAAI,YAAY,4BAA4B,eAO5F,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,UAAU,IAAI,SAEhD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,MAAM,IAAI,SAExC,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,SAAS,IAAI,SAE9C,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,8BAAyB,SAElE,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,QAAQ,iBAAiB,GAAG,MAAM,SAS7D,CAAC;AAEF,eAAO,MAAM,YAAY,YAMxB,CAAC;AAIF,eAAO,MAAM,qBAAqB,GAAI,QAAQ,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,SAOvE,CAAC;AAEF,eAAO,MAAM,oBAAoB,YAMhC,CAAC;AAEF,eAAO,MAAM,YAAY,0BAA6C,CAAC;AAKvE,eAAO,MAAM,uCAAuC,cACiB,CAAC;AAuCtE,eAAO,MAAM,sBAAsB,GAAI,UAAU,MAAM,EAAE,IAAI,MAAM,EAAE,QAAQ,IAAI,SAkBhF,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,UAAU,MAAM,EAAE,IAAI,MAAM,SAkBpE,CAAC;AAuBF,eAAO,MAAM,oBAAoB;;;;CAEhC,CAAC;AAUF,eAAO,MAAM,mBAAmB,eAE/B,CAAC;AAEF,eAAO,MAAM,kCAAkC,gBAE9C,CAAC;AAEF,eAAO,MAAM,gCAAgC,GAAI,UAAU,MAAM,EAAE,IAAI,MAAM,YAY5E,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,6BAA6B,GAAI,WAAW,MAAM,EAAE,EAAE,iBAAc,SAyBhF,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,uBAAuB,kDAWnC,CAAC;AAIF,eAAO,MAAM,kBAAkB,GAAI,IAAI,MAAM;;;CAQ5C,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,WAAW,YAAY;;CAA2B,CAAC;AAEpF,eAAO,MAAM,cAAc,eAI1B,CAAC"}

package/lib/typescript/utils/transitions.d.ts

@@ -0,0 +1,9 @@
+import { FadeIn, FadeOut, LinearTransition, ZoomIn, ZoomOut } from 'react-native-reanimated';
+export declare const transitions: {
+    readonly fadeIn200: FadeIn;
+    readonly fadeOut200: FadeOut;
+    readonly layout200: LinearTransition;
+    readonly zoomIn200: ZoomIn;
+    readonly zoomOut200: ZoomOut;
+};
+//# sourceMappingURL=transitions.d.ts.map

package/lib/typescript/utils/transitions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transitions.d.ts","sourceRoot":"","sources":["../../../src/utils/transitions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAE7F,eAAO,MAAM,WAAW;;;;;;CAMd,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "9.0.0-beta.21",
+  "version": "9.0.0-beta.23",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/__tests__/offline-support/offline-feature.js

@@ -338,10 +338,13 @@ export const Generic = () => {
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
 
-      await waitFor(async () => {
-        expect(screen.getByTestId('channel-list')).toBeTruthy();
-        await expectAllChannelsWithStateToBeInDB(screen.queryAllByLabelText);
-      });
+      await waitFor(
+        async () => {
+          expect(screen.getByTestId('channel-list')).toBeTruthy();
+          await expectAllChannelsWithStateToBeInDB(screen.queryAllByLabelText);
+        },
+        { timeout: 5000 },
+      );
     });
 
     it('should fetch channels from the db correctly even if they are empty', async () => {

package/src/components/Message/hooks/useMessageActionHandlers.ts

@@ -12,10 +12,20 @@ import type { MessageContextValue } from '../../../contexts/messageContext/Messa
 import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
 
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
-import { useStableCallback } from '../../../hooks';
+import {
+  useAfterKeyboardOpenCallback,
+  usePortalSettledCallback,
+  useStableCallback,
+} from '../../../hooks';
 import { useTranslatedMessage } from '../../../hooks/useTranslatedMessage';
 import { NativeHandlers } from '../../../native';
 
+const useWithPortalKeyboardSafety = <T extends unknown[]>(callback: (...args: T) => void) => {
+  const callbackAfterKeyboardOpen = useAfterKeyboardOpenCallback(callback);
+
+  return usePortalSettledCallback(callbackAfterKeyboardOpen);
+};
+
 export const useMessageActionHandlers = ({
   channel,
   client,
@@ -114,7 +124,7 @@ export const useMessageActionHandlers = ({
     }
   });
 
-  const handleEditMessage = useStableCallback(() => {
+  const handleEditMessage = useWithPortalKeyboardSafety(() => {
     setEditingState(message);
   });
 

package/src/components/MessageInput/MessageComposer.tsx

@@ -5,7 +5,6 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import Animated, {
   Extrapolation,
   interpolate,
-  LinearTransition,
   useAnimatedStyle,
   useSharedValue,
 } from 'react-native-reanimated';
@@ -54,6 +53,7 @@ import { useStateStore } from '../../hooks/useStateStore';
 import { AudioRecorderManagerState } from '../../state-store/audio-recorder-manager';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
+import { transitions } from '../../utils/transitions';
 import { type TextInputOverrideComponent } from '../AutoCompleteInput/AutoCompleteInput';
 import { CreatePoll } from '../Poll/CreatePollContent';
 import { PortalWhileClosingView } from '../UIComponents/PortalWhileClosingView';
@@ -219,7 +219,6 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
     closePollCreationDialog,
     CreatePollContent,
     createPollOptionGap,
-    editing,
     InputView,
     MessageComposerLeadingView,
     MessageComposerTrailingView,
@@ -272,12 +271,6 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
     [closeAttachmentPicker],
   );
 
-  useEffect(() => {
-    if (editing && inputBoxRef.current) {
-      inputBoxRef.current.focus();
-    }
-  }, [editing, inputBoxRef]);
-
   /**
    * Effect to get the draft data for legacy thread composer and set it to message composer.
    * TODO: This can be removed once we remove legacy thread composer.
@@ -383,7 +376,7 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
               ]
             : null
         }
-        layout={LinearTransition.duration(200)}
+        layout={transitions.layout200}
       >
         <PortalWhileClosingView portalHostName='overlay-composer' portalName='message-composer'>
           <View
@@ -419,7 +412,7 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
               <View style={[styles.container, container]}>
                 <MessageComposerLeadingView />
                 <Animated.View
-                  layout={LinearTransition.duration(200)}
+                  layout={transitions.layout200}
                   style={[
                     styles.inputBoxWrapper,
                     messageInputFloating ? [styles.shadow, inputFloatingContainer] : null,
@@ -438,7 +431,7 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
 
                     <Animated.View
                       style={[styles.inputContainer, inputContainer]}
-                      layout={LinearTransition.duration(200)}
+                      layout={transitions.layout200}
                     >
                       {!isRecordingStateIdle ? (
                         <AudioRecorder slideToCancelStyle={slideToCancelAnimatedStyle} />
@@ -746,6 +739,7 @@ export const MessageComposer = (props: MessageComposerProps) => {
         closePollCreationDialog,
         compressImageQuality,
         CreatePollContent,
+        // TODO: probably not needed anymore, please check
         editing,
         Input,
         InputView,

package/src/components/MessageInput/MessageComposerLeadingView.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
 
-import Animated, { LinearTransition } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 
 import { InputButtons } from './components/InputButtons';
 import { idleRecordingStateSelector } from './utils/audioRecorderSelectors';
@@ -9,6 +9,7 @@ import { idleRecordingStateSelector } from './utils/audioRecorderSelectors';
 import { useMessageInputContext } from '../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../hooks/useStateStore';
+import { transitions } from '../../utils/transitions';
 
 export const MessageComposerLeadingView = () => {
   const {
@@ -24,7 +25,7 @@ export const MessageComposerLeadingView = () => {
 
   return isRecordingStateIdle ? (
     <Animated.View
-      layout={LinearTransition.duration(200)}
+      layout={transitions.layout200}
       style={[
         styles.inputButtonsContainer,
         messageInputFloating ? styles.shadow : null,

package/src/components/MessageInput/MessageInputHeaderView.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { StyleSheet } from 'react-native';
 
-import Animated, { FadeIn, FadeOut, LinearTransition } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 
 import { LinkPreviewList } from './components/LinkPreviewList';
 import { useHasLinkPreviews } from './hooks/useLinkPreviews';
@@ -17,6 +17,7 @@ import { useMessagesContext } from '../../contexts/messagesContext/MessagesConte
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../hooks/useStateStore';
 import { primitives } from '../../theme';
+import { transitions } from '../../utils/transitions';
 
 export const MessageInputHeaderView = () => {
   const {
@@ -42,7 +43,7 @@ export const MessageInputHeaderView = () => {
 
   return isRecordingStateIdle ? (
     <Animated.View
-      layout={LinearTransition.duration(200)}
+      layout={transitions.layout200}
       style={[
         styles.contentContainer,
         {
@@ -55,7 +56,7 @@ export const MessageInputHeaderView = () => {
       ]}
     >
       {editing ? (
-        <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(200)}>
+        <Animated.View entering={transitions.fadeIn200} exiting={transitions.fadeOut200}>
           <Reply
             mode='edit'
             onDismiss={clearEditingState}
@@ -64,7 +65,7 @@ export const MessageInputHeaderView = () => {
         </Animated.View>
       ) : null}
       {quotedMessage && !editing ? (
-        <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(200)}>
+        <Animated.View entering={transitions.fadeIn200} exiting={transitions.fadeOut200}>
           <Reply onDismiss={editing ? undefined : onDismissReply} mode='reply' />
         </Animated.View>
       ) : null}

package/src/components/MessageInput/MessageInputTrailingView.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
 
-import Animated, { LinearTransition } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 
 import { OutputButtons } from './components/OutputButtons';
 
@@ -11,6 +11,7 @@ import { useMessageInputContext } from '../../contexts/messageInputContext/Messa
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../hooks/useStateStore';
 import { primitives } from '../../theme';
+import { transitions } from '../../utils/transitions';
 
 export const MessageInputTrailingView = () => {
   const {
@@ -25,7 +26,7 @@ export const MessageInputTrailingView = () => {
   );
   return (recordingStatus === 'idle' || recordingStatus === 'recording') && !micLocked ? (
     <Animated.View
-      layout={LinearTransition.duration(200)}
+      layout={transitions.layout200}
       style={[styles.outputButtonsContainer, outputButtonsContainer]}
     >
       <OutputButtons />

package/src/components/MessageInput/components/OutputButtons/index.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 
-import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 
 import { TextComposerState } from 'stream-chat';
 
@@ -21,6 +21,7 @@ import {
   useMessageInputContext,
 } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { useStateStore } from '../../../../hooks/useStateStore';
+import { transitions } from '../../../../utils/transitions';
 import { AIStates, useAIState } from '../../../AITypingIndicatorView';
 import { useIsCooldownActive } from '../../hooks/useIsCooldownActive';
 
@@ -88,8 +89,8 @@ export const OutputButtonsWithContext = (props: OutputButtonsWithContextProps) =
   } else if (editing || command) {
     return (
       <Animated.View
-        entering={ZoomIn.duration(200)}
-        exiting={ZoomOut.duration(200)}
+        entering={transitions.zoomIn200}
+        exiting={transitions.zoomOut200}
         key='edit-button'
         style={editButtonContainer}
       >
@@ -99,8 +100,8 @@ export const OutputButtonsWithContext = (props: OutputButtonsWithContextProps) =
   } else if (cooldownIsActive) {
     return (
       <Animated.View
-        entering={ZoomIn.duration(200)}
-        exiting={ZoomOut.duration(200)}
+        entering={transitions.zoomIn200}
+        exiting={transitions.zoomOut200}
         key='cooldown-timer'
         style={cooldownButtonContainer}
       >
@@ -110,8 +111,8 @@ export const OutputButtonsWithContext = (props: OutputButtonsWithContextProps) =
   } else if (audioRecordingEnabled && textIsEmpty && !hasAttachments) {
     return (
       <Animated.View
-        entering={ZoomIn.duration(200)}
-        exiting={ZoomOut.duration(200)}
+        entering={transitions.zoomIn200}
+        exiting={transitions.zoomOut200}
         key='audio-recording-button'
         style={audioRecordingButtonContainer}
       >
@@ -121,8 +122,8 @@ export const OutputButtonsWithContext = (props: OutputButtonsWithContextProps) =
   } else {
     return (
       <Animated.View
-        entering={ZoomIn.duration(200)}
-        exiting={ZoomOut.duration(200)}
+        entering={transitions.zoomIn200}
+        exiting={transitions.zoomOut200}
         key='send-button'
         style={sendButtonContainer}
       >

package/src/components/MessageList/MessageFlashList.tsx

@@ -8,7 +8,7 @@ import {
   ViewToken,
 } from 'react-native';
 
-import Animated, { LinearTransition } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 
 import type { FlashListProps, FlashListRef } from '@shopify/flash-list';
 import type { Channel, Event, LocalMessage, MessageResponse } from 'stream-chat';
@@ -56,6 +56,7 @@ import { useStableCallback, useStateStore } from '../../hooks';
 import { bumpOverlayLayoutRevision } from '../../state-store';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
+import { transitions } from '../../utils/transitions';
 import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
 
 type FlashListContextApi = { getRef?: () => FlashListRef<LocalMessage> | null } | undefined;
@@ -1094,7 +1095,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
         ) : null}
       </View>
       <Animated.View
-        layout={LinearTransition.duration(200)}
+        layout={transitions.layout200}
         style={[
           styles.scrollToBottomButtonContainer,
           {

package/src/components/MessageList/MessageList.tsx

@@ -11,7 +11,7 @@ import {
   ViewToken,
 } from 'react-native';
 
-import Animated, { LinearTransition } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 
 import debounce from 'lodash/debounce';
 
@@ -68,6 +68,7 @@ import { useStateStore } from '../../hooks/useStateStore';
 import { bumpOverlayLayoutRevision } from '../../state-store';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
+import { transitions } from '../../utils/transitions';
 import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
 
 // This is just to make sure that the scrolling happens in a different task queue.
@@ -1263,7 +1264,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
         <MessageListItemProvider value={messageListItemContextValue}>
           <ListComponent
             // TODO: Consider hiding this behind a feature flag.
-            layout={LayoutTransition}
+            layout={transitions.layout200}
             contentContainerStyle={flatListContentContainerStyle}
             /** Disables the MessageList UI. Which means, message actions, reactions won't work. */
             data={processedMessageListWithNeighbors}
@@ -1310,7 +1311,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
       </View>
       {scrollToBottomButtonVisible ? (
         <Animated.View
-          layout={LinearTransition.duration(200)}
+          layout={transitions.layout200}
           style={[
             {
               bottom: messageInputFloating
@@ -1462,5 +1463,3 @@ export const MessageList = (props: MessageListProps) => {
 const AnimatedList = React.memo(
   Animated.createAnimatedComponent(FlatList<MessageListItemWithNeighbours>),
 );
-
-const LayoutTransition = LinearTransition.duration(200);

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/useAfterKeyboardOpenCallback.ts

@@ -0,0 +1,62 @@
+import { useEffect, useRef } from 'react';
+import { EventSubscription, Keyboard, Platform } from 'react-native';
+
+import { useKeyboardVisibility } from './useKeyboardVisibility';
+
+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 isKeyboardVisible = useKeyboardVisibility();
+  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 (isKeyboardVisible) {
+      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();
+  });
+};

package/src/hooks/usePortalSettledCallback.ts

@@ -0,0 +1,78 @@
+import { useEffect, useRef } from 'react';
+import { Platform } from 'react-native';
+
+import { useStableCallback } from './useStableCallback';
+
+/**
+ * Number of frames we wait before invoking input focus sensitive work after the
+ * overlay closes.
+ */
+const SETTLE_FRAMES = Platform.OS === 'android' ? 2 : 0;
+
+/**
+ * Runs a callback after a fixed number of animation frames.
+ *
+ * We use RAFs here because the settling work we care about is tied to the next
+ * rendered frames after the overlay close transition.
+ *
+ * @param callback - callback to run once the frame budget has elapsed
+ * @param frames - number of frames to wait
+ * @param rafIds - accumulator used for later cancellation/cleanup
+ */
+const scheduleAfterFrames = (callback: () => void, frames: number, rafIds: number[]) => {
+  if (frames <= 0) {
+    callback();
+    return;
+  }
+
+  const rafId = requestAnimationFrame(() => scheduleAfterFrames(callback, frames - 1, rafIds));
+  rafIds.push(rafId);
+};
+
+/**
+ * Returns a stable callback that is safe to run after a `PortalWhileClosingView`
+ * has settled back into its original tree.
+ *
+ * Some followup actions are sensitive to that handoff window. If they run
+ * while a view is still being returned from a portal host to its in place host,
+ * they can target a node that is about to be reattached. On Android, that is
+ * especially noticeable with focus sensitive work, where the target can lose
+ * focus again mid keyboard animation.
+ *
+ * Two frames are intentional here:
+ * - frame 1 lets the portal retarget and React commit the component tree
+ * - frame 2 lets the native view hierarchy settle in its final host
+ *
+ * iOS does not currently need this settle window for this flow.
+ *
+ * A good example is the message composer edit action: after closing the message
+ * overlay, we wait for the portal handoff to settle before focusing the input
+ * and opening the keyboard. Doing this prematurely will result in the keyboard
+ * being immediately closed.
+ *
+ * Another good example would be having a button wrapped in a `PortalWhileClosingView`,
+ * that possibly renders (or morphs into) something when pressed. Handling `onPress`
+ * prematurely here may lead to the morphed button rendering into a completely different
+ * part of the UI hierarchy, causing unknown behaviour. This hook prevents that from
+ * happening.
+ *
+ * @param callback - callback we want to invoke once the portal handoff has settled
+ * @returns A stable callback gated behind the portal settle window.
+ */
+export const usePortalSettledCallback = <T extends unknown[]>(callback: (...args: T) => void) => {
+  const rafIdsRef = useRef<number[]>([]);
+  // This callback runs from deferred RAF work, so it must stay fresh across rerenders.
+  const stableCallback = useStableCallback(callback);
+
+  const clearScheduledFrames = useStableCallback(() => {
+    rafIdsRef.current.forEach((rafId) => cancelAnimationFrame(rafId));
+    rafIdsRef.current = [];
+  });
+
+  useEffect(() => clearScheduledFrames, [clearScheduledFrames]);
+
+  return useStableCallback((...args: T) => {
+    clearScheduledFrames();
+    scheduleAfterFrames(() => stableCallback(...args), SETTLE_FRAMES, rafIdsRef.current);
+  });
+};

package/src/state-store/message-overlay-store.ts

@@ -94,13 +94,7 @@ export const closeOverlay = () => {
     return;
   }
 
-  requestAnimationFrame(() => {
-    if (!overlayStore.getLatestValue().id) {
-      return;
-    }
-
-    overlayStore.partialNext({ closing: true });
-  });
+  overlayStore.partialNext({ closing: true });
 };
 
 let actionQueue: Array<() => void | Promise<void>> = [];

package/src/utils/transitions.ts

@@ -0,0 +1,9 @@
+import { FadeIn, FadeOut, LinearTransition, ZoomIn, ZoomOut } from 'react-native-reanimated';
+
+export const transitions = {
+  fadeIn200: FadeIn.duration(200),
+  fadeOut200: FadeOut.duration(200),
+  layout200: LinearTransition.duration(200),
+  zoomIn200: ZoomIn.duration(200),
+  zoomOut200: ZoomOut.duration(200),
+} as const;

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.0.0-beta.21"
+  "version": "9.0.0-beta.23"
 }