CODEWITHSUNDEEP
react-native
saiRam89
saiRam89

Reputation: 375

React native onKeyPress is not working?

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 .

Upvotes: 6

Views: 20645

Answers (4)

Apple Yellow
Apple Yellow

Reputation: 307

 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>
  )
}

Upvotes: 2

Fahad Mahmood
Fahad Mahmood

Reputation: 159

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);
}

Upvotes: 2

Jigar Shah
Jigar Shah

Reputation: 6223

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.

Upvotes: 10

Farrukh Hashmi
Farrukh Hashmi

Reputation: 76

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 

   }

Upvotes: 1

Related Questions