React Native Image Color Picker

A powerful and flexible image-based color picker component for React Native that utilizes expo-gl for cross-platform compatibility.

Features

• Cross-platform compatibility using expo-gl
• Flexible bounding boxes (circle, rectangle, polygon)
• Real-time color selection with touch and pan gestures
• TypeScript support with full type definitions
• Performance optimized with efficient pixel sampling
• Debug mode for visual boundary indicators

Installation

npm install react-native-svg-color-picker

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install expo-gl expo-asset react-native-svg

Usage

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import { ImageColorPicker } from 'react-native-svg-color-picker';

export default function App() {
  const [selectedColor, setSelectedColor] = useState(null);

  return (
    <View style={{ flex: 1, padding: 20 }}>
      <ImageColorPicker
        source={{ uri: 'https://example.com/image.jpg' }}
        onColorSelect={(color) => setSelectedColor(color)}
        stepSize={2}
        style={{ width: 300, height: 300 }}
      />
      {selectedColor && <Text>Selected Color: {selectedColor.hex}</Text>}
    </View>
  );
}

API Reference

Props

| Prop | Type | Default | Description | | -------------- | ---------------------------- | ------------ | --------------------------------------- | | source | ImageSourcePropType | required | Image source (local or remote) | | boundingBox | BoundingBox | undefined | Restrict color picking to specific area | | onColorSelect| (color: ColorData) => void | undefined | Callback when color is selected | | debug | boolean | false | Show visual boundary indicators | | style | ViewStyle | undefined | Container style |

Types

interface ColorData {
  r: number; // Red (0-255)
  g: number; // Green (0-255)
  b: number; // Blue (0-255)
  a: number; // Alpha (0-1)
  hex: string; // Hex color code
}

type BoundingBox = CircleBoundingBox | RectangleBoundingBox | PolyBoundingBox;

interface PolyBoundingBox {
  type: 'poly';
  points?: Array<{ x: number; y: number }>;
  svgPath?: string;
  curves?: Array<{ cp1: { x: number; y: number }; cp2: { x: number; y: number } }>;
}

Bounding Boxes

Restrict color picking to specific areas:

Circle

const circleBounds = {
  type: 'circle',
  radius: 100,
  originX: 150, // Optional, defaults to center
  originY: 150, // Optional, defaults to center
};

Rectangle

const rectBounds = {
  type: 'rectangle',
  width: 200,
  height: 150,
  originX: 50,
  originY: 75,
};

Polygon

// Using points array
const polyBounds = {
  type: 'poly',
  points: [
    { x: 0, y: 0 },
    { x: 100, y: 0 },
    { x: 50, y: 100 },
  ],
};

// Using SVG path
const svgPolyBounds = {
  type: 'poly',
  svgPath: 'M169.39 11.5205C254.544 12.5993 323.242 81.9646 323.242 167.375L323.229 169.39C322.829 200.975 313.034 230.295 296.51 254.685Z'
};

Development

# Install dependencies
npm install

# Format code
npm run format

# Check formatting
npm run format:check

Demo App

cd demo
npm install
npm start

Support This Project

This project is open source and maintained by volunteers. If you find it useful, please consider supporting its development:

• Star this repository to show your support
• Report bugs and suggest features via GitHub Issues
• Sponsor development via Open Collective
• Contribute code by submitting pull requests

Funding

This project is looking for funding to support ongoing development and maintenance. Your contributions help ensure the project remains actively maintained and improved.

Support on Open Collective

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

Contributors

• Andrew Ballard - Initial work and maintenance - @andrewballard

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Built with expo-gl for cross-platform WebGL support
• Inspired by the need for flexible color picking in React Native applications