fix: message input resizing

Author: isekovanic

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -7,6 +7,8 @@ import {
   TextInputSelectionChangeEvent,
 } from 'react-native';
 
+import Animated, { LinearTransition } from 'react-native-reanimated';
+
 import { MessageComposerConfig, TextComposerState } from 'stream-chat';
 
 import {
@@ -27,6 +29,21 @@ import {
 import { useStateStore } from '../../hooks/useStateStore';
 import { useCooldownRemaining } from '../MessageInput/hooks/useCooldownRemaining';
 
+export type TextInputOverrideComponent =
+  | typeof RNTextInput
+  | React.ComponentClass<TextInputProps>
+  | React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<RNTextInput>>;
+
+type AnimatedTextInputRendererProps = TextInputProps & {
+  TextInputComponent: TextInputOverrideComponent;
+};
+
+const TextInputRenderer = React.forwardRef<RNTextInput, AnimatedTextInputRendererProps>(
+  ({ TextInputComponent: Component, ...props }, ref) => <Component {...props} ref={ref} />,
+);
+
+const AnimatedTextInputRenderer = Animated.createAnimatedComponent(TextInputRenderer);
+
 type AutoCompleteInputPropsWithContext = TextInputProps &
   Pick<ChannelContextValue, 'channel'> &
   Pick<MessageInputContextValue, 'setInputBoxRef'> &
@@ -36,11 +53,7 @@ type AutoCompleteInputPropsWithContext = TextInputProps &
      * that would happen if we put this in the MessageInputContext
      */
     cooldownRemainingSeconds?: number;
-    TextInputComponent?: React.ComponentType<
-      TextInputProps & {
-        ref: React.Ref<RNTextInput> | undefined;
-      }
-    >;
+    TextInputComponent?: TextInputOverrideComponent;
   };
 
 type AutoCompleteInputProps = Partial<AutoCompleteInputPropsWithContext>;
@@ -136,7 +149,9 @@ const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext)
   }, [command, cooldownRemainingSeconds, t, placeholder]);
 
   return (
-    <TextInputComponent
+    <AnimatedTextInputRenderer
+      TextInputComponent={TextInputComponent}
+      layout={LinearTransition.duration(200)}
       autoFocus={!!command}
       editable={enabled}
       maxLength={maxMessageLength}

package/src/components/MessageInput/MessageInput.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo } from 'react';
-import { Modal, StyleSheet, TextInput, TextInputProps, View } from 'react-native';
+import { Modal, StyleSheet, View } from 'react-native';
 
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import Animated, {
@@ -54,7 +54,10 @@ 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 { AutoCompleteInput } from '../AutoCompleteInput/AutoCompleteInput';
+import {
+  AutoCompleteInput,
+  type TextInputOverrideComponent,
+} from '../AutoCompleteInput/AutoCompleteInput';
 import { CreatePoll } from '../Poll/CreatePollContent';
 import { PortalWhileClosingView } from '../UIComponents/PortalWhileClosingView';
 import { SafeAreaViewWrapper } from '../UIComponents/SafeAreaViewWrapper';
@@ -196,11 +199,7 @@ type MessageInputPropsWithContext = Pick<ChatContextValue, 'isOnline'> &
   Pick<AudioRecorderManagerState, 'micLocked'> & {
     editing: boolean;
     isKeyboardVisible: boolean;
-    TextInputComponent?: React.ComponentType<
-      TextInputProps & {
-        ref: React.Ref<TextInput> | undefined;
-      }
-    >;
+    TextInputComponent?: TextInputOverrideComponent;
     isRecordingStateIdle?: boolean;
     recordingStatus?: string;
   };
@@ -455,15 +454,10 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
                         <>
                           <MessageInputLeadingView />
 
-                          <Animated.View
-                            style={styles.autocompleteInputContainer}
-                            layout={LinearTransition.duration(200)}
-                          >
-                            <AutoCompleteInput
-                              TextInputComponent={TextInputComponent}
-                              {...additionalTextInputProps}
-                            />
-                          </Animated.View>
+                          <AutoCompleteInput
+                            TextInputComponent={TextInputComponent}
+                            {...additionalTextInputProps}
+                          />
                         </>
                       )}
 

package/src/components/MessageInput/MessageInputLeadingView.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { StyleSheet } from 'react-native';
 
-import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated';
+import Animated, { LinearTransition, ZoomIn, ZoomOut } from 'react-native-reanimated';
 
 import { textComposerStateSelector } from './utils/messageComposerSelectors';
 
@@ -25,6 +25,7 @@ export const MessageInputLeadingView = () => {
     <Animated.View
       entering={ZoomIn.duration(200)}
       exiting={ZoomOut.duration(200)}
+      layout={LinearTransition.duration(200)}
       style={styles.giphyContainer}
     >
       <GiphyChip />
@@ -35,5 +36,6 @@ export const MessageInputLeadingView = () => {
 const styles = StyleSheet.create({
   giphyContainer: {
     padding: primitives.spacingXs,
+    alignSelf: 'flex-end',
   },
 });