Exploring 5 popular React Native color picker libraries

Colors are very important in web and mobile development. They either make a page aesthetically beautiful and sleek or displeasing to look at.

Choosing the right color combination for your application can come with some frustrating obstacles — it’s not as easy as it seems. However, thanks to color picker libraries, choosing the right colors for our application has increasingly become easier.

Color pickers are software tools or graphical user interface (GUI) widgets used to navigate through colors on a color spectrum. These handy tools can help developers quickly find, preview, and select color values that work well for their needs.

Color picker libraries are libraries that have a wide range of color options and allow us to play around, browse through, and try out different color options for our application. There are many color picker libraries out there that are available for our React Native applications.

In this article, we will be looking at an overview of some of the best color picker libraries. Ideally, the purpose of this article is to guide you in selecting a suitable library for your project.

Let’s look at some of the color-picker libraries available for our React Native projects. These libraries were selected based on popularity, ease of use, weekly downloads, and ease of customization.

Jump ahead:

• react-native-color-picker
• React Native Wheel Color Picker
• react-native-hsv-color-picker
• Reanimated Color Picker
• react-native-light-color-picker

react-native-color-picker

The react-native-color-picker library has two color picker types: holo and triangle. This library is not very complex, making it very intuitive and easy to use. Furthermore, it has thousands of weekly downloads, making it one of the most popular color picker libraries.

To use the react-native-color-picker library in your application, install using any of the commands below:

//Npm
npm install react-native-color-picker --save

// Yarn
yarn add react-native-color-picker

You also need to install the @react-native-community/slider package. This is because the native Slider component in React Native has been deprecated, so you have to provide the slider component as a prop.

Run either of the commands below to install the slider package:

// Npm
npm install @react-native-community/slider --save

// Yarn
yarn add @react-native-community/slider

After installation, you can then import it into your application’s component and call it like below:

/* App.js */

import { ColorPicker } from 'react-native-color-picker'

const App = () => (
  <ColorPicker
    onColorSelected={color => alert(`Color selected: ${color}`)}
    style={{flex: 1}}
  />
)

As we know, the react-native-color-picker library has two color picker types. To use either the holo or triangle color picker, we must explicitly specify the type in the import. Let’s look at the two color picker types and how to use them.

The triangle color picker comes in the shape of a triangle inside a circle. See how to implement this option in the code below:

/* Controlled Triangle Color picker */

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import { TriangleColorPicker, toHsv } from 'react-native-color-picker';

export const App = () => {
  const [color, setColor] = useState(toHsv('green'));

  function onColorChange(color) {
    setColor({ color });
  }
  return (
    <View style={{ flex: 1, padding: 45, backgroundColor: '#212021' }}>
      <Text style={{ color: 'white' }}>
        React Native Color Picker
      </Text>

      <TriangleColorPicker
        oldColor="purple"
        color={color}
        onColorChange={onColorChange}
        onColorSelected={(color) => alert(`Color selected: ${color}`)}
        onOldColorSelected={(color) => alert(`Old color selected: ${color}`)}
        style={{ flex: 1 }}
      />
    </View>
  );
};

This will give you the color picker below. You can adjust the hue using the outer circle and the lightness using the inner triangle:

As you can see in the image above, the bar at the bottom shows the previously selected color on the left and the currently selected color on the right. This allows you to compare colors visually and select options that work well together.

The holo color picker is the default color picker, denoted by a circular color picker and some sliders:

/* App.js */

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import { ColorPicker, toHsv } from 'react-native-color-picker';

export const App = () => {
  const [color, setColor] = useState(toHsv('green'));
  function onColorChange(color) {
    setColor({ color });
  }
  return (
    <View style={{ flex: 1, padding: 45, backgroundColor: '#212021' }}>
      <Text style={{ color: 'white' }}>
        React Native Color Picker
      </Text>

      <ColorPicker
        oldColor="purple"
        color={color}
        onColorChange={onColorChange}
        onColorSelected={(color) => alert(`Color selected: ${color}`)}
        onOldColorSelected={(color) => alert(`Old color selected: ${color}`)}
        style={{ flex: 1 }}
      />
    </View>
  );
};

The code above will result in the color picker below. You can choose the hue using the outer circle and adjust the saturation and lightness using the slider bars at the bottom. The resulting color will display in the inner circle:

React Native Wheel Color Picker

The React Native Wheel Color Picker is a pure JavaScript library. It is lightweight — meaning that it is small in size — and works for Android, iOS, and the web.

This color picker uses a hue-and-saturation color wheel and lightness slider. Animations on the color picker’s wheel, slider, and swatches will show the changes in color as you make adjustments.

React Native Wheel Color Picker has fewer weekly downloads than react-native-color-picker, but still typically has around two thousand downloads each week, making it the second most popular color picker library in our list.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

While this library is overall easy to use, it also has some complex functionalities. Two of the most useful ones are swatches and discrete.

Swatches are the tiny dots under the slider. They represent different color types like blue, red, green, and so on. Swatches can be turned off or on depending on the user’s choice. To turn it on or off, you simply add the boolean to the color picker like below:

<ColorPicker swatches={true} />

Discretes, on the other hand, represent the different shades of the swatches. For example, if you select the green color from the swatches, the discretes show you the different variations of the selected green color ranging from lighter to darker variations. You can add discretes to your color picker like below:

<ColorPicker discretes={true} />

The image above shows examples of discretes and swatches. The top row of dots contains the discrete, which show the different variations of the selected blue color. The bottom row of dots contains the swatches.

To use the React Native Wheel Color Picker library, install it with either of the commands below:

/* Npm */
npm install react-native-wheel-color-picker

/* Yarn */
yarn add react-native-wheel-color-picker

After installation, you can use this color picker library in your component as shown below:

/* App.js */

import React, {useState} from 'react';
import {SafeAreaView, StyleSheet, View} from 'react-native';
import ColorPicker from 'react-native-wheel-color-picker';

const App = () => {
  const [color, setColor] = useState('');

  const onColorChange = color => {
    setColor(color);
  };
  return (
    <SafeAreaView>
      <View style={styles.sectionContainer}>
        <ColorPicker
          color={color}
          onColorChange={(color) => onColorChange(color)}
          onColorChangeComplete={color => alert(`Color selected: ${color}`)}
          thumbSize={30}
          sliderSize={30}
          noSnap={true}
          row={false}
        />
      </View>
    </SafeAreaView>
  );
};
const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 70,
    paddingHorizontal: 24,
  },
});
export default App;

The code above will result in the following color picker, which shows a color wheel, a slider bar to adjust lightness, and a row of swatches.

You can adjust the wheel in the circle to pick a color. Similarly, you can choose different color variations from the swatches or color types below. You can then use the slider to adjust the color to your liking:

react-native-hsv-color-picker

The react-native-hsv-color-picker library helps you to build colors using hue, saturation, and value (HSV). This library is supported by both React Native and Expo projects. Its weekly download stats average around 100 or more. Though it is easy to use, it may not be as intuitive as the other libraries above.

To install this library in your project, run either of the commands below:

/* Npm */
npm install react-native-hsv-color-picker --save

/* Yarn */
yarn add react-native-hsv-color-picker

Unless you are using Expo, this library has some peer dependencies that you will need to download and configure before using it. Follow the instructions provided in the docs to add the necessary dependencies for the library.

See the sample code below detailing how to use this library in your application:

/* App.js */

import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import HsvColorPicker from 'react-native-hsv-color-picker';

export default App = () => {
  const [state, setState] = useState({
    hue: 0,
    sat: 0,
    val: 1,
  });

  const onSatValPickerChange = ({ saturation, value }) => {
    setState({
      sat: saturation,
      val: value,
    });
  };

  const onHuePickerChange = ({ hue }) => {
    setState({hue});
  };

  return (
    <View style={styles.container}>
      <HsvColorPicker
        huePickerHue={state.hue}
        satValPickerHue={state.hue}
        satValPickerValue={state.val}
        satValPickerSaturation={state.sat}
        onHuePickerPress={onHuePickerChange}
        onHuePickerDragMove={onHuePickerChange}
        onSatValPickerPress={onSatValPickerChange}
        onSatValPickerDragMove={onSatValPickerChange}
      />
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'grey',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

The code above will give you the color picker below. The slider allows you to choose between different color types. Then, using the block, you can browse through the color variations and make a choice:

Reanimated Color Picker

Reanimated Color Picker is a highly customizable pure JavaScript color picker library for React Native. It supports Android, iOS, Expo, and the web.

Unlike the others, this library has some cool APIs that allow you to customize your color picker to suit your taste. Some of these APIs include:

• ColorPicker: A wrapper that houses all the built-in components
  • Every other component is wrapped or enclosed inside ColorPicker
• Panel: A slider used to change the color’s hue, saturation, and brightness
  • Separated into Panel1, Panel2, and Panel3 with each panel doing separate work
• Preview: Allows you to preview your selected color combinations
• PreviewText: React Native Text component that displays the preview color text
• Slider: Comes with four slider options for changing the color’s properties
  • HueSlider: Allows you to adjust the gradation
  • BrightnessSlider: Allows you to change the lightness or darkness
  • SaturationSlider: Allows you to change the intensity
  • OpacitySlider: Allows you to change the transparency

To install, run any of the commands below:

/* Npm */
npm i reanimated-color-picker

/* Yarn */
yarn add reanimated-color-picker

After installation, let’s see how we can use this library below:

/* App.js */

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import ColorPicker, {
  Preview,
  OpacitySlider,
  BrightnessSlider,
  HueSlider,
  SaturationSlider,
} from 'reanimated-color-picker';

export default App = () => {
  return (
    <View style={styles.container}>
      <ColorPicker
        style={{ width: '75%', justifyContent: 'center' }}
        sliderThickness={30}
        thumbSize={40}
        thumbShape="pill">
        <Preview
          style={[styles.previewStyle, styles.shadow]}
          textStyle={{ fontSize: 18 }}
          colorFormat="rgba"
          hideInitialColor
        />
        <Text style={styles.sliderLabel}>Hue:</Text>
        <HueSlider
          style={[{ borderRadius: 15, marginBottom: 25 }, styles.shadow]}
        />
        <Text style={styles.sliderLabel}>Brightness:</Text>
        <BrightnessSlider
          style={[{ borderRadius: 15, marginBottom: 25 }, styles.shadow]}
        />
        <Text style={styles.sliderLabel}>Saturation:</Text>
        <SaturationSlider
          style={[{ borderRadius: 15, marginBottom: 25 }, styles.shadow]}
        />
        <Text style={styles.sliderLabel}>Opacity:</Text>
        <OpacitySlider
          style={[{ borderRadius: 15, marginBottom: 25 }, styles.shadow]}
        />
      </ColorPicker>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#e8e8e8',
    paddingBottom: 0,
    width: '100%',
    maxWidth: 500,
    margin: 'auto',
  },
  sliderLabel: {
    fontSize: 20,
    color: '#000',
    marginBottom: 10,
  },
  previewStyle: {
    height: 55,
    borderRadius: 50,
    marginBottom: 30,
  },
  shadow: {
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
});

In the above code, we are using the four sliders to combine various settings and get a more desirable color. We are also using the Preview component to see what the resulting color is. Lastly, every component is wrapped inside the ColorPicker wrapper. See the result:

react-native-light-color-picker

The react-native-light-color-picker library works for Android and iOS. Here are the commands to install it:

/* Npm */
npm i react-native-light-color-picker

/* yarn */
yarn add react-native-light-color-picker

After installation, import calcTextColor, CCTPicker, and RGBPicker from the react-native-light-color-picker module:

/* App.js */

import React from 'react';
import { Dimensions, StyleSheet, View, SafeAreaView, Text, Button } from 'react-native';
import {
  calcTextColor,
  CCTPicker,
  RGBPicker,
} from 'react-native-light-color-picker';
const { width, height } = Dimensions.get('screen');

export default function App() {
  const [color, setColor] = React.useState('#FFFF00');
  const [value, setValue] = React.useState(0);
  const [mode, setMode] = React.useState(1);
  return (
      <SafeAreaView style={styles.SafeAreaView}>
        <View>
          <Button
            onPress={() => {
              setMode(mode === 0 ? 1 : 0);
            }}
          >
            Switch mode
          </Button>
        </View>
        {mode === 0 && (
          <>
            <RGBPicker
              value={color}
              onChangeComplete={console.log}
              onChange={setColor}
            />
            <View
              style={[
                styles.demo,
                {
                  backgroundColor: color,
                },
              ]}
            >
              <Button
                labelStyle={{
                  color: calcTextColor(color),
                }}
                onPress={() => {
                  setColor('#FF0000');
                }}
              >
                Set color
              </Button>
            </View>
          </>
        )}
        {mode === 1 && (
          <>
            <CCTPicker
              value={value}
              onChangeComplete={console.log}
              onChange={setValue}
            />
            <View
              style={[
                styles.demo,
                {
                  backgroundColor: color,
                },
              ]}
            >
              <Button
                labelStyle={{
                  color: calcTextColor(color),
                }}
                onPress={() => {
                  setValue(30);
                }}
              >
                Set value
              </Button>
              <Text style={styles.text}>{value}</Text>
            </View>
          </>
        )}
      </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  SafeAreaView: {
    width,
    height,
    flex: 1,
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  container: {
    width: '100%',
    height: '100%',
    flex: 1,
  },
  demo: {
    width: '100%',
    height: 100,
  },
  text: {
    alignSelf: 'center',
  },
});

In the code above, we are switching between the two color picker options — the CCTPicker and the RGBPicker — by toggling the Switch mode button. Check out the result below:

Just like in the other React Native color picker libraries, we can move around and browse through different colors using the teardrop-shaped color picker selector. When we stop moving the color picker selector, the resulting color will be logged in our console so we can copy it.

Conclusion

In this tutorial, we have looked at why colors are important in our applications and how various React Native color picker libraries can help us select the right color scheme for our apps.

As we looked at the different color picker library options available to us, we also explored what makes each unique. Furthermore, we have seen what each library looks like, how we can use them in our application, and how they can help us choose a pleasing color theme for our app.

It is now up to you to choose which of the options is easier and works for your needs. Thank you for reading.

LogRocket: Instantly recreate issues in your React Native apps.

LogRocket is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps.

LogRocket also helps you increase conversion rates and product usage by showing you exactly how users are interacting with your app. LogRocket's product analytics features surface the reasons why users don't complete a particular flow or don't adopt a new feature.

Start proactively monitoring your React Native apps — try LogRocket for free.