Search code examples
react-nativekeyboardtextinputautofocus

Keyboard isn't shown upon TextInput autoFocus [react native]


I have this reply button in my app where when a user press it, it will change the TextInput autoFocus to true. I set the autoFocus value to false as default value and keep it in a state. I see the state will change to true but it doesn't open the keyboard.

This is my TextInput :

<TextInput
    autoFocus={this.state.textInputFocus}
    selectTextOnFocus={true}
    ref={ref => this.textInputRef = ref}
    multiline = {true}
    placeholder="Write a comment ..."
    onChangeText={(postComment) => this.setState({postComment})}
    value={this.state.postComment} />

Here is the function to change the state when reply button is pressed :

_openReplyBox(comment_id, commenter){
    this.setState({ postComment: commenter, textInputFocus: true })
}

Solution

  • Accordinig to docs:

    autoFocus: If true, focuses the input on componentDidMount. The default value is false

    You can use refs to achieve the same functionality.

     <TextInput
            ref={"textRef"}
            ...
          />
    

    In openReplyBox:

    _openReplyBox(comment_id, commenter){
        this.refs.textRef.focus();
        this.setState({ postComment: commenter})
    }