2.4 User Interaction and Event Handling

Hi, and welcome back to Get Started with React Native. In this lesson, I'm going to teach you about handling events by using text inputs and buttons as examples. Actually, you already know about events. Remember the ref callback from last lesson? That was basically an event that gets called when a component is mounted. But of course, you normally want React to use the input or after receiving data from the network. Let's have a look at text input. The most basic callback is onChangeText. Which gets called when the text changes. This makes for very immediate feedback, but sometimes you don't want to change anything until those changes are confirmed. For instance, by submitting a form or leaving the input field. In these cases, there are callbacks like onSubmitEditing or onBlur that you can utilize. Text input is a very versatile and powerful component that can mimic the Native equivalent very well. For example, it allows for auto-capitalization, different keyboard types, different return key types and so on. Text input isn't the only interaction your app can have with the user. Another one that is almost as common as text is buttons. Except that you don't just define buttons in React Native. You define touchable areas that can be text, images, or other stuff. Let's look at an example button component. It uses TouchableHighlight to define the interactive area. It also has an onPress callback. This event handler is called when the area was touched. There is also a callback for long touches called onLongPress. What you put within your TouchableHighlight is up to you. It behaves similar to a view except that it allows for user interaction. Here, it's just a simple button text. If you need more elaborate interaction handling like swipes, pans and zooms, check out the Gesture Responder System of React Native. Now it's time to try it out in our course project. This will only be a temporary example, but I wanted to show you something from start to finish. I'm going to use our fake MAPVIEW as an area to display our sample text. So let's remove MAPVIEW and display the contents of this.state.text. Right above it, I'm going to add a TextInput which needs to be imported at the top. I'm also going to add some styles, so it's better visible. Okay, let's add some properties. I'm going to add a place holder so we know where to touch. As well as the onChangeText method. Within the callback, I'm going to set the state to the input text. When I start typing in the simulator, you can see the text change as I type. For fun, let's also add auto-capitalization to "words" and then onBlur callback. That changes the setState text to all caps. Now when I type in lowercase, the words automatically get capitalized. When I hit Enter, I'll leave the input and the text gets converted. Finally, let's also add a button to the project that we need to press before the changes get applied. I'm going to add the TouchableHighlight class to the imports, and then use it below the input field. And add a text saying Press Me!, as layer label. Instead of state.text, we're going to display state.confirmedText. In the TouchableHighlight component, I'm going to add an onPress callback which sets the state property confirmedText to the value of text. And a long press callback that does the same, but converts the text to lowercase first. Let's try it out. When I type some uppercase text into the input, it won't show up. After I press the button, it does. When I press the button longer, it changes to all caps. And these are the basics on how to do user interaction and event handling in React Native. Pretty easy, right? To recap, events are triggered by the component and handled by a callback function passed by the parent component. TouchableHighlight is the best way to create buttons and interactive components. To use more advanced input methods like gestures, use the Gesture Responder System. In the next lesson, we are going to take a small detour from the example project and talk about two important components that you most certainly want to use in your project, ScrollView and ListView. See you there.