How to Control the Transparency of a Color in React Native
- Setting the Color Values in React Native
- The Accepted Color Representations in React
- Specify Opacity of a Color in React
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 is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn