JSPM – react-native-rectangle-color-picker@2.0.1

Package Exports

react-native-rectangle-color-picker
react-native-rectangle-color-picker/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-rectangle-color-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-rectangle-color-picker

A color picker on diamond or rectangle palette.

Install

For RN >= 0.60

npm i --save react-native-rectangle-color-picker react-native-gesture-handler

For RN < 0.60

npm i --save react-native-rectangle-color-picker@1.x react-native-gesture-handler@1.2.2

And be aware of https://github.com/software-mansion/react-native-gesture-handler/issues/1164 if you use react-native-web and want to slide on web.

Usage

import React from 'react';
import { View } from 'react-native';
import tinycolor from 'tinycolor2';
import ColorPicker from 'react-native-rectangle-color-picker';

export default class SliderColorPickerExample extends React.Component {
    constructor(props) {
        super(props);
        this.state = { oldColor: '#dc402b' };
    }

    componentDidMount() {
        setTimeout(() => this.setState({ oldColor: '#fde200' }), 1000);
    }

    changeColor = colorHsv => this.setState({ oldColor: tinycolor(colorHsv).toHexString() })

    render() {
        return (
            <View style={{alignItems: 'center'}}>
                <ColorPicker
                    ref={view => {this.colorPicker = view;}}
                    oldColor={this.state.oldColor}
                    onColorChange={this.changeColor}
                    textSaturation={'Saturation'}
                    diamond={true}
                    staticPalette={true}/>
            </View>
        );
    }
}

Props

Prop	Type	Optional	Default	Description
oldColor	Color string	Yes	undefined	Initial positon of the picker indicator
onColorChange	function	Yes		Callback called while the user click a color or release the slider. The 1st argument is color in HSV representation (see below). The 2nd string argument is always 'end'.
hideSliders	bool	Yes	false	Set this to true to hide the saturation sliders.
textSaturation	string	Yes	'Saturation'	Set the title text of the saturation slider.
diamond	bool	Yes	true	Show diamond or rectangle palette.
staticPalette	bool	Yes	true	Set this to false to let the slider change the saturation of palette.

HSV color representation is an object literal with properties:

{
    h: number, // <0, 360>
    s: number, // <0, 1>
    v: number, // <0, 1>
}

Donate

To support my work, please consider donate.

ETH: 0xd02fa2738dcbba988904b5a9ef123f7a957dbb3e