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.

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

expo init MyWebtutsProject

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

yarn add react-native-color-picker

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}>
      <ColorPicker
          onColorSelected={color => alert(`Color selected: ${color}`)}
          style={styles.colorpiker}
        />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 2,
    backgroundColor: '#fff',
    alignItems: 'center',
  },
  colorpiker:{
    width:350,
    height: 600,
  }
});

In the last step run your project using bellow command.

expo start

It will help you..