# react-native-stickers

> Fully customizable image sticker editor for react native

Latest version **0.0.2** (published 2019-03-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-stickers
pnpm add react-native-stickers
yarn add react-native-stickers
bun add react-native-stickers
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2019-03-31 |
| First published | 2019-03-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 26.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 32 |
| Author | Dave Barner |
| Maintainers | dbarner |
| Keywords | react-native, photo stickers, stickers, image editing, view-shot, view shot, react, image, images, image stickers |

## Links

- npm: https://www.npmjs.com/package/react-native-stickers
- Repository: https://github.com/dbarner1/react-native-stickers
- Homepage: https://github.com/dbarner1/react-native-stickers#readme
- Issues: https://github.com/dbarner1/react-native-stickers/issues
- npm.io page: https://npm.io/package/react-native-stickers

## Dependencies (3)

- [react](https://npm.io/package/react.md) *
- [react-native](https://npm.io/package/react-native.md) *
- [react-native-view-shot](https://npm.io/package/react-native-view-shot.md) ^2.5.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.2 (latest) — 2019-03-31
- 0.0.1 — 2019-03-31

## README

# react-native-stickers
A fully customizable image editing tool that allows the user to add a sticker, and output an updated image.

<p align="center">
<img src="sticker_ux.gif" width="50%" style="margin-left: 25%, margin-right: 25%, margin-bottom: 200px;" />
</p>

## Install
Install via npm:
```sh
 npm install react-native-stickers --save
```

## Usage
```js
 import { StickerPicker } from 'react-native-stickers';
```

```
<StickerPicker
  visible={this.state.pickerVisible}
  topContainer={<View style={{paddingTop: 60, paddingBottom: 40, textAlign: 'center', alignItem: 'center', justifyContent: 'center'}}><Text style={{alignSelf: 'center', fontSize: 18}}>Get stickering!</Text></View>}
  bottomContainer={<Text style={styles.actionTitle}>Save Picture</Text>}
  bottomContainerStyle={styles.bottomContainerStyle}
  completedEditing={(imageUri, width, height) => this.setState({ pickerVisible: false, finalImage: {imageUri, width, height} })}
  includeDefaultStickers={true}
  imageStyle={null}
  previewImageSize={50}
  stickerSize={100}
  imageSource={'https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80'}
  stickers={null}
 />
```

## Props

| Prop                | Type          | Required  | Default | Description                                                                             |
| ------------------- | ------------- | --------- | ------- | --------------------------------------------------------------------------------------- |
| visible              | boolean      | Yes        |  -       | Whether the sticker picker modal is visible or not.        |
| topContainer              | component      |  Yes        |  -       | The component that renders at the top of the image editor.        |
| bottomContainer              | component      | Yes        |   -      | The component that renders at the top of the image editor.  Clicking this component saves the image, and returns it to the completedEditing prop.     |
| bottomContainerStyle              | style object      | No        |    -     | The style of the bottom container       |
| completedEditing              | callback function      | Yes        |    -     | The function called when the user is done editing the image.  Receives the final image url, width, and height.        |
| includeDefaultStickers              | boolean      | No        |    Yes     | Whether the default stickers should be included in the image editor or not.        |
| imageStyle              | style object      | No        |   -      | The style of the sticker.       |
| previewImageSize              | number      | Yes        |      -   | The size of the preview images, in pt.        |
| stickerSize               | number         | Yes        |    -     | The size of the selected sticker.       |
| imageSource              | url      | Yes        |   -      | The url of the image to edit.  |
| stickers              | array      | No        |   -      | An array of image objects to render as possible stickers.  |

## Contributions/Suggestions
Feel free to add issues and PRs.  As with any project, there are things to improve!

## Author / Share Rights
Dave Barner (dbarner@gmail.com); Code is free for all to use. <3

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