CODEWITHSUNDEEP
react-native
Shrikant
Shrikant

Reputation: 334

How to read every key press on TextInput irrespective of text change

Suppose I have a TextInput component with maxLength={1} and I typed a digit (say '1'). Now the TextInput is filled and does not take any more inputs. 

<TextInput maxLength={1} keyboardType='numeric' />

At this point, I still want to find out what user is pressing on the keyboard. Let say the user is trying to press '2' but this I won't be able to identify on Android. The function onChangeText and onKeyPress doesn't work here. Because onChangeText only gets called when TextInput value changed and onKeyPress only register keys like backspace, enter but not digit keys like 1, 2. I guess onKeyPress registers all keys on iOS but not on Android.

Is there any way to know what the user is pressing on the keyboard when TextInput value doesn't change?

I'm on the following version -

Upvotes: 0

Views: 616

Answers (1)

pope_maverick
pope_maverick

Reputation: 980

i think this should be achievable through some clever coding.

  1. remove the maxLength, so as this will register all changes eg: '12345'

  2. inside handle you set the state of two variables.

eg: if the user inputs 12345, set value to be 1 and the other variable to be e.target.value.

this.state = {
 value: '',
 watch: '',
}

handleTextChange = (e) => {
 const { value } = e.target

 this.setState(prevState => {
  ...prevState,
  watch: value,
  value: value.toString().length = 1,
 })
}

this approach should work for your requirement.

Upvotes: 1

Related Questions