Package Exports

@bayramitto/react-native-colorpicker
@bayramitto/react-native-colorpicker/dist/index.js

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 (@bayramitto/react-native-colorpicker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

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