react-native-color-picker-light

This color picker component for React Native is designed for IoT light controlling function. Therefore we provide two mode. One is for white light mode, another is for color light mode.

Tutorial

Demo

  • iOS Style

ios-white

ios-color

  • Android Style

android-white

android-color

Install

npm install react-native-color-picker-light

or

yarn add react-native-color-picker-light

and install cocoapods

cd ios
pod install

Very Important !!!

Because this library is written by Swift, you have to create Bridge-Header.

  • First, you should open the project in XCode. Then click new file.

xcode_setup_01

  • Select Swift File, then click next.

xcode_setup_02

  • Name the file as Dummy.swift and click create.

xcode_setup_03

  • Finally, Xcode will ask you do you want to create bridge header. Please select Create Bridging Header.

xcode_setup_04

Usage

const picker = useRef();

<ColorPicker
  ref={picker}
  type="color"
  style={{ width: 200, height: 200 }}
  onColorChange={color  => {
	console.log('color:', color);
  }}
/>

picker.current.setColor('#f0ce78');

Props

type

Used to choose which type of picker you want.

Type Required default
color | white No color

onColorChange

Callback that is called when the user select a color.

Type Required default
function No null

GitHub