How to implement wheel color picker in React Native

In React Native, we can use the react-native-wheel-color-picker which is a powerful library that enables developers to integrate color selection functionality into their mobile applications. With a user-friendly interface, it allows users to choose colors easily, making it an essential tool for enhancing the visual appeal and interactivity of React Native apps.

Installing dependencies

We'll need to install a few packages using npm, so make sure that your React Native application is built before we proceed.

You can see here how to create a React Native application.

Navigate to the root directory of your React Native project and install the dependencies using the following commands.

{
  "name": "awesomeproject",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/webpack-config": "^18.0.1",
    "expo": "~48.0.18",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.71.8",
    "react-native-web": "~0.18.10",
    "react-native-wheel-color-picker": "^1.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "react-native-svg-transformer": "^1.0.0"
  },
  "private": true
}

Color wheel in React Native application

Note: Press 'w' key to see the output in web browser.

This code is a React Native app that displays a color picker using the react-native-wheel-color-picker library. The App component is a class-based component that manages the state for the current color selected in the color picker.

Lines 6–14: The constructor initializes the currentColor state with the default color #00FF00. The component also has other states such as the swatchesOnly, swatchesLast, swatchesEnabled, and disc, which can be used to configure the behavior of the color picker.
Lines 17–19: The onColorChange function is called whenever the user selects a new color from the color picker. It updates the currentColor state with the selected color.
Lines 21–24: The onColorChangeComplete function is called when the color selection process is complete. In this example, it logs the color to the console, but you can add additional logic here if needed.
Lines 26–52: The render method contains the UI of the app. Inside the View, there's a ColorPicker component, which is imported from react-native-wheel-color-picker.
- Lines 29–45: The ColorPicker component is configured with various props, including the current color (color), the callback function for color changes (onColorChange), the callback function for color change completion (onColorChangeComplete), and others to control the appearance and behavior of the color picker.
- Lines 47–49: There's a <Text> component below the color picker that displays the hashcode of the selected color.

Overall, this code sets up a color picker in a React Native app, allowing users to select colors, and it displays the selected color's hashcode.

Free Resources

How to implement wheel color picker in React Native

Installing dependencies

Creating a color wheel