Color Picker Wheel For React Native

Description:

An easy-to-use, user-friendly, reusable color picker wheel for React Native.

Installation:

# Yarn
$ yarn add react-native-color-wheel
# NPM
$ npm install react-native-color-wheel --save

Usage:

Install and import the Color Picker Wheel.

import React, { Component } from 'react';
import {
  Dimensions,
  StyleSheet,
  View
} from 'react-native';
import { ColorWheel } from './ColorWheel';

Create a basic color picker wheel.

export default class Example extends Component {
  render() {
    return (
      <View style={{flex: 1}}>
        <ColorWheel
          initialColor="#ee0000"
          onColorChange={color => console.log({color})}
          style={{width: Dimensions.get('window').width}}
          thumbStyle={{ height: 30, width: 30, borderRadius: 30}} />
        <ColorWheel
          initialColor="#00ee00"
          style={{ marginLeft: 20, padding: 40, height: 200, width: 200 }} />
      </View>
    )
  }
}

Default props.

export class ColorWheel extends Component {
  static defaultProps = {
    initialColor: '#ffffff',
    onColorChange: () => {},
    precision: 0,
  }

Default styles of the color picker wheel.

const styles = StyleSheet.create({
  coverResponder: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  img: {
    alignSelf: 'center',
  },
  circle: {
    position: 'absolute',
    width: 50,
    height: 50,
    borderRadius: 30,
    backgroundColor: '#EEEEEE',
    borderWidth: 3,
    borderColor: '#EEEEEE',
    elevation: 3,
    shadowColor: 'rgb(46, 48, 58)',
    shadowOffset: {width: 0, height: 2},
    shadowOpacity: 0.8,
    shadowRadius: 2,
  },
})