TextInput Props in React Native
Overcoming hurdles while building my first mobile game application
Recently, I have been focusing on learning to use React Native to build phone apps. Ever since I saw my classmates from boot camp build apps with React Native, I’ve been interested in at least understanding the fundamentals of React Native. I am also an active player of phone games, so I figured that building a phone game, even if it’s super simple, would be a cool project to work on.
The setup was much more complicated than I anticipated. I tried to follow the React Native documentation to set up the environment, but it wasn’t easy as steps 1, 2 and 3. It took a whole day of reading, undoing and redoing of installing things, and following different setup tutorials to finally get a working setup to get started on my game app.
In order to learn the fundamentals and get the feel for using React Native, I decided I would start by following a step by step tutorial in building a coin toss app. This tutorial helped with somewhat of an understanding of how components work in React Native and the way you can set up the navigation, whether it be using Stacks or Tabs.
After following the coin toss tutorial, I felt like the best way I could learn was to start building an app of my own. I decided to build a simple game called Text Warrior, a game that tests your texting skills.
I honestly thought that working with React Native would be easy-breezy, having built three React projects within the past few weeks. However, while working on this app, I came across so many challenges due to the differences in React and React-Native.
The main one I wanted to share is on using TextInput and a case where I had to use event.nativeEvent.text instead of event.target.value in order for my app to recognize the texts inputted onto the text box in order to check if the word matches the word to be texted out.
I think the best way I’m going to be able to explain this issue is to give you a brief explanation on how the game works.
Basically, the player has to text as many words as possible in 30 seconds.
A word will come up on the screen, and the player has to text the word into the text-box below the word. The score increments by 1 every time the player texts a word correctly.
The issue I had while working on the feature of allowing the player to text in the word is that while the web simulator was recognizing the following code:
and then calling the function inside of a TextInput component with onKeyPress={handleKeyPress}, the simulator did not react at all to the Enter/Return button.
After days of frustration in trying to figure out why it was working on the web browser but not the web simulator, and after pages of reading through questions about TextInput, nativeEvent.key, onKeyPress, etc., I decided to try replacing the onKeyPress prop with onSubmitEditing. I read that this prop was used to handle the submits of the text input. My code now looked like this:
I changed my function name to handleOnSubmitEditing to complement the prop. I also added blurOnSubmit, which is to blur the text field after submit and to trigger onSubmitEditing afterwards, which means that the keyboard on the phone doesn’t get dismissed after each time a text input is submitted so that players don’t have to drag up their keyboards for each new word.
After this modification, I was still having the same problem. The game worked on the web browser, but nothing got triggered on the simulator. I realized that I did not need the e.nativeEvent.key === ‘Enter’ portion after replacing the onKeyPress prop with onSubmitEditing, so I removed that from my handleOnSubmit Editing function. Now, I was getting the error that e.target.value was unknown.
I was again frustrated because when debugging through the web browser, e.target.value definitely existed and showed up on my console. It had to be that for some reason, the simulator didn’t recognize e.target.value. After going through pages and pages of Stack Overflow, I finally found out that e.target.value doesn’t work the same way for React Native. Instead, I could replace it with e.nativeEvent.text.
And voila! The game started working on the phone simulator like magic. I plan on being done with this app in a couple of days, so a demo of it will be coming shortly!
