🔴 🟢 🔵

Reanimated Color Picker

- Pure javascript color picker for react-native.

🔹 Table of contents

• 1️⃣ Prerequisites.

• 2️⃣ Installation.

• 3️⃣ Usage.

• 4️⃣ Api.

  • ColorPicker Wrapper
  • Build In Components
    • <Preview />.
    • <Panel />.
    • <HueSlider />.
    • <SaturationSlider />.
    • <BrightnessSlider />.
    • <OpacitySlider />.
    • <Swatches />.

• 5️⃣ License.

🔹Prerequisites

• Press the links bellow to follow the installation instructions.

• react-native-gesture-handler.

• react-native-reanimated.

🔹Installation

Note First we need to install react-native-gesture-handler(>=2.0.0) and react-native-reanimated(>=2.0.0),

• Open a Terminal in the project root and run:

npm i reanimated-color-picker

🔹Usage

• You can add, remove, rearrange or style the color picker build in components.

• You can also add your own components.

• Check out the working example here.

import React, { useState } from 'react';
import { Button, Modal, View } from 'react-native';

import ColorPicker, { Panel, Swatches, Preview, OpacitySlider, HueSlider } from './lib/index';

export default function App() {
  const [showModal, setShowModal] = useState(false);

  const onSelectColor = ({ hex }) => {
    // do something with the selected color
    console.log(hex);
  };

  return (
    <View style={styles.container}>
      <Button title='Color Picker' onPress={() => setShowModal1(true)} />

      <Modal visible={showModal}>
        <ColorPicker value='red' onComplete={onSelectColor}>
          <Preview />
          <Panel />
          <HueSlider />
          <OpacitySlider />
          <Swatches />
        </ColorPicker>

        <Button title='Ok' onPress={() => setShowModal(false)} />
      </Modal>
    </View>
  );
}

🔹Api

🔺ColorPicker Wrapper

• The ColorPicker Wrapper is responsible for managing the build in components.

• It has the following props:

🔸value

• The initial value of the color picker.
• Accepts 'hex', 'rgb', 'rgba', 'hsl', 'hsla', and named color formats.
• type: string
• default: '#418181'

🔸tracksHeight

• Change all sliders track height.
• type: number
• default: 25

🔸thumbsSize

• Change all sliders thumb size.
• type: number
• default: 35

🔸width

• The width of the color picker wrapper.
• All of build in components will inherit this width.
• type: number
• default: 300

🔸style

• Color picker wrapper style.
• If you want to change the width use the width property.
• type: object

Note some of the style properties will be overwritten.

🔸onChange

• Called every time the color value changes.
• The passed color object has the following properties: hex, rgb, rgba, hsl, hsla
• type: (color: object) => void
• default: null

🔸onComplete

• Called when the user lifts his finger from the slider or when clicks on a swatch.
• The passed color object has the following properties: hex, rgb, rgba, hsl, hsla
• type: (color: object) => void
• default: null

🔺Build In Components

🔸<Preview />

• The preview of the selected and the initial color.

Note some of the style properties will be overwritten.

🔸<Panel />

• A square to change color brightness and saturation.

Note some of the style properties will be overwritten.

🔸<HueSlider />

• A slider to changes color hue.

Note some of the style properties will be overwritten.

🔸<SaturationSlider />

• A slider to changes color saturation.

Note some of the style properties will be overwritten.

🔸<BrightnessSlider />

• A slider to changes color brightness.

Note some of the style properties will be overwritten.

🔸<OpacitySlider />

• A slider to changes color opacity.

Note some of the style properties will be overwritten.

🔸<Swatches />

• A list of swatches to select a color.

Note some of the style properties will be overwritten.

🔹License

• MIT