React Native - How to find out which key is being pressed
Post by: Niraj Dhungana
Posted on: Nov 12 2021
#React Native# Expo
Recently I was working on a React Native project and inside that project I wanted to track which key was being pressed. I didn't want to track every key press, but in particular I wanted to track "backspace".
If you go to React Native’s official documentation and search for TextInput then there are lots of props which we can use inside TextInput. But most of us don't care about those props. There are more than 40 to 50 props which we can use inside the TextInput component.
So, in this post I am sharing my experience with you on how I tracked which key is being pressed and which prop I used.
The prop to find out which key is being pressed
There is a prop called onKeyPress which we can use to track which key is being pressed inside the React Native TextInput component.
How it works
You can simply use onKeyPress prop like onChangeText prop inside TextInput component. It's a callback function like we can pass inside onChangeText prop.
But inside this callback you will get an object. From that object we can destructure nativeEvent and inside that nativeEvent object we will get key information.
Let’s see that in action.
Note: This does not work for number input type.
- React Native Multi Select on Long Press - Touchable Opacity.
- How to Setup react-native-cli and Android Emulator on Windows
- How to Compress or Manipulate Images in React Native Expo
- RecyclerListView – React Native Everything You Need to Know
- React Native Android Emulator - "could not compile settings file"