Package Exports
- @iomechs/rn-color-palette
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 (@iomechs/rn-color-palette) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
RNColorPalette (Android & IOS)
A color Picker for React Native Devs :)
Below you will find some information on how to perform common tasks.
Table of Contents
Demo
Features
Installation
Install the package in your project's folder by using npm or yarn:
npm install @iomechs/rn-color-palette
or
yarn add @iomechs/rn-color-palette
Basic Usage
Import RNColorPalette in your AppComponent as below:
import RNColorPalette from '@iomechs/rn-color-palette';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
colorValue: 'orange',
colors = ['orange', 'red', '#ffd655', '#abeb34', '#b4bec8', '#0acfae', '#ff6d01'];
};
}
colorPicked = color => {
this.setState({
colorValue: color,
});
};
AddColor = color => {
this.setState({
colors: [...this.state.colors, color],
});
};
render() {
const {colors, colorValue} = this.state;
return (
<RNColorPalette
colorList={colors}
value={colorValue}
onItemSelect={this.colorPicked}
AddPickedColor={color => this.AddColor(color)}
style={{
backgroundColor: colorValue,
width: 110,
height: 30,
}}>
<View style={styles.paletteText}>
<Text>Default Palette</Text>
</View>
</RNColorPalette>
);
}
}
}
Props
Pull Requests
Feel free to make Pull Requests for your feature/fix. To run the project, run
npm install
or
yarn
then
npm start
Props
Props | Type | isRequired | Example |
---|---|---|---|
value | string | Yes | Provide value of color to mark as selected. |
colorList | array | No | Provide list of colors to show in palette. |
style | object | No | Style for component passed inside library. |
paletteStyle | object | No | Style for color palette container. |
palettePosition | object | No | It has 2 properties, increaseMargin to increase margin from your component and decreaseMargin to descrease margin. |
colorContainerStyle | object | No | Style color elements inside palette, by-default it's borderRadius: 100. |
onItemSelect | function | No | Return a color which is selected in palette. |
AddPickedColor | function | No | Return a color which is added new from picker and by-default it calls onItemSelect. |
License
MIT © IOMechs