@nghinv/react-native-color-picker
TypeScript icon, indicating that this package has built-in type declarations

0.0.3 • Public • Published

@nghinv/react-native-color-picker

React Native Color Picker Library use reanimated 2


CircleCI Version MIT License All Contributors PRs Welcome

Installation

yarn add @nghinv/react-native-color-picker

or

npm install @nghinv/react-native-color-picker
  • peerDependencies
yarn add react-native-gesture-handler react-native-reanimated react-native-linear-gradient react-native-svg

Usage

import React, { useState, useEffect } from 'react';
import { View, StyleSheet } from 'react-native';
import { useSharedValue } from 'react-native-reanimated';
import ColorPicker, { ColorAnimated } from '@nghinv/react-native-color-picker';
import { colors, useHsv } from '@nghinv/react-native-animated';

function App() {
  const [initialColor, setColor] = useState('#ffff55');
  const hsv = useHsv(0);
  const isGestureActive = useSharedValue(false);

  useEffect(() => {
    const hsvValue = colors.hex2Hsv(initialColor);
    hsv.h.value = hsvValue.h;
    hsv.s.value = hsvValue.s;
    hsv.v.value = hsvValue.v;
  }, [initialColor, hsv]);

  return (
    <View style={styles.container}>
      <ColorAnimated
        hsv={hsv}
        isGestureActive={isGestureActive}
        style={styles.currentColor}
      />
      <ColorPicker
        size={240}
        hsv={hsv}
        isGestureActive={isGestureActive}
        // initialColor={initialColor}
        // resetSaturationWhenHueChange
        onColorChange={(color) => {
          console.log('onColorChange', color);
        }}
        onColorConfirm={(color) => {
          console.log('onColorConfirm', color);
        }}
      />
      <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 - 64
strokeWidth number 36
rectSizeSpace number 8
disabled boolean false
onColorChange (color: string) => void undefined
onColorConfirm (color: string) => void undefined
hsv HsvAnimated undefined
isGestureActive Animated.SharedValue<boolean> undefined
resetSaturationWhenHueChange boolean false

Credits

Package Sidebar

Install

npm i @nghinv/react-native-color-picker

Weekly Downloads

2

Version

0.0.3

License

MIT

Unpacked Size

146 kB

Total Files

57

Last publish

Collaborators

  • nghinv