feat(ref): expose textinput ref

Author: Johan-dutoit

README.md

@@ -321,6 +321,8 @@ interface QuickReplies {
 
 ## Props
 
+- **`messageContainerRef`** _(FlatList ref)_ - Ref to the flatlist
+- **`textInputRef`** _(TextInput ref)_ - Ref to the text input
 - **`messages`** _(Array)_ - Messages to display
 - **`isTyping`** _(Bool)_ - Typing Indicator state; default `false`. If you use`renderFooter` it will override this.
 - **`text`** _(String)_ - Input text; default is `undefined`, but if specified, it will override GiftedChat's internal state (e.g. for redux; [see notes below](#notes-for-redux))
@@ -408,10 +410,6 @@ interface QuickReplies {
 * **`shouldUpdateMessage`** _(Function)_ - Lets the message component know when to update outside of normal cases.
 * **`infiniteScroll`** _(Bool)_ - infinite scroll up when reach the top of messages container, automatically call onLoadEarlier function if exist (not yet supported for the web). You need to add `loadEarlier` prop too.
 
-## Imperative methods
-
-- `focusTextInput()` - Open the keyboard and focus the text input box
-
 ## Notes for [Redux](https://github.com/reactjs/redux)
 
 The `messages` prop should work out-of-the-box with Redux. In most cases, this is all you need.

src/GiftedChat.tsx

@@ -55,6 +55,8 @@ dayjs.extend(localizedFormat)
 export interface GiftedChatProps<TMessage extends IMessage = IMessage> {
   /* Message container ref */
   messageContainerRef?: React.RefObject<FlatList<IMessage>>
+  /* text input ref */
+  textInputRef?: React.RefObject<TextInput>
   /* Messages to display */
   messages?: TMessage[]
   /* Typing Indicator state */
@@ -259,6 +261,7 @@ function GiftedChat<TMessage extends IMessage = IMessage>(
     minComposerHeight = MIN_COMPOSER_HEIGHT,
     maxComposerHeight = MAX_COMPOSER_HEIGHT,
     messageContainerRef = createRef<FlatList<IMessage>>(),
+    textInputRef = createRef<TextInput>(),
   } = props
 
   const isMountedRef = useRef(false)
@@ -269,7 +272,6 @@ function GiftedChat<TMessage extends IMessage = IMessage>(
   const actionSheetRef = useRef<ActionSheetProviderRef>(null)
 
   let _isTextInputWasFocused: boolean = false
-  let textInputRef = useRef<TextInput>()
 
   const [state, setState] = useState<GiftedChatState>({
     isInitialized: false, // initialization will calculate maxHeight before rendering the chat
@@ -643,7 +645,7 @@ function GiftedChat<TMessage extends IMessage = IMessage>(
       onTextChanged: _onInputTextChanged,
       textInputProps: {
         ...textInputProps,
-        ref: (textInput: any) => (textInputRef = textInput),
+        ref: textInputRef,
         maxLength: state.typingDisabled ? 0 : maxInputLength,
       },
     }