Touchables

    In React Native, most "buttons" are actually implemented using Touchable components.

    Like Button, these components support an onPress prop. However, unlike Button, these components support custom styling - essentially a Touchable is a View that can be pressed.

    Touchables have a variety of other props, like onPressIn and onPressOut, which give us more control over the behavior of the button. We can use these props to run custom animations. We'll cover custom animations later in the animation section.

    Kinds of Touchable

    Although we can run custom animations, most of the time, we use one of 2 built-in animations: a fade in opacity, or a change of color. There are preconfigured touchable components for each of these: TouchableOpacity and TouchableHighlight.

    If we do want to write a custom animation, we'll typically use TouchableWithoutFeedback, since it doesn't have any built-in animation. If we want to support the native Android "ripple" effect, we'll use TouchableNativeFeedback.

    Want to learn React Native in-depth?

    If you like React Native Express, you'll love my new book, Fullstack React Native: The complete guide to React Native! Throughout the book, we'll build 7 full apps, covering complex topics like navigation, gestures, and native modules. We don't assume any knowledge of React or newer JavaScript language features, so you can dive right in regardless of your experience level. The book comes in PDF, EPUB and MOBI formats.

    Looking for more help?

    Infinite Red sponsors React Native Express and is the premier React Native agency. They're also the team behind the React Native newsletter, podcast, and conference listed here. Get in touch at infinite.red/react-native for a proposal on your next project!