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.
Instructor: [00:00] In restaurant row.js, import button from React native. We can use that button to make the info text tappable. We can replace the info text with a new button and the React native button takes a title prop.
[00:16] We'll put the info label there. If we view that, then we can see a basic info link. It's getting wrapped. Let's first add a mean width to the adjust view which looks better. This button component doesn't have many configuration options unfortunately though, but we can set a color and an accessibility label, and we can set an onPress function.
[00:49] Let's make that onPress function. When the button is pressed, let's toggle a bit of state to show some additional info. Then, we can use that state to show we're hired in info box in the row.
[01:06] Let's rearrange the views a bit, so the info box shows up in the row. When we reload, the buttons work. This button component from React native works just fine, but the customizability is very limited.
[01:19] Let's replace it with the fully customizable touchable element. If we switch back to adjust a text field, we'd like to be able to press on that label, but unlike the web, not every component is pressable in React native, instead import touchable opacity, touchable highlight, and touchable without feedback.
[01:39] We can start by wrapping the text in the touchable opacity component, and that touchable component does allow tabs. We can use onPress again to call our info pressed method, and that works.
[01:56] We can now style that touchable opacity just like any other view. However, one difference from the web is we can't style the text by setting the style on the outside component.
[02:14] If we try, then nothing happens. Remember that you have to style the text separately. Now, we have a fully customized and style tappable button. We use touchable opacity and you can see when we tap the button, it changes the opacity to signify the click.
[02:41] If you don't like that, you can try one of the other touchable components that we imported. First, we'll look a touchable without feedback. The first thing to notice is that the button styles don't show up.
[02:52] That's because, touchable without feedback is meant wrap existing components. If we tap those buttons, they work as buttons, but you'll see no feedback as you tap them. This is the option that you want to use, if you want no automatic visual feedback for the tab. Finally, we'll switch to touchable highlight. When we reload, the styling is back.
[03:14] When we press the buttons, we see visual feedback, but it turns the background black, as we press it. To customize the touch color, make sure to set the underlay color on a touchable highlight.
[03:27] Once we do that, we finally have a style button with a customizable tab color. We'll stick with that. Let's add just a bit of styling on the info view. Now, we have style buttons and a style view that we can toggle ON and OFF.