react-nativereact-native-gifted-chat

How do you autofocus the input box in react-native-gifted-chat


I'm using the gifted chat library and want to autofocus on the input with the keyboard up on initial render. I see that there is an imperative function focusTextInput but how do I call it?

<GiftedChat
  {...props}
  messages={this.state.messages}
  ref={(chat) => this.chat = chat }
  onSend={messages => this.onSend(messages)}
  user={{
      _id: 1,
  }}
/>

Github Repo

I tried setting the ref and calling it directly on did mount but that didn't work.


Solution

  • Since the library already has textInputProps

    textInputProps (Object) - Extra props to be passed to the TextInput

    Therefore you can use autoFocus prop of the TextInput

    <GiftedChat
          textInputProps={{autoFocus: true}}
          messages={this.state.messages}
          onSend={messages => this.onSend(messages)}
          user={{
                 _id: 1,
           }}
      />