repository·main·Indexed 19 days ago
https://github.com/alabsi91/reanimated-color-pickerA highly customizable, pure JavaScript color picker library for React Native supporting iOS, Android, Expo, and Web. It features support for RTL layouts and integrates with react-native-reanimated and react-native-gesture-handler for high-performance updates via worklets. The library provides a central <ColorPicker /> wrapper and various components like <Panel1 />, <HueSlider />, and <OpacitySlider /> to create flexible color selection interfaces.
colorKit is a collection of color utility tools used internally by the ColorPicker. It provides capabilities for color conversion, format identification, and extracting specific color channel information (like RGB or HSL values).The ColorPicker component acts as the central manager for all built-in color picker components (like HueSlider, OpacitySlider, Swatches, etc.).
Crucial Requirement: All built-in components must be wrapped within a <ColorPicker> component to function correctly. You can nest these components inside standard layout components like <View> to create custom layouts.
<ColorPicker>
<Preview />
<View>
<Panel1 />
<HueSlider vertical />
</View>
<View>
<Text>Opacity</Text>
<OpacitySlider />
</View>
<Swatches />
</ColorPicker>Reanimated Color Picker provides broad compatibility and support for modern mobile and web development needs:
You can control where an <ExtraThumb /> appears within the panel using several transformation props. These allow you to map specific color channels to the thumb's position.
Use these props to transform a single channel. They accept negative values or percentage strings (e.g., '50%' or 50):
hueTransform: Transforms the hue channel.saturationTransform: Transforms the saturation channel.brightnessTransform: Transforms the brightness channel.For complex logic, use colorTransform. This is a worklet function that receives an HSVObject and must return a new HSVObject. This returned object determines the thumb's position inside the panel.
<ExtraThumb
thumbShape="circle"
colorTransform={color => {
"worklet";
// Example using a hypothetical colorKit utility
return colorKit.runOnUI().spin(color, 180).hsv().object();
}}
/>colorKit accepts a wide variety of color formats for its input, including:
"rgb(255, 0, 255)", "rgba(255, 0, 255, 1.0)", or objects {r: number, g: number, b: number, a?: number}."#f0f", "#ff00ff", "#f0ff", "#ff00ff00", or integer representations like 0xff00ffff."hsl(360, 100%, 100%)" or objects {h: number, s: number, l: number, a?: number}."hsv(360, 100%, 100%)" or objects {h: number, s: number, v: number, a?: number}."hwb(360, 100%, 100%)" or objects {h: number, w: number, b: number, a?: number}."aliceblue", "aqua", "red").To install reanimated-color-picker, you must first ensure that the following peer dependencies are installed in your project:
react-native-gesture-handler (version 2.0.0 or higher)react-native-reanimated (version 2.0.0 or higher)If you are using the Expo managed workflow, you must use Expo version 44 or higher.
Once the prerequisites are met, install the package using npm:
npm i reanimated-color-pickerTo run this specific example project, install the dependencies and start the Expo development server. You can then open the app in a development build, an Android emulator, an iOS simulator, or Expo Go.
npm install
npx expo startThe ColorPicker component acts as a container for various built-in UI components that you can add, remove, rearrange, or style.
Key Components:
Preview: Displays the currently selected color.Panel1: A color selection panel.HueSlider: A slider for adjusting the hue.OpacitySlider: A slider for adjusting opacity.Swatches: A collection of color swatches.Important Note on Callbacks:
When defining callback functions like onComplete or onChange, use onCompleteJS and onChangeJS if you need to call non-worklet functions (standard JavaScript functions). If you are using a worklet, you can use onComplete or onChange directly.
import ColorPicker, { Panel1, Swatches, Preview, OpacitySlider, HueSlider } from "reanimated-color-picker";
// ... inside your component
<ColorPicker
style={{ width: "70%" }}
value="red"
onComplete={({ hex }) => {
"worklet";
console.log(hex);
}}
>
<Preview />
<Panel1 />
<HueSlider />
<OpacitySlider />
<Swatches />
</ColorPicker>With Metro running, open a new terminal window and run the following command to build and launch the app on an Android Emulator or connected device:
# Using npm
npm run android
# OR using Yarn
yarn androidThe <ExtraThumb /> component adds an extra visual indicator (thumb) to the Panel3 component. It is used exclusively as a color indicator and does not respond to gestures.
Important: This component only works when placed inside a <Panel3 /> component.
<Panel3 style={styles.panelStyle} renderCenterLine adaptSpectrum>
<ExtraThumb thumbShape="circle" hueTransform={120} />
<ExtraThumb thumbShape="circle" hueTransform={140} />
{/* ... other thumbs */}
</Panel3>Before using reanimated-color-picker, verify your environment meets these requirements:
| Dependency | Minimum Version | Notes |
|---|---|---|
react-native-gesture-handler | 2.0.0 | Required |
react-native-reanimated | 2.0.0 | Required |
Expo | 44 | Required for managed workflow |
New Architecture (Fabric) Support: To use the React Native New Architecture, ensure you are using:
react-native-gesture-handler version 2.3.0 or higher.react-native-reanimated version 3.0.0 or higher.