Hi Guys,

In this blog, I will explain you how to use onkeypress event in react native. You can easily use onkeypress event in react native. First i will create new fuction _writeText

Here, I will give you full example for simply display onkeypress event using react native as bellow.

In the first step Run the following command for create project.

expo init Onkeypress 

In this step, You will open App.js file and put the code.

import React, { Component } from 'react';
import { TextInput, StyleSheet, View , Text} from 'react-native';

export default class ButtonBasics extends Component {
  _writeText() {
    alert('Hello')
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
        <TextInput 
          style={styles.formcontrol}
          placeholder="Type here!"
          autoFocus={true} 
          onKeyPress={this._writeText}
        />
        </View>
        <Text style={styles.textinfo}>
          React Native onKeyPress Event Example MyWebtuts.com
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   justifyContent: 'center',
   backgroundColor: '#000',
  },
  buttonContainer: {
    margin: 15,
    width: 320,
   justifyContent: 'center',
  },
  textinfo:{
    fontSize: 25,
    marginTop: 20,
    marginLeft: 20,
    color:'#ffffff',
    textAlign: 'center', 
  },
  formcontrol:{
    borderWidth: 2,
    padding: 10,
    borderRadius: 5,
    color:'#ffffff',
    borderColor: '#ffffff'
  }
});

In the last step run your project using bellow command.

expo start

It will help you...