https://github.com/alabsi91/reanimated-color-picker

A Pure JavaScript Color Picker for React Native
https://github.com/alabsi91/reanimated-color-picker

android color expo ios picker react-native renimated web

Last synced: about 1 year ago
JSON representation

A Pure JavaScript Color Picker for React Native

• Host: GitHub
• URL: https://github.com/alabsi91/reanimated-color-picker
• Owner: alabsi91
• License: mit
• Created: 2022-06-29T18:45:29.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2025-05-01T19:30:46.000Z (about 1 year ago)
• Last Synced: 2025-05-15T00:06:10.836Z (about 1 year ago)
• Topics: android, color, expo, ios, picker, react-native, renimated, web
• Language: TypeScript
• Homepage: https://alabsi91.github.io/reanimated-color-picker/
• Size: 21.5 MB
• Stars: 345
• Watchers: 3
• Forks: 20
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-side-quests - alabsi91/reanimated-color-picker - friendly, no native code (Mobile / React Native & Expo)

README

          
: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



  



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