React Native ColorPicker

A very basic color picker for React Native. Created with Reanimated 2

Description

IMPORTANT!
With this picker you can get the HEX/DEC color codes of your selected color, you can set your own color palette and use them wherever you wish.

Preview

Note

Make sure you have following packages installed on your project.

npm i react-native-linear-gradient
npm i react-native-reanimated
npm i react-native-gesture-handler

If you alredy have them, you can skip this.

Installation

npm i @bayramitto/react-native-colorpicker 

Usage

import ColorPicker from "@bayramitto/react-native-colorpicker";

const App = () => {
  const [bg, setBg] = useState('#000');

  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: bg,
      }}>
      <ColorPicker
        styles={{
          width: 200,
          height: 15,
          borderRadius: 20,
          borderWidth: 1,
          borderColor: '#fff',
        }}
        onColorChanged={color => {
          setBg(color);
        }}
      />
    </View>
  );
};

Properties

Prop	Default	Type	Description
colors	-	Array	You can define your own color palette in Array of HEX codes eg. ["#fa3261","#c9a221"]
*style (Required)	-	object	Specify the style of the ColorPicker. ( width and height values REQUIRED )
onColorChanging	-	callback	Returns output format of the interpolateColors from Reanimated 2
*onColorChanged (Required)	-	callback	Returns hex code of selected color eg. #e5ca55.
circleSize	-	number	Size of the circle on picker.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT