A React Native color picker component that uses native UI components for both iOS and Android platforms.
- Native color picker UI for both iOS and Android
- Support for hex, RGBA, and RGB color formats
- Alpha channel support (optional)
- Promise-based API
- TypeScript support
- Color format conversion utilities
Add the package to your package.json:
{
"dependencies": {
"react-native-color-picker": "SlayApp/react-native-color-picker"
}
}Then install dependencies:
npm install
# or
yarn installFor iOS, you need to install the pods:
cd ios && pod install && cd ..import ColorPicker from "react-native-color-picker";
// Basic usage
try {
const color = await ColorPicker.show({
color: "#FF0000", // Initial color
supportsAlpha: true, // Enable alpha channel
title: "Select a Color", // Android only
});
console.log("Selected color:", color);
} catch (error) {
console.log("Color picker dismissed");
}
// Using callbacks
ColorPicker.show({
color: "rgba(255, 0, 0, 0.5)",
onColorSelected: (color) => {
console.log("Selected color:", color);
},
onDismissed: () => {
console.log("Color picker dismissed");
},
});
// Color format conversion
const hexColor = ColorPicker.toHex("rgba(255, 0, 0, 0.5)");
const rgbaColor = ColorPicker.toRgba("#FF0000");
const colorObject = ColorPicker.toObject("rgba(255, 0, 0, 0.5)");Shows the color picker dialog.
| Property | Type | Default | Description |
|---|---|---|---|
| color | string | { r: number; g: number; b: number; a?: number } | '#FF0000' | Initial color value |
| supportsAlpha | boolean | true | Whether to enable alpha channel selection |
| title | string | 'Select a Color' | Dialog title (Android only) |
| onColorSelected | (color: string) => void | - | Callback when a color is selected |
| onDismissed | () => void | - | Callback when the picker is dismissed |
Hides the color picker dialog.
Converts a color to hex format (e.g., '#FF0000').
Converts a color to RGBA format (e.g., 'rgba(255, 0, 0, 1)').
Converts a color string to an object with r, g, b, a properties.
Registers the color picker with the React Native dev menu.
MIT © SLAY GmbH