Giving touch feedback
The React Native examples you've worked with so far in this book have used plain text to act as buttons or links. In web applications, it's pretty easy to make text look like something that can be clicked—you just wrap it with the appropriate link. There's no such thing as mobile links, so you can style your text to look like a button.
Note
The problem with trying to style text as links on mobile devices is that they're too hard to press. Buttons provide a bigger target for my fat fingers, and they're easier to give apply touch feedback on.
So, let's style some text as a button. This is a great first step, making the text look touchable. But, we also want to give visual feedback to the user when they start interacting with the button. React Native provides two components to help with this: TouchableOpacity
and TouchableHighlight
. But before we dive into the code, let's take a look at what these components look like visually when users interact with them, starting with...