Register for our upcoming webinar, Best practices in mobile CI/CD development with Slack, Headspace, and Bitrise
Save your seat

Color In React Native: Everything You Need to Know

Color In React Native: Everything You Need to Know

Want the latest trends in mobile development every 2 weeks? Sign up for our newsletter!

Thank you for subscribing to our blog!

gradient

Colors make any app stand out. You can implement color in mobile apps via React Native just as you would in web-based development. You have all the colors and systems from the web available. Plus, you also have access to native colors from Android and iOS. These platforms recommend certain colors, and they can make your app stand out.

In this post, we'll first look at various types of color syntax available in React Native. After that you'll learn about the two APIs for color: PlatformColor and DynamicColorIOS. Lastly, you’ll learn about a library to pick colors from.

To demonstrate all this, we'll create a simple app. To follow along, you should have a basic understanding of React Native.

waldo pull quote

The Project

For this demonstration, we'll use the React Native CLI and an iOS emulator. You’ll need to set up XCode on a Mac system; you can find the XCode setup steps in the tool's official documents.

React Native uses PlatformColor, which provide special colors. For PlatformColor, you need to run both an Android emulator and an iOS simulator.

To create a new project, run this command from the terminal:

npx react-native init RNColor

You'll see the screen below after installation finishes.

react native color basic setup

First Run on iOS

To start the project, run the npx react-native start command from the project directory.

start the project

To start the color project in the iOS simulator, run the command npx react-native run-ios.

ios simulator

Color Basics

In our project, we'll first use the four major CSS color systems:

  • the hexadecimal system,
  • the RGB (red, green, blue) system,
  • the HSL (hue, saturation, lightness) system, and
  • the named color system.

Hexadecimal System

You can use the hexadecimal system, one of the earliest color systems in CSS, the same way in React Native as on the web. But in React Native, you use single quotes.

The hexadecimal system consists of six digits, preceded by #.

Notice the difference from the binary system of 0-9, which we generally follow. The binary system is a base 10 system, but the hexadecimal system is base 16. It uses the numbers 0 to 9 and the letters A through F.

The first two digits represent the level of red, the next two represent the level of green, and the last two represent the level blue. Human eyes can only see these colors and their combinations. Each of the colors can have values from 00 to FF, where 00 indicates absence of the color and FF indicates its presence. For example, #0000FF is the color code for blue.

There is also a short-form notation of hex code, which consists of three digits only. For example, #000000 can be written as #000. This format indicates that the set of three digits repeats again (e.g., #010 = #010010).

RGB System

The RGB in the RGB system stands for the colors red, green, and blue, and uses the format rgb().

RGB values from 0 to 255 to indicate the level of each color. Now, zero means the absence of a color and 255 means the full level of a color. For example, For example, (0, 0, 255) is the RGB code for same blue color indicated by the hexidecimal code #0000FF.

HSL System

HSL stands for hue, saturation, and lightness and we format it as hsl(number, percent, percent). Here, the hue value represents the color from an RGB color wheel. If you imagine the 360 degrees of a circle divided into thirds representing red, green and blue, each degree represents some combination of all three colors. A number from 0-360 represents hue.

Saturation can range from 0-100%, where, 0% indicates a shade of gray and 100% indicates full color. Lightness can also range from 0-100%, where, 0% indicates completely black and 100% indicates completely white.

Thus, the same blue color used in the examples above can be represented in HSL as (240, 100, 50).

Named Color System

In the named color system, we give a color name directly. You can choose from 140 color names, and the complete list can be found here.

We give all color names in lowercase in React Native. For example, on the web we can give a color name as DarkMagenta, but in React Native we have to give it as darkmagenta.

The Color File

To create a color file containing all the colors used in the project, create a file called colors.js in the root directory and add the content below to it.

This defines a COLORS variable and exports it. We'll create a primary color for the text background and secondary color for the text. As with other styles in React Native, colors are also key value pairs in an object.

color file

Now, in the app.js file, let’s show a background color for our app.

First, we import the COLORS variable and access the primary color through it. The app running on the iOS simulator takes the primary color, which is defined in the colors.js file.

importing colors

Applying the Color Systems

Now, let’s add all four color systems to our project. In the root directory of the project, we can find the App.js file.

We are first creating a title text, using the Text component. After that, we will import a WebText component to your App.js file.

In the styles, we are also giving styles for the title text. Also, changing some styles for the container.

applying the color system

First create a components folder in the root directory. Next, create a file called WebText.js inside the components folder.In this file, you’ll have four text fields, one for each of the four different color systems. You’ll designate the code for each color system in the styles inside the StyleSheet.(see below).

designating color code

Using these four systems, each of four text colors and the background color, will display perfectly.

simulator

Applying PlatformColor

React Native uses PlatformColor, which has special color palates recommended by Apple and Google. Apple uses its  palate for its own apps and Google uses it's own platform-specific colors for its apps, including YouTube and Gmail. You can get the the Apple color names here and the Android colors names here.

Now, let’s use them in our app. First, change the app.js file. Inside the components folder, create a file and call it NativeText.js. Then, you’ll call a NativeText component from the App.js file.

applying platform color

Next, we'll add some new colors in the colors.js file.

Next, let’s add some new colors to the colors.js file. The color names iosPrimary and androidPrimary are special color names taken from the official documents for iOS here, and the official documents for Android here.

adding colors for ios and android

In the NativeText.js file, you first select the platform with Platform.select(), then indicate iOS specific colors with PlatformColor(); do the same for Android.

selecting platform for color indication

Open the Android emulator to see the Android colors and the iOS simulator to see the iOS colors.

android and ios simulator

Applying DynamicColorIOS

Now we’ll demonstrate how to apply DynamicColorIOS, which applies the light and dark modes in iOS. For this, update the App.js to show the DynamicText component.

applying dynamic color

Create a file called DynamicText.js in the components folder and again, you’ll create a simple Text component. After that, change the background color and text color based on the mode (light vs. dark) of your iOS device.

As seen below, in light mode we get a pink box with blue text.

light mode

Now, change the light mode to dark mode using the shortcut Command + Shift + A. This changes the background box to blue  and the text color to pink.

changing to dark mode

Picking Color

There are many color picker libraries in React Native, with different types of color wheels in each. You can pick any color from these color wheels.

To do so, you need to install the react-native-color-picker package, with the command below.

npm i react-native-color-picker

Triangle Color Picker

Let’s use the Triangle Color Picker from the react-native-color-picker package. For this, update the App.js to show the ColorPicker component.

color picker component

Now, inside the components folder, create a file called ColorPicker.js and use the TriangleColorPicker as per the package’s documentation. The app shows the color picker and you can select a color from the outer circle. Then you can chose a variant of the color from inside the triangle.

triangle color picker

Once you finish selecting, the box changes according to your selection, as seen below. When you click on the color, the color name displays in an alert.

color picker demo

Testing the App

Even for this simple app, you need to run tests. You can use the Jest snapshot test. Projects built with the React Native CLI come with the Jest framework built in. First, in the __tests__ folder in the root directory, remove the earlier App-test.js file. Next, add three files to the folder: DynamicText-test.js, NativeText-test.js, and WebText-test.js.

In the DynamicText-test.js file, add this content, which will check if all of your tags match with those rendered on the device.

import React from 'react';
import renderer from 'react-test-renderer';
import DynamicText from '../components/DynamicText';


describe('<DynamicText />', () => {
   const tree = renderer.create( < DynamicText / > ).toJSON();
   it('DynamicText Component rendered', () => {
       expect(tree).toMatchSnapshot();
   });
});

Next, in the WebText-test.js file, add this content:

import React from 'react';
import renderer from 'react-test-renderer';
import WebText from '../components/WebText';
describe('<WebText />', () => {
   const tree = renderer.create( < WebText / > ).toJSON();
   it('WebText Component rendered', () => {
       expect(tree).toMatchSnapshot();
   });
});

To run the test, go to the terminal and from the project directory, run npm run test.

running the project

As the above screenshot shows, all of our tests were passed. However, adding the color picker , requires writing a more complicated test. Color picker interactions also require the help of manual testers.

Instead of manually writing all of the tests, and including the complicated color picker test with user iteration, which is required for the Triangle Color Picker, you can use Waldo, which is a no-coding platform. You just need to upload the APK or IPA file. You can create a free Waldo account here.

colors pull quote

Conclusion

In this post, you learned about the different web-based color systems and about specifying colors in React Native.  First, you created a separate color file and used it to create colors for an app. After that, you learned about the four ways to code color in React Native.

You learned about the two different color APIs, PlatformColor and DynamicColorIOS.

Lastly, you learned to pick awesome colors with the Triangle Color Picker from the react-native-color-picker package. Then you tested the app using snapshot testing from jest. But you can more easily test your apps, with Waldo to avoid manually coding tests. Give it a try!

This post was written by Nabendu Biswas. Nabendu has been working in the software industry for the past 15 years, starting as a C++ developer, then moving on to databases. For the past six years he’s been working as a web-developer working in the JavaScript ecosystem, and developing web-apps in ReactJS, NodeJS, GraphQL. He loves to blog about what he learns and what he’s up to.

Say goodbye to quality issues and say hello to faster release cycles.

Get Started
Llama happy
gradient