Customizable color picker for your beautiful react native apps
Update in progress
There are three components in this package:
import { ColorPicker, FullScreenColorStatus, StatusColorPicker } from 'react-native-status-color-picker';
Each component is independent and explained in Basic Usage section below. Use them as per your requirement.
npm i react-native-status-color-picker --save
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { ColorPicker } from 'react-native-status-color-picker';
export default class App extends Component {
state = {
colors: ["#F44336", "#E91E63", "#9C27B0", "#673AB7", "#3F51B5", "#2196F3", "#03A9F4", "#00BCD4", "#009688", "#4CAF50", "#8BC34A", "#CDDC39", "#FFEB3B", "#FFC107", "#FF9800", "#FF5722", "#795548", "#9E9E9E", "#607D8B"],
selectedColor: '#F44336',
};
onSelect = color => this.setState({ selectedColor: color });
render() {
return (
<View style={styles.container}>
<ColorPicker
colors={this.state.colors}
selectedColor={this.state.selectedColor}
onSelect={this.onSelect}
/>
<Text>Selected Color = {this.state.selectedColor}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { FullScreenColorStatus } from 'react-native-status-color-picker';
export default class App extends Component {
state = {
colors: ["#F44336", "#E91E63", "#9C27B0", "#673AB7", "#3F51B5", "#2196F3", "#03A9F4", "#00BCD4", "#009688", "#4CAF50", "#8BC34A", "#CDDC39", "#FFEB3B", "#FFC107", "#FF9800", "#FF5722", "#795548", "#9E9E9E", "#607D8B"],
selectedColor: '#F44336',
text: '',
};
onChange = data => {
this.setState({ selectedColor: data.selectedColor, text: data.text });
};
render() {
return (
<View style={styles.container}>
<FullScreenColorStatus
colors={this.state.colors}
selectedColor={this.state.selectedColor}
text={this.state.text}
onChange={this.onChange}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { MaterialCommunityIcons as Icon } from '@expo/vector-icons';
import { StatusColorPicker } from 'react-native-status-color-picker';
export default class App extends Component {
state = {
visible: false,
colors: ["#F44336", "#E91E63", "#9C27B0", "#673AB7", "#3F51B5", "#2196F3", "#03A9F4", "#00BCD4", "#009688", "#4CAF50", "#8BC34A", "#CDDC39", "#FFEB3B", "#FFC107", "#FF9800", "#FF5722", "#795548", "#9E9E9E", "#607D8B"],
selectedColor: '#F44336',
text: '',
};
ok = data => {
this.setState({ selectedColor: data.selectedColor, text: data.text });
this.close();
};
close = () => {
this.setState({ visible: false });
};
render() {
return (
<View style={styles.container}>
<Icon
name="palette"
style={{ fontSize: 34, color: this.state.selectedColor }}
onPress={() => this.setState({ visible: true })}
/>
<StatusColorPicker
visible={this.state.visible}
colors={this.state.colors}
selectedColor={this.state.selectedColor}
text={this.state.text}
onOk={this.ok}
onCancel={this.close}
/>
<Text>Selected Color = {this.state.selectedColor}</Text>
<Text>Text = {this.state.text}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
Key | Type | Default | Value |
---|---|---|---|
color | Array | [] | hex color code |
selectedColor | String | '' | mention any one color from array of colors |
onSelect | Function | pass function to execute onSelect of color |
Key | Type | Default | Value |
---|---|---|---|
color | Array | [] | hex color code |
onChange | Function | pass function to execute onChange of selectedColor or text | |
selectedColor | String | '' | mention any one color from array of colors |
text | String | '' | any string |
Key | Type | Default | Value |
---|---|---|---|
color | Array | [] | hex color code |
onCancel | Function | pass function to execute onPress of CANCEL | |
onOk | Function | pass function to execute onPress of OK | |
selectedColor | String | '' | mention any one color from array of colors |
text | String | '' | any string |
visible | Boolean | false | true/false |
Suggestions and Contributions are always welcome.
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
This project is licensed under the MIT License