# @skynetcmg47/react-native-status-color-picker

> Customizable color picker for your beautiful react native apps

Latest version **1.0.7** (published 2020-09-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @skynetcmg47/react-native-status-color-picker
pnpm add @skynetcmg47/react-native-status-color-picker
yarn add @skynetcmg47/react-native-status-color-picker
bun add @skynetcmg47/react-native-status-color-picker
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2020-09-26 |
| First published | 2020-07-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 495.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Nam Phuong |
| Maintainers | skynetcmg47 |
| Keywords | react native color picker, react native custom color picker, react native simple color picker, color picker with text, color picker, ios, android, mobile app development |

## Links

- npm: https://www.npmjs.com/package/@skynetcmg47/react-native-status-color-picker
- Repository: https://github.com/skynetcmg47/react-native-status-color-picker
- Homepage: https://github.com/skynetcmg47/react-native-status-color-picker#readme
- Issues: https://github.com/skynetcmg47/react-native-status-color-picker/issues
- npm.io page: https://npm.io/package/@skynetcmg47/react-native-status-color-picker

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.7 (latest) — 2020-09-26
- 1.0.6 — 2020-09-20
- 1.0.5 — 2020-08-28
- 1.0.4 — 2020-07-13

## README

# React Native Status Color Picker
This repo is forked from https://github.com/ThakurBallary/react-native-status-color-picker
Customizable color picker for your beautiful react native apps

![LICENSE MIT](https://img.shields.io/badge/license-MIT-brightgreen.svg)

### Getting Started

There are three components in this package:
  - ColorPicker
  - FullScreenColorStatus
  - StatusColorPicker  

```
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.

![DEMO](./docs/images/react-native-status-color-picker.gif)

### Installation
```
npm i @skynetcmg47/react-native-status-color-picker --save
```

### Basic Usage


###### ColorPicker
```
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';

import { ColorPicker } from '@skynetcmg47/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',
  },
});

```


###### FullScreenColorStatus
```
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';

import { FullScreenColorStatus } from '@skynetcmg47/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,
  },
});

```


###### StatusColorPicker
```
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { MaterialCommunityIcons as Icon } from '@expo/vector-icons';

import { StatusColorPicker } from '@skynetcmg47/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',
  },
});
```

### Props

###### ColorPicker
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
style | JSON | style for circle color picker

###### FullScreenColorStatus
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

###### StatusColorPicker
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

### Contributing

Suggestions and Contributions are always welcome. 

Please read [CONTRIBUTING.md](https://gist.github.com/PurpleBooth/b24679402957c63ec426) for details on our code of conduct, and the process for submitting pull requests to us.

### License
This project is licensed under the [MIT License](https://github.com/ThakurBallary/react-native-status-color-picker/blob/master/LICENSE)

---
_Source: https://npm.io/package/@skynetcmg47/react-native-status-color-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._