Create a Button in React Native Using the Button Component

Create a Button in React Native Using TouchableOpacity

Customize Button Pressed State Using the React Native v0.63 Pressable Component

Creating Buttons in React Native with Three Levels of Customization

You'll learn how create a button using the built-in Button component, handle the onPress event, disabled state, and button colour. While doing so we will explore the TypeScript ButtonProps interface that defines the options available to you.

The Button component is built into React Native, and is the quickest way to add interaction to your application as it can handle both the button text, and the onPress event in one component.

The downside of the Button component is that it's not very configurable: other than setting the text colour and disabled state, you won't be able to customise much else when it comes to the look and feel of the button.

Good to use for prototyping, and building quick UIs.

Instructor: [0:00] The quickest way to get started with buttons in React Native is using the inbuilt Button component. Let's import Button from React Native, and let's render it. To render it, the only prop you really need is the title. In our case, let's pass in title Simple Button.

[0:18] If I save this, you can see a button has appeared. I can press it, but when I press it, nothing is happening. That's because we're not actually handling the onPress event.

[0:27] Let's do this now. onPress, and I'm going to render an Alert onPress, so I'm going to import an Alert from React Native. I need to pass in an arrow function with Alert.alert Simple Button Pressed. If I save this, you can see the alert is being triggered.

[0:47] If you're using VS Code, you can command click into the button. You can see the touch with definition for the button props. We've already used the title and the onPress. Let's have a look at some of the other ones.

[1:01] If I add the disabled prop, you can see the button has turned from blue to white. When I press it, the onPress event no longer gets called. If I remove it, the button goes back to normal.

[1:16] For color, we can pass in any Hex or Web color. In our case, we're going to do pink. Now, you can see that the button has gone from the default blue to pink. When I press it, the alert is still being triggered.

[1:29] This inbuilt Button component, although not very flexible, is the quickest way to add interaction to your application.

Course

Creating Buttons in React Native with Three Levels of Customization

Create a Button in React Native Using the Button Component

Share this video with your friends