# ![icon](https://github.com/user-attachments/assets/dd3dbb1f-25c3-463d-9413-ca963c17862c) Reanimated Color Picker

[![npm](https://img.shields.io/npm/v/reanimated-color-picker?style=for-the-badge)](https://www.npmjs.com/package/reanimated-color-picker)
[![GitHub](https://img.shields.io/github/license/alabsi91/reanimated-color-picker?style=for-the-badge)](https://github.com/alabsi91/reanimated-color-picker/blob/main/LICENSE)
[![GitHub issues](https://img.shields.io/github/issues/alabsi91/reanimated-color-picker?style=for-the-badge)](https://github.com/alabsi91/reanimated-color-picker/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc)
![Platform](https://img.shields.io/badge/Platform-IOS%20%7C%20Android%20%7C%20Expo%20%7C%20Web-informational?style=for-the-badge)
![Arch](https://img.shields.io/badge/React%20Native-Paper%20%7C%20New%20Architecture-informational?style=for-the-badge)

- **A Pure JavaScript Color Picker for React Native.**

- **Highly customizable.**

- **Supports IOS, Android, Expo, and Web platforms.**

- **Supports right-to-left (RTL) layouts.**

![Example_1](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_1.png)
![Example_7](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_7.png)

![Example_2](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_2.png)
![Example_3](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_3.png)

![Example_4](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_4.png)
![Example_5](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_5.png)

![Example_8](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_8.png)
![Example_9](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_9.png)

![Example_10](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_10.png)
![Example_11](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_11.png)

![Example_6](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_6.png)
![Example_12](https://raw.githubusercontent.com/alabsi91/reanimated-color-picker/main/images/example_12.png)

## Examples

- [TypeScript Example Code](https://github.com/alabsi91/reanimated-color-picker/tree/main/ExamplesShared)
- [Bare workflow](https://github.com/alabsi91/reanimated-color-picker/tree/main/ExampleLatest)
- [Expo managed workflow](https://github.com/alabsi91/reanimated-color-picker/tree/main/ExampleExpoLatest)
- [Interactive Demo on Expo Snack](https://snack.expo.dev/@alabsi91/reanimated-color-picker)
- [Download APK for Demo Examples (Android)](https://github.com/alabsi91/reanimated-color-picker/releases/latest)

## Prerequisites

- Follow the installation instructions by using the links provided below.

- [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation) version `2.0.0` or higher.

- [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#installation) version `2.0.0` or higher.

- For `Expo` managed workflow version `44` or higher is required.

## Installation

> [!NOTE]
> First we need to install [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation)(>=2.0.0) and [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation)(>=2.0.0),

- Open a Terminal in the project root and run:

```
npm i reanimated-color-picker
```

## Fabric support

- `react-native-gesture-handler` supports the new architecture since version `2.3.0`.
- `react-native-reanimated` supports the new architecture since version `3.0.0`.

## Usage

### [📖 View the documentation site 📖](https://alabsi91.github.io/reanimated-color-picker/)

> Related library, [React Native Material You Colors](https://github.com/alabsi91/react-native-material-you-colors).

## License

Reanimated Color Picker library is licensed under [**The MIT License.**](https://github.com/alabsi91/reanimated-color-picker/blob/main/LICENSE)

## Sponsoring

<a href="https://github.com/sponsors/alabsi91">
  <img align="right" width="160" alt="This library helped you? Consider sponsoring!" src=".github/funding-octocat.svg">
</a>

If you're integrating Reanimated Color Picker in a production app, consider [funding this project](https://github.com/sponsors/alabsi91) and <a href="mailto:alabsi91@gmail.com">contact me</a> .