🌈 A react native reusable and color picker wheel
Switch branches/tags
Nothing to show
Clone or download
LucasGarci and jsdario Reducing image area equals to the thumb radius (#21)
* Reducing image area equals to the thumb radius

* fix eslint changes
Latest commit 9f0245c Aug 23, 2018

README.md

react-native-color-wheel

npm version

🎨 A react native reusable and color picker wheel

import React, { Component } from 'react';
import {
  Dimensions,
  StyleSheet,
  View
} from 'react-native';
import { ColorWheel } from 'react-native-color-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>
    )
  }
}

demo screenshot

More documentation is incoming, in the meanwhile please read the source code. It is a single file! PRs and issues are more than welcome.

works with yeti

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