How to Style the Button Component in React Native

1. Styling Buttons in React Native vs. ReactJS
2. How to Style Button Component in React Native
3. The Indirect Way to Apply Styles to React Native Button Components
4. Customizable Button Components in React Native

React Native allows JavaScript developers to write smartphone applications without the knowledge of native languages, such as Java or Swift. It gives you the freedom to customize the UI interfaces of the apps as much as you want.

This article aims to dig deeper into Button components in React Native. We will attempt to show how they work and how to customize their appearance.

Styling Buttons in React Native vs. ReactJS

React Native uses a slightly different approach to rendering components. Every visual element displayed on the screen is called a view, and it can contain other views.

Typically mobile applications are written in native languages. There are different languages for writing apps for Android and iOS.

As a small business or an individual web developer, you might want to put together a mobile application quickly. Still, it might not be practical to hire multiple developers to write apps for both platforms.

React Native solves that problem and allows you to write applications directly in JavaScript.

Under the hood, these UI elements will ultimately translate to native code. Because of this factor, the user experience of React Native apps is just as good as those written in native languages.

Certain components that are the essential building blocks of mobile applications are readily available in React Native framework. You can also use more components beyond these core components, creating custom native components yourself or using native components from the [React Native community](https://React Native.directory/).

You’re likely to use these core components in React Native as building blocks for the UI of your application. Here is a shortlist of these core components: <Text>, <View> <Image>, and more.

This article will explore the <Button> component, an important part of the UI, and the easiest way for users to provide their input.

How to Style Button Component in React Native

React Native button is different from the custom Button components you create on the web. It has a different API, and it’s styled differently.

It does not accept the style prop as you might expect. Also, if you want to set the text to the button, you have to use an approach different from ReactJS.

Let’s look at how to set a button text in React Native.

<Button title="Some button text" />

In addition to the title attribute, the <Button> core component also accepts the color attribute. React Native developers can use that attribute to change the button’s color.

Let’s take a look at an example.

<Button title="Some button text" color="red" />

In this instance, the button will be red. You can also set the disabled attribute to make the color grey and limit its use.

These are the only attributes you can use to style the <Button> component in React Native. As you can see, there aren’t many options for customizing the appearance of a button.

The Indirect Way to Apply Styles to React Native Button Components

The <Button> component in React Native does not accept a style attribute. However, you can add more styles by wrapping the <Button> component with a View component, which does accept style.

It gives you some freedom to have margin, padding, and other styles. Let’s take a look at an example.

<View style={{marginTop: 50}}><Button title="Some button text" color="red" /></View>

In this example, we use the <View> component as a container for the button. When developing web applications, you sometimes have to use a <div> HTML element to wrap around other elements.

Since the <View> component does accept the style attribute, you can set the value of this attribute to a style object. The style attribute works the same way in ReactJS.

Customizable Button Components in React Native

<TouchableOpacity> is another core component used to respond to the user’s actions, such as a tap on the screen. It works very similarly to a button and accepts the style attribute, giving you more freedom to style it.

To learn more about this component and what you can do with it, read [official React Native docs](https://React Native.dev/docs/touchableopacity).