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 color code output in Reanimated format, then you can use it any other Animated component via useAnimatedStyle in Reanimated 2.

Demo

https://user-images.githubusercontent.com/44513402/191630954-f5b720a9-c94c-4e47-9882-799037860f23.mp4

Installation

npm i @bayramitto/react-native-colorpicker

Usage

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

const backgroundColor = useSharedValue("#17203A");
const containerAnimatedStyle = useAnimatedStyle(() => ({
      backgroundColor: backgroundColor.value,
    }));
<Animated.View style={[styles.container, containerAnimatedStyle]}>
  <ColorPicker
      colors={[ "#17203A","#fd79a8",
                "#8e44ad","#10ac84",
                "#8395a7","#ecf0f1",
                "#ff9ff3","#2e86de",
                "#fdcb6e","#00cec9",
                ]}
      styles={{
        width: 270,
        height: 10,
        borderRadius: 20,
        borderWidth: 1,
        borderColor: "#fff",
       }}
      maxWidth={270}
      onColorChange={color => {
       backgroundColor.value = color;
      }}
  />
</Animated.View>

Properties

Prop	Default	Type	Description
colors	-	`Array`	Array of color palette eg ( ["red","#4cf21a","cyan","purple] )
style	-	`object`	Specify the style of the ColorPicker, eg. width, height...
maxWidth	-	`number`	Maximum `width` of the picker
onColorChange	-	`callback`	Returns selected color

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