How it works...

In step 2, we imported the TouchableHighlight component. This is the component responsible for handling the touch event. When the user touches the active area, the content will be highlighted based on the underlayColor value we have set.

In step 3, we defined the state of Component. In this case, there's only one property on the state, but we can add as many as needed. In Chapter 3, Implementing Complex User Interfaces – Part I, we'll see more recipes about handling the state in more complex scenarios.

In step 6, we used the setState method to change the value of the liked property. This method is inherited from the Component class that we're extending.

In step 7, based on the current state of the liked property, we used the styles to set the color of the image to red or we returned undefined to avoid applying any styles. When assigning the styles to the Image component, we used an array to assign many objects. This is very handy because the component will merge all of the styles into one single object internally. The objects with the highest index will overwrite the properties with the lowest object index in the array: