[2.4.0] textInputRef.current.focus() is not working

[davepaiva]

Issue Description

I am using the latest version of the library (2.4.0) and I am using the newly exposed textInputRef prop

Steps to Reproduce / Code Snippets

based on another state, I am want to focus the text input therefore placing the focusing logic inside a useEffect like so:

	useEffect(() => {
		...
		gcTextinputRef.current?.focus()
               ...
	}, [..., gcTextinputRef])

I have initialised like so:

....
const gcTextinputRef = useRef<TextInput>(null)
....

<GiftedChat
...
textInputRef={gcTextinputRef}
...
/>

Additionally if I console log gcTextinputRef.current it returns null

Expected Results

Expected to focus the textinput as the useEffect callback is run

Additional Information

• Nodejs version:v16.7.0
• React version: v18.1.0
• React Native version: v0.70.6
• react-native-gifted-chat version:v2.4.0
• Platform(s) (iOS, Android, or both?): both
• TypeScript version: v4.8.3

[fukemy]

you must create CustomComposer then give ref to it. for example:

const textInputRef = useRef()

renderComposer = props => {
  return <CustomComposer {...props} ref={textInputRef}/>
}


return (
   <GiftedChat 
      ...
      renderComposer={renderComposer}
    />
)

[davepaiva]

@fukemy Basically I want to use the existing textInputRef prop from gifted chat instead of creating a custom composer just so for the ref

[fukemy]

then read the library code to know why it's not working