# @bayramitto/react-native-colorpicker

> React Native Color Picker is a basic color picker from your favorite color palette.

Latest version **1.0.27** (published 2023-07-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @bayramitto/react-native-colorpicker
pnpm add @bayramitto/react-native-colorpicker
yarn add @bayramitto/react-native-colorpicker
bun add @bayramitto/react-native-colorpicker
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.27 |
| Published | 2023-07-26 |
| First published | 2022-09-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | bayram-arif |
| Maintainers | bayramitto |
| Keywords | react-native, color, picker |

## Links

- npm: https://www.npmjs.com/package/@bayramitto/react-native-colorpicker
- Repository: https://github.com/Bayramito/react-native-colorpicker
- Homepage: https://github.com/Bayramito/react-native-colorpicker#readme
- Issues: https://github.com/Bayramito/react-native-colorpicker/issues
- npm.io page: https://npm.io/package/@bayramitto/react-native-colorpicker

## Alternatives

- [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads
- [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads
- [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads
- [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads
- [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads

## Recent versions

- 1.0.27 (latest) — 2023-07-26
- 1.0.26 — 2023-05-22
- 1.0.25 — 2022-10-18
- 1.0.24 — 2022-10-02
- 1.0.23 — 2022-10-02
- 1.0.22 — 2022-09-23
- 1.0.21 — 2022-09-23
- 1.0.20 — 2022-09-23
- 1.0.19 — 2022-09-23
- 1.0.18 — 2022-09-22
- 1.0.17 — 2022-09-22
- 1.0.16 — 2022-09-22
- 1.0.15 — 2022-09-22
- 1.0.14 — 2022-09-22
- 1.0.13 — 2022-09-22
- … 6 more at https://npm.io/package/@bayramitto/react-native-colorpicker/versions

## README

# React Native ColorPicker

*A very basic color picker for React Native. Created with Reanimated 2*

## Description
IMPORTANT! <br>
With this picker you can get the HEX/DEC color codes of your selected color, you can set your own color palette and use them wherever you wish.

## Preview
![ezgif-3-4c9d63a9eb](https://github.com/Bayramito/react-native-colorpicker/assets/44513402/10caf76c-d821-4ef1-b308-33cc2b1add99)

## Note
Make sure you have following packages installed on your project.
```
npm i react-native-linear-gradient
npm i react-native-reanimated
npm i react-native-gesture-handler
```
If you alredy have them, you can skip this.
## Installation

```
npm i @bayramitto/react-native-colorpicker 
```

## Usage

```javascript
import ColorPicker from "@bayramitto/react-native-colorpicker";
```

```javascript
const App = () => {
  const [bg, setBg] = useState('#000');

  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: bg,
      }}>
      <ColorPicker
        styles={{
          width: 200,
          height: 15,
          borderRadius: 20,
          borderWidth: 1,
          borderColor: '#fff',
        }}
        onColorChanged={color => {
          setBg(color);
        }}
      />
    </View>
  );
};
```

## Properties

| Prop  | Default  | Type | Description |
| :------------ |:---------------:| :---------------:| :-----|
| colors | - | `Array`   | You can define your own color palette in Array of HEX codes eg. ["#fa3261","#c9a221"] 
| *style (Required) | - | `object` | Specify the style of the ColorPicker. ( `width` and `height` values REQUIRED ) |
| onColorChanging| - |`callback`| Returns output format of the `interpolateColors` from Reanimated 2
| *onColorChanged (Required)| - |`callback`| Returns hex code of selected color eg. `#e5ca55`.
|circleSize| - | number | Size of the circle on picker.



## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

## License
[MIT](https://choosealicense.com/licenses/mit/)

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