@bayramitto/react-native-colorpicker NPM

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

ezgif-3-4c9d63a9eb

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.