How to Control the Transparency of a Color in React Native

Irakli Tchigladze Feb 02, 2024
  1. Setting the Color Values in React Native
  2. The Accepted Color Representations in React
  3. Specify Opacity of a Color in React
How to Control the Transparency of a Color in React Native

React is one of the most popular frameworks for developing modern web applications.

The good news is developers familiar with this framework can apply their skills to create powerful mobile apps using the React Native library.

Using this JavaScript framework to build an entire mobile application or add React Native bits to an existing application.

Setting the Color Values in React Native

The framework wouldn’t be so popular if it didn’t allow developers to apply custom styles. This article will discuss various app elements using color and backgroundColor properties.

The Accepted Color Representations in React

The most popular way to represent color values is to use Red, Green, Blue formats. Most developers either write the rgb() function or a different hexadecimal value representing a specific color.

All browsers support these color representations. You can also use them when developing a React Native application.

Let’s see how we can use the rgb() function to represent color values:

div {
    background-color: rgb(100, 100, 100) 
    }

The rgb() function takes three arguments: numbers 0 to 255. Each argument represents a shade of three colors: red, green, and blue.

The higher the number, the darker the shade. For instance, 0 is the absence of color, white. In contrast, 255 is the darkest shade of color.

React Native also allows you to specify the color using the hexadecimal color value. For instance:

div {
    background-color: #ff00ff 
}

In this case, the order of colors is still the same: red, green, and blue. However, these are hexadecimal numbers, ranging from 00 (white) to FF.

Alternatively, you can also use shorter hexadecimal values consisting of three symbols. React Native also permits HSL, color numbers, and even named colors.

Look at [this guide](https://React Native.dev/docs/colors#color-representations) to get specific information. There are dozens of named colors you can use.

To see full list, visit [this page](https://React Native.dev/docs/colors#color-keywords).

Specify Opacity of a Color in React

In writing styles in a React Native application, there are the right and wrong ways to specify the opacity of a color. The wrong way is to use the opacity CSS property.

It’s terrible because it affects the transparency of the entire view, including any texts or images.

If you want to specify the opacity of background color, you should use the rgba(), which is slightly different from rgb() function.

It accepts four arguments instead of three. The first three arguments are the same, but the last one specifies the opacity as a decimal value. Let’s look at an example:

div {
    background-color: rgba(200, 200, 200, 0.3)
}

The decimal value can be anything from 0 to 1. In this case, our background will be 30% colored and 70% transparent.

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn