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.
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
- Every other component is wrapped or enclosed inside
Panel
: A slider used to change the color’s hue, saturation, and brightness- Separated into
Panel1
,Panel2
, andPanel3
with each panel doing separate work
- Separated into
Preview
: Allows you to preview your selected color combinationsPreviewText
: React NativeText
component that displays the preview color textSlider
: Comes with four slider options for changing the color’s propertiesHueSlider
: Allows you to adjust the gradationBrightnessSlider
: Allows you to change the lightness or darknessSaturationSlider
: Allows you to change the intensityOpacitySlider
: 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.