fix: usage of text input

Author: khushal87

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -36,7 +36,11 @@ type AutoCompleteInputPropsWithContext = TextInputProps &
      * that would happen if we put this in the MessageInputContext
      */
     cooldownActive?: boolean;
-    TextInputComponent?: React.ComponentType<TextInputProps>;
+    TextInputComponent?: React.ComponentType<
+      TextInputProps & {
+        ref: React.Ref<RNTextInput> | undefined;
+      }
+    >;
   };
 
 type AutoCompleteInputProps = Partial<AutoCompleteInputPropsWithContext>;
@@ -53,7 +57,14 @@ const configStateSelector = (state: MessageComposerConfig) => ({
 const MAX_NUMBER_OF_LINES = 5;
 
 const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext) => {
-  const { channel, cooldownActive = false, setInputBoxRef, t, TextInputComponent, ...rest } = props;
+  const {
+    channel,
+    cooldownActive = false,
+    setInputBoxRef,
+    t,
+    TextInputComponent = RNTextInput,
+    ...rest
+  } = props;
   const [localText, setLocalText] = useState('');
   const [textHeight, setTextHeight] = useState(0);
   const messageComposer = useMessageComposer();
@@ -114,12 +125,8 @@ const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext)
     [],
   );
 
-  if (TextInputComponent) {
-    return <TextInputComponent {...rest} />;
-  }
-
   return (
-    <RNTextInput
+    <TextInputComponent
       autoFocus={!!command}
       editable={enabled}
       maxLength={maxMessageLength}

package/src/components/MessageInput/MessageInput.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Modal, SafeAreaView, StyleSheet, TextInputProps, View } from 'react-native';
+import { Modal, SafeAreaView, StyleSheet, TextInput, TextInputProps, View } from 'react-native';
 
 import {
   Gesture,
@@ -153,7 +153,11 @@ type MessageInputPropsWithContext = Pick<
   Pick<TranslationContextValue, 't'> &
   Pick<MessageComposerAPIContextValue, 'clearEditingState'> & {
     editing: boolean;
-    TextInputComponent?: React.ComponentType<TextInputProps>;
+    TextInputComponent?: React.ComponentType<
+      TextInputProps & {
+        ref: React.Ref<TextInput> | undefined;
+      }
+    >;
   };
 
 const textComposerStateSelector = (state: TextComposerState) => ({