React Native TextInput does not get focus

Question

I have this simple code of a TextInput that I want it to get focus when it first renders and on submits. However, it does not get focus at all.

render() {
    return (
      <TextInput
        ref={(c) => this._input = c}
        style={[styles.item, this.props.style]}
        placeholder={"New Skill"}
        onChangeText={(text) => {
          this.setState({text})
        }}
        onSubmitEditing={(event) => {
          this.props.onSubmitEditing(this.state.text);
          this._input.clear();
          this._input.focus();
        }}
      />
    );
  }

  componentDidMount() {
    this._input.focus();
  }

Oh hey sorry about my wording. I want it to get focused but it does not. — bleepmeh
– bleepmeh, Commented Oct 12, 2017 at 18:37
change this ref={(c) => this._input = c} to ref={(c) => { this._input = c }} and see if its gonna work — bennygenel
– bennygenel, Commented Oct 12, 2017 at 18:38
could you try to wrap focus inside setTimeOut function like: setTimeout(() => this._input.focus(), 250); — I Putu Yoga Permana
– I Putu Yoga Permana, Commented Oct 13, 2017 at 3:37

I Putu Yoga Permana · Accepted Answer · 2017-10-14 04:24:14Z

22

So my assumption is true. Try to focus is failed, this._input doesn't contain anything when componentDidMount called, because render function still not called yet and no reference for it.

So the solution for now is delay it a little bit until render function already called.

Thats why wrap the code inside setTimeout function quite helpful. Anyway i admit it, it is a little bit tricky. Would be great if someone find the better way.

componentDidMount() {
   setTimeout(() => this._input.focus(), 250);
}

answered Oct 14, 2017 at 4:24

I Putu Yoga Permana

4,2301 gold badge32 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michael Wallace Over a year ago

Thanks! Your solution is the unique i found to be working. But componentDidMount() is called after the render() method, so your explanation is wrong. Also, you can set the timeout to 0 and the solution still works. I am very curious about the reason behind this behavior.

Kyle Rohlfing Over a year ago

Has anyone tested this with iOS, or specifically iOS - Web... I've tried this approach and it works great for android and android - web but doesn't seem to work for iOS or iOS - web.

Sinapcs · Accepted Answer · 2017-10-14 08:23:00Z

2

You can use autoFocus property of TextInput and set it to true. It will focus TextInput on componentDidMount automatically.I tested it and it's focusing input on both componentDidMount and onSubmitEditing.

render() {
return (
  <TextInput
    ref={(c) => this._input = c}
    placeholder={"New Skill"}
    autoFocus={true}
    onChangeText={(text) => {
      this.setState({text})
    }}
    onSubmitEditing={() => {
      this.props.onSubmitEditing(this.state.text);
      this._input.clear();
      this._input.focus();
    }}
  />
);
}

edited Oct 14, 2017 at 8:23

answered Oct 14, 2017 at 7:10

Sinapcs

2,7551 gold badge22 silver badges25 bronze badges

Comments

Joe Rush · Accepted Answer · 2023-08-19 17:59:49Z

0

Add this

  const inputRef: LegacyRef<TextInput> = useRef(null);
  useEffect(() => {
    if (inputRef.current) {
      setTimeout(() => {
        inputRef.current?.focus();
      }, 0);
    }
  });

answered Aug 19, 2023 at 17:59

Joe Rush

1371 silver badge4 bronze badges

Collectives™ on Stack Overflow

React Native TextInput does not get focus

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related