React Native Color Picker Wheel Example


Share:
Published By: Admin, Published On: Oct 09, 2021, Category: React Native
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}>
      <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,
  }
});
Step 4 - Run project

In the last step run your project using bellow command.

expo start
Output

It will help you..

Share: