reanimated-color-picker/README.md

A Pure JavaScript Color Picker for React Native

:red_circle: :green_circle: :large_blue_circle:

# 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)

# :small_blue_diamond:Prerequisites

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

- [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/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.

# :small_blue_diamond:Installation

> **Note**
> First we need to install [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/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
```

# :small_blue_diamond: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`.

# :small_blue_diamond:Usage

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

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

# :small_blue_diamond:License

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

# :small_blue_diamond: 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> .