react-native-color-wheel

:art: A react native reusable and color picker wheel

Usage

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

const Example = ({onChange}) => (
  <View style={{flex: 1}}>
    <ColorWheel
      initialColor="#ee0000"
      onColorChange={color => console.log({color})}
      onColorChangeComplete={color => onChange(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>
);

Props

| Name | Description | Type | |-------------------------|------------------------------------------------|--------| | initialColor | Initial value in hex format | String | | onColorChange | Callback when the value is changed or moved | func | | onColorChangeComplete | Callback on mouseup or drag event has finished | func | | thumbSize | Width of draggable thumb | Number | | thumbStyle | CSS for the draggable thumb | Object |

PRs and issues are more than welcome.

 This package powers Yeti Smart Home and is used in production. Follow us in Github or https://twitter.com/netbeast_co.