Make a Touchable Button in React Native
Touchable buttons are all over mobile applications, so we’ll look at how to make a few different styles of buttons in React Native. Unlike on the web, not every component type accepts an onPress prop, so we’ll look at how to wrap other components in a Touchable element in order to make a button.
Pressable components
There are many options for wrapping components that should be pressable. The main ones are <Button />, <TouchableOpacity />, <TouchableWithoutFeedback />, <TouchableHighlight /> and <Pressable />.
🤔There are varying levels of customizability with each option, however, the React Native docs now recommend to use the <Pressable /> component for attaching press handlers to any components, unless you have a really good reason not to.
New components
🤔<Button /> - very basic component for making something pressable. Not very customizable.
🤔<TouchableOpacity /> - used for wrapping components that should be pressable.
🤔<TouchableWithoutFeedback /> - should be avoided unless necessary. Does not provide visual feedback which is helpful for accessibility.
🤔<TouchableHighlight /> - used to wrap components that should be pressable.
🤔<Pressable /> - React Native docs recommend using this to wrap any components that you would like to be pressable.