A React Native reusable and Color Picker Wheel

react-native-color-wheel. 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';

const Example = ({onChange}) => (
  <View style={{flex: 1}}>
      onColorChange={color => console.log({color})}
      onColorChangeComplete={color => onChange(color)}
      style={{width: Dimensions.get('window').width}}
      thumbStyle={{ height: 30, width: 30, borderRadius: 30}}
      style={{ marginLeft: 20, padding: 40, height: 200, width: 200 }}


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

demo screenshot

PRs and issues are more than welcome.

Download Details:

Author: netbeast

Live Demo: https://getyeti.co/

GitHub: https://github.com/netbeast/react-native-color-wheel

#react-native #programming

A React Native reusable and Color Picker Wheel
21.05 GEEK