React native onKeyPress is not working?

Question

I have just placed TextInput KeyboardType ={"numeric"} just trying to find weather user enter '-' if means I have to event.preventDefault() in OnChange first.Later tried in onKeyPress but onKeyPress is not trigerring , I was just tried to do that but it allowing me to type shows warning Synthetic Event Performance issue.

guys help me .

on which platform you are testing? – Jigar Shah Jul 27 '17 at 06:38 — Jigar Shah, Jul 27 '17 at 06:38
are you testing with Android emulator? – Jigar Shah Jul 27 '17 at 06:55 — Jigar Shah, Jul 27 '17 at 06:55

Jigar Shah · Answer 1 · 2018-10-18T09:47:30.723

10

You are testing with android mobile whereasonKeyPress method is for iOS, check documentation for same

You can use onChangeText for text change.

Example:

<TextInput
    onChangeText={(text) => this.onFirstNameText(text)}
    returnKeyType={'next'}
    underlineColorAndroid='transparent'
    style={styles.inputColLeft}
/>

Edit 2018

onKeyPress is now also supported for Android devices as per this commit.

From doc:

Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs.

edited Oct 18 '18 at 09:47

answered Jul 27 '17 at 07:02

Jigar Shah

6,143
2
28
41

not used yet, but do you need that?, to validate numbers only you can check : https://stackoverflow.com/questions/32946793/react-native-textinput-that-only-accepts-numeric-characters – Jigar Shah Jul 27 '17 at 07:17
onKeyPress now support Android. – Vahid Kharazi Oct 18 '18 at 08:51
For Android, it only support default keyboard, for non-default keyboard such as 'numeric', it won't work – Solar1407 Sep 23 '20 at 08:38

score 2 · Answer 2 · answered Aug 05 '19 at 03:59

2

Here is the solution to this issue of synthetic event:

Input element:

<Input onKeyPress = {this.keyPress} />

keyPress function

keyPress = (event) => {

/* this line will solve your error */

event.persist();
console.log(event);
}

answered Aug 05 '19 at 03:59

Fahad Mahmood

159
1
10

score 2 · Answer 3 · answered May 06 '21 at 07:41

 const App =()=>{
  const  handleKeyPress = ({ nativeEvent: { key: keyValue } }) => {
      console.log(keyValue);
      if(keyValue === 'Enter')
      {
        console.log("enter");
      }
  };
  return(
    <View>
         <TextInput
            placeholder="Your Password"
            placeholderTextColor="#666666"
            style={styles.inputSearch}
            // onEndEditing={(e)=>handleValidUser(e.nativeEvent.text)}
            onKeyPress={handleKeyPress}
          />
    </View>
  )
}

score 1 · Answer 4 · answered Jul 27 '17 at 08:40

Use onChangeText like this:

<TextInput  onChangeText = {(text) => this.getPhone(text)} keyboardType="numeric" autoCapitalize="none" autoCorrect={false} onSubmitEditing={ () => this.addressInput.focus()} style={styles.input} placeholder="phone" placeholderTextColor="rgba(255,255,255,0.6)" underlineColorAndroid="rgba(0,0,0,0.0)" returnKeyType="next"/>

 getPhone = (text) => {
      this.setState({phone: text})
      //use your logic here 

   }

React native onKeyPress is not working?

4 Answers4