Create a Button in React Native Using the Button Component
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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!