 Resources from Kadi Kraman in 2021

How to create buttons in React Native depending on the level of desired customisability: the quick and simple Button, a more customisable Touchable, and the most customisable Pressable.

Button component is useful for quick prototyping.

TouchableOpacity is the most common way of creating buttons and other touchable areas, and is suitable for most use cases.

Pressable gives you the most control over the look and feel of your button, including customising the pressed state and text, as well as handling long presses separately from regular presses.

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

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.

Create a Button in React Native Using the Button Component

Create a button in React Native using Text and TouchableOpacity, and customise the look and feel of your button using the style prop and activeOpacity.

Using TouchableOpacity is of the most commonly used ways of building buttons in React Native. It is much more versatile than the built in Button component: you can wrap anything (an Image, View, Text etc) in a TouchableOpacity, to make it into a button, and add any styles for both the button container as well as the children to customise them.



Create a Button in React Native Using TouchableOpacity

Create a button in React Native using Text and Pressable, customise the look and feel of your button and text depending on the pressed state, and handle long presses separately to regular presses.

The Pressable component, released in React Native 0.63 is a relatively recent addition to the library. It is by far the most versatile way of creating buttons. With Pressable, you get access to the pressed state which is a boolean value that indicated whether the button is currently being pressed or not. This value can be used to render a different button style or text depending on the pressed state. You can also pass in functions that get triggered when the button was pressed and released, and handle long presses separately from regular presses.

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

How to create an app icon from scratch, generate the required sizes, and add to your iOS app.

Image editing - [Figma](https://www.figma.com/) is a free online design tool used in the video. You can use any design tool you like, such as Photoshop, Sketch etc, as long as the output is a 1024x1024 .png image.

Asset generator - [Iconizer](https://raphaelhanneken.com/iconizer/) is a free mac app for generating the correct sized assets from your icon.

Topics

Instructors

Content Type

Kadi Kraman

Creating Buttons in React Native with Three Levels of Customization

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

Design and Add a Custom App Icon with Figma to Your React Native iOS App