Stable version 1.0.2

An elegant color selector solution for React Native apps. Clean and simple to implement.

Currently supported on following platforms:

iOS	Android

To install this module cd to your project directory and enter the following command:

yarn add @react-native-d5m/rn-color-selector

or

npm install @react-native-d5m/rn-color-selector

In your project directory, run:

npm install @react-native-community/slider react-native-linear-gradient

NOTE: If using iOS please remember to install cocoapods by running: npx pod-install in your project directory.

The following code presents the 3 basic usage scenarios of this library:

Allows display of the color selector anywhere in your app. The color selector initially shows a default set of colors to choose from <ColorSelector />, or if the color wheel is selected, the <AdvancedColorSelector /> is displayed where the user can choose any color they desire, including typing in a color in all formats.

import { ColorSelectorProvider } from '@react-native-d5m/rn-color-selector';

return (
    <ColorSelectorProvider> 
        <YourApp />
    </ColorSelectorProvider>
)

import { useColorSelector } from '@react-native-d5m/rn-color-selector';

const openColorSelector = useColorSelector();

const showColorSelector = () => {
    openColorSelector({
        outputColor: (hexColor) => {
            // Do something with hexColor
        }
    });
}

Allows display of the <ColorSelector /> where inserted into the code. This component initially shows a default set of colors to choose from <ColorSelector />, or if the color wheel is selected, the <AdvancedColorSelector /> is displayed where the user can choose any color they desire, including typing in a color in all formats.

import { ColorSelector } from '@react-native-d5m/rn-color-selector';

return (
    <ColorSelector
        outputColor={(hexColor)=>{
            // Do something with hexColor
        }}
    />
);

Allows display of the <AdvancedColorSelector /> where inserted into the code. This component allows usage of only the color pad where the user can choose any color they desire, including typing in a color in all formats.

import { AdvancedColorSelector } from '@react-native-d5m/rn-color-selector';

return (
    <AdvancedColorSelector
        outputColor={(hexColor)=>{
            // Do something with hexColor
        }}
    />
);

colorsArray = {
    [
        {
            title: "Recent Colors",
            data: [
                {
                    colors: [
                        "blue",
                        "red",
                        "white"
                    ]
                }
            ]
        },
        {
            title: "Saved Colors",
            data: [
                {
                    colors: [
                        "yellow",
                        "green",
                         "purple"
                    ]
                }
            ]
        }
    ]
};

When creating an issue please remember to specify the platform which the issue occurs on.

• Noel Beharry - Double5Media
  
  

This module includes extracted module react-native-color and was updated to work with the latest versions of react native.

@react-native-d5m/color-selector is an open source project and is free to use. If you found this module useful, please star it 🌟.

Feeling appreciative and want more?

Donate to keep updates and more fresh React Native Modules coming! 💪