React Native Color Picker Wheel Example

Oct 09, 2021 . Admin

React Native Color Picker Wheel

Hi Guys,

Today, I will learn you how to add color picker wheel in react native. we will show example of react native color picker wheel.You can easily create bar chart in react native. First i will import react-native-color-picker after I will create color picker wheel in react native.

Here, I will give you full example for simply display color picker wheel using react native as bellow.

Step 1 - Create project

In the first step Run the following command for create project.

expo init MyWebtutsProject
Step 2 - Install Package

In the step,I will install yarn add react-native-color-picker package.

yarn add react-native-color-picker
Step 3 - App.js

In this step, You will open App.js file and put the code.

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { ColorPicker } from 'react-native-color-picker'

export default function App() {
  return (
    <View style={styles.container}>
          onColorSelected={color => alert(`Color selected: ${color}`)}

const styles = StyleSheet.create({
  container: {
    flex: 2,
    backgroundColor: '#fff',
    alignItems: 'center',
    height: 600,
Step 4 - Run project

In the last step run your project using bellow command.

expo start

It will help you..

#React Native