0.0.2 • Published 5 years ago
react-native-stickers v0.0.2
react-native-stickers
A fully customizable image editing tool that allows the user to add a sticker, and output an updated image.
Install
Install via npm:
npm install react-native-stickers --saveUsage
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