Understand the Touchables in React Native

Instructor: [00:00] First, we will import the Touchable components into our project. Let's go down to our render method, and add TouchableOpacity to the child view component that will serve as our header.

[00:11] We'll add an image, assign a value for the styles that we will create shortly, and for the source, we will require an image that exists in our local directory. For the image, we'll set an explicit height and width of 42 pixels. Let's not forget to import the image component into the project.

[00:31] Let's run the application, and tap the component. Notice the feedback that we receive when we tap the hamburger icon. The button dims, revealing the content beneath it. TouchableHighlight provides feedback that is akin to that which you would expect to find in a basic button.

[00:51] We'll add a TouchableHighlight component to the header. We'll add an image, and just as we did with TouchableOpacity, we will assign values for the style and source props. We need to add the corresponding CSS for styles. [inaudible] . Again, we will go down to our style sheet and add the necessary styles.

[01:14] Let's assign a value to the style prop of the Touchable. We will add another prop that will yield a more explicit feedback display. The underlay color will be revealed when we press down on the component, and the opacity of the wrapped view decreases.

[01:29] Touchables do provide button-like functionality that we can apply to custom views. However, they do not provide any default styling, so we need to add our own. To that end, I have assigned values for the background color, border radius, border color, and border width.

[01:46] When we run the application, and tap the TouchableHighlight component, you will notice that we do not receive the feedback that we expected. This is due to the fact that Touchables require an event handler for either the onPress or onLongPress prop.

[02:02] For the purposes of this lesson, we will add an event handler for the onPress prop. We will add a method that will simply log a string to the console. Again, this is a necessary step to ensure that the component displays feedback.

[02:17] We need to fix a typo here, and we'll fix a typo here. When we run the application again, and tap the TouchableHighlight component, you will see that the underlay color is now visible when we press down.

[02:31] TouchableWithoutFeedback, as the name indicates, does not elicit any feedback by default. This provides an opportunity for you to create truly unique experiences, by building your own custom feedback implementations that can be added to custom view components.

[02:46] I'm adding a TouchableWithoutFeedback component outside of the header, to ensure that it renders on the map as an overlay. To make this happen, we need to add a property to the component's state. We will name the property has-visited, and give it an initial value of false.

[03:03] Let's go back to our render method, and unpack the value of state.has-visited, using the ES6 destructuring assignment syntax. Within TouchableWithoutFeedback, we will create a ternary statement, which will render the correct image component based on the value of state.has-visited.

[03:26] Let's go back to our style sheet, and add height and width properties for the toggled image. Let's run the application. When we tap on the component, the image does not toggle as expected. This is due to the fact that we need to add an event handler to TouchableWithoutFeedback, just as we did with TouchableHighlight.

[03:50] Let's add our event handler. OnTouchableWithoutFeedback, press, and here, what we will do is this.setState will update the value of has-visited. Essentially, what we're going to do is toggle the Boolean. If state.has-visited is true, we set that to false, and vice versa.

[04:17] OnPress, when we run the application, when we tap the component, we should expect to see the image toggle, and it does.