react-native-base-stickers
v1.0.30
Published
create sticker packs for whatsapp with your react-native app
Downloads
92
Maintainers
Readme
RNWhatsAppStickers
Getting started
$ npm install react-native-whatsapp-stickers --save
or
$ yarn add react-native-whatsapp-stickers
Integration
For React Native versions < 0.60 use version 1.+ of this library and checkout the corresponding README file.
Please make sure you follow the requirements for sticker packs from WhatsApp. You can find them here for iOS and here for Android.
iOS
Swift
- Under
Build Settings
sectionBuild Options
setAlways Embed Swift Started Libraries
totrue
- Make sure you have the following under
library search paths
$(inherited)
$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)
Info.plist
- Add the following to your
Info.plist
<key>LSApplicationQueriesSchemes</key>
<array>
<string>whatsapp</string>
</array>
Your Sticker Images
- make sure they follow the guidelines from WhatsApp
- Put the images somewhere in your project directory
- drag and drop them into your XCode Project (recommended to a new folder)
- check
Copy Items If Needed
in the dialogue that pops up and clickFinish
Done 🎉
Android
- Create a
contents.json
file inyourproject -> android -> app -> src -> main -> assets
following the following scheme. Improtant! Including dots in the identifier is causing troubles.
{
"android_play_store_link": "https://play.google.com/store/apps/details?id=com.myapp",
"ios_app_store_link": "https://itunes.apple.com/app/myapp/id123456",
"sticker_packs": [
{
"identifier": "myprojectstickers",
"name": "MyProject Stickers",
"publisher": "John Doe",
"tray_image_file": "tray_icon.png",
"publisher_email": "[email protected]",
"publisher_website": "https://myproject.com",
"privacy_policy_website": "https://myproject.com/legal",
"license_agreement_website": "https://myproject.com/license",
"stickers": [
{
"image_file": "01_sticker.webp",
"emojis": ["✌️"]
},
{
"image_file": "02_sticker.webp",
"emojis": ["😍","😻"]
},
{
"image_file": "03_sticker.webp",
"emojis": ["😎"]
}
]
}
]
}
- Place the WebP images in a folder with with the same name that you defined as
identifier
in the object above under the same directory. So yourassets
folder has the following structure:
assets
+-- contents.json
+-- identifier
| +-- 01_sticker.webp
| +-- 02_sticker.webp
| +-- 03_sticker.webp
- Add
noCompress
to your appbuild.gradle
inyourproject -> android -> app
android {
...
aaptOptions {
noCompress "webp"
}
...
Done 🎉
Usage
Methods
Check if WhatsApp is available
RNWhatsAppStickers.isWhatsAppAvailable()
.then(isWhatsAppAvailable => console.log('available:', isWhatsAppAvailable))
.catch(e => console.log(e))
iOS
- Create a sticker pack
import RNWhatsAppStickers from "react-native-whatsapp-stickers"
const config = {
identifier: '',
name: '',
publisher: '',
trayImageFileName: '',
publisherEmail: '',
publisherWebsite: '',
privacyPolicyWebsite: '',
licenseAgreementWebsite: '',
}
RNWhatsAppStickers.createStickerPack(config)
.then(() => console.log('success'))
.catch(e => console.log(e))
- Add sticker
RNWhatsAppStickers.addSticker('stickername.png', ['😎'])
.then(() => console.log('success'))
.catch(e => console.log(e))
- Send to WhatsApp
RNWhatsAppStickers.send()
.then(() => console.log('success'))
.catch(e => console.log(e))
Android
You are already good to go with the sticker pack creation if you followed the Integration
part.
- Send to WhatsApp where
name
andidentifier
represent the values you defined incontents.json
RNWhatsAppStickers.send('identifier', 'name')
.then(() => console.log('success'))
.catch(e => console.log(e))
Example
App.js
import { Platform } from "react-native";
import RNWhatsAppStickers from "react-native-whatsapp-stickers"
import { stickerConfig } from "./stickerConfig"
const { stickers, ...packConfig } = stickerConfig
RNWhatsAppStickers.isWhatsAppAvailable()
.then(isWhatsAppAvailable => {
if (isWhatsAppAvailable) {
if (Platform.OS === 'ios') {
return RNWhatsAppStickers.createStickerPack(packConfig)
.then(() => {
const promises = stickers.map(item =>
RNWhatsAppStickers.addSticker(item.fileName, item.emojis)
)
Promise.all(promises).then(() => RNWhatsAppStickers.send())
})
.catch(e => console.log(e))
}
return RNWhatsAppStickers.send('myprojectstickers', 'MyProject Stickers')
}
return undefined
})
.catch(e => console.log(e))
stickerConfig.js
export const stickerConfig = {
identifier: 'myprojectstickers',
name: 'MyProject Stickers',
publisher: 'John Doe',
trayImageFileName: 'tray_icon.png',
publisherEmail: '[email protected]',
publisherWebsite: 'https://myproject.com',
privacyPolicyWebsite: 'https://myproject.com/legal',
licenseAgreementWebsite: 'https://myproject.com/license',
stickers: [
{
fileName: '01_sticker.png',
emojis: ['✌️'],
},
{
fileName: '02_sticker.png',
emojis: ['😍', '😻'],
},
{
fileName: '03_sticker.png',
emojis: ['😎']
}
]
}
Troubleshooting
- Create an empty swift file in your project
xCode -> Click File -> new File -> empty.swift
Important Click yes when it asks for creating bridge-headers
Roadmap
- Native implementation of method to check if WhatsApp is installed
- Consistend react-native api