0
<TextInput onFocus={this.state.userInputFocus} />

I want to enlarge the area of focus of the textinput. So, when the user presses textLabel, the cursor should focus on textinput. I created a state this.state.userInputFocus as false. Then I added onpress function to Text Label.

  <Text onPress={this._onPress} >Username:</Text>

onPress function works for console.log and makes state.userinputfocus true but it won't focus on textinput.

_onPress = () => {
 this.state.userInputFocus= true;
 console.log('pressed');
 console.log(this.state.userInputFocus); //it turns true when pressed
 
}
Chinez
  • 551
  • 2
  • 6
  • 29
nogabemist
  • 402
  • 5
  • 29
  • You need to update state in order to re-render component and to do that please use setState. Secondly, onFocus is a callback fired when text input is focused.To put a focus on a Text input you should use ref, a starting point could be https://stackoverflow.com/questions/32748718/react-native-how-to-select-the-next-textinput-after-pressing-the-next-keyboar – Sameer Kumar Jain Jun 08 '21 at 19:16
  • Which method I can use for ref? I used this.refs.usernameInput.focus() it works but it says ref is deprecated. – nogabemist Jun 08 '21 at 19:42
  • createRef if you are using class component more details here https://reactjs.org/docs/refs-and-the-dom.html#callback-refs – Sameer Kumar Jain Jun 08 '21 at 19:48

0 Answers0