native-color-picker

About

Color picker for React Native

Alternatives

• react-native-color-picker by instea
• React Native Color Palette by Holman Strategic Ventures

How to Install

First, install the library in your project by npm:

$ npm install native-color-picker

Or Yarn:

$ yarn add native-color-picker

Expo Project

• install expo-linear-gradient:

$ npm install expo-linear-gradient

Or Yarn:

$ yarn add expo-linear-gradient

Bare React Native Project

• add react-native-linear-gradient – follow instructions here

Getting Started

• Connect library with project using ES6 import:

import NativeColorPicker from 'native-color-picker'

Options

Name	Type	Default	Description	Available options
colors	string[]	[]	Colors to display in a color picker	e.g.: ['#f96204', '#43d8c9']
columns	number	5	Number of columns in color list (only vertical)	Number of columns
gradient	boolean	false	Enable or disable gradient layer over the color item	true - enable, false - disable
horizontal	boolean	false	Enable or disable horizontal scroll direction	true - horizontal, false - vertical
itemSize	number	44	Size (width & height) of list item	Size of list item
onSelect	function	item => item	Select color item	e.g.: elem => { /* code */ }
selectedColor	string		Marked item	Color from the list colors
shadow	boolean	false	Display shadow for list items	true - enable, false - disable
sort	boolean	false	Order colors by perception	true - enable, false - disable
itemProps	TouchableOpacityProps	{}	Item props	TouchableOpacity props
itemStyle	StyleProps	{}	Styles for Item	View styles
markerProps	ViewProps	{}	Item props	View props
markerStyle	StyleProps	{}	Styles for Item	View styles
linearGradientProps	LinearGradientProps	{}	Gradient props	LinearGradientProps props
linearGradientStyle	StyleProps	{}	Styles for Gradient	View styles

License

This project is licensed under the MIT License © 2019-present Jakub Biesiada