Package Exports
- @nghinv/react-native-color-wheel
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nghinv/react-native-color-wheel) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
@nghinv/react-native-color-wheel
React Native Color Wheel Library use reanimated 2
Installation
yarn add @nghinv/react-native-color-wheel
or
npm install @nghinv/react-native-color-wheel
Usage
import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { useSharedValue } from 'react-native-reanimated';
import WheelPicker, { ColorAnimated } from '@nghinv/react-native-color-wheel';
import Slider from '@nghinv/react-native-slider';
function App() {
const [color, setColor] = useState('#0000ff');
const hsv = useSharedValue({
h: 0,
s: 0,
v: 100,
});
useEffect(() => {
hsv.value = hex2Hsv('#0000ff');
}, [hsv]);
const onChange = (v: number) => {
hsv.value = {
h: hsv.value.h,
s: hsv.value.s,
v,
};
};
return (
<View style={styles.container}>
<ColorAnimated
hsv={hsv}
style={styles.currentColor}
/>
<WheelPicker
hsv={hsv}
size={260}
// initialColor={color}
onColorChange={(value) => {
// setColor(value);
hsv.value = hex2Hsv(value);
}}
onColorConfirm={(value) => {
console.log('onColorConfirm', value);
}}
/>
<Slider
width={240}
style={{ marginTop: 32 }}
value={hsv.value.v}
onChange={onChange}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 16,
},
currentColor: {
width: 80,
height: 40,
borderRadius: 20,
marginBottom: 24,
borderWidth: 2,
borderColor: 'white',
},
});
export default App;
Property
Property | Type | Default | Description |
---|---|---|---|
initialColor | string |
#ffffff |
|
size | number |
screen_width - 32 |
|
thumbSize | number |
32 |
|
disabled | boolean |
false |
|
onColorChange | (color: string) => void |
undefined |
|
onColorConfirm | (color: string) => void |
undefined |
|
hsv | Animated.SharedValue<HsvType> |
undefined |