"The ultimate WhatsApp sticker manager to create, manage and share the stickers for React Native apps."
React Native Whatsapp Stickers Manager is a library that allows you to create and manage WhatsApp sticker packs dynamically within your React Native application. It provides a set of APIs to perform various operations such as creating new sticker packs, adding stickers to existing packs, updating pack metadata, and more.
- Create sticker pack (Animated / Non-Animated)
- Retrieve all packs
- Delete all packs
- Retrieve a pack by identifier
- Delete a pack by identifier
- Add sticker pack to WhatsApp
- Whitelist check (includes unofficial whatsapp mods)
- Dynamic stickers
- ✨ Update existing pack (packs that are already added to WhatsApp))
- 📦 Change the sticker pack name
- 📦 Change the publisher name
- 📦 Replace tray icon image
- 🎭 Add a new sticker to the pack
- 🎭 Remove a sticker from the pack
- 🎭 Replace sticker images
- 📨 Event listener for user interaction with WhatsApp sticker pack addition
- [x] Android (Tested with API level 33, 34)
- [ ] iOS
npm install react-native-whatsapp-stickers-manager...import RNWSManager from 'react-native-whatsapp-stickers-manager';❗❕ Currently available methods
createPack, deletePacksAll, getPacksAll, isPackAddedToWhatsApp, addPackToWhatsApp, validatePackRest of methods will be awailable after end of beta version
Table if content
1.A: Pack Specific Methods 📦
1.B: WhatsApp Interaction 🟢
2.A: Stickers Specific Methods 🎭
Create a new sticker pack with the provided pack details and sticker images For a complete reference of the sticker pack structure and requirements, see Sticker Pack and Sticker Object:
// Define a sticker object
const sticker = {
image_file: '/storage/emulated/0/Download/stickers/flying_bird.webp',
emojis: ['✌️', '🕊️']
}
// Define a sticker pack object
const stickerPack = {
// Required fields (see Sticker Pack Structure for details)
tray_image_file: '/storage/emulated/0/Picture/rolling_panda.webp',
name: 'Sticker Pack Name',
publisher: 'Publisher Name',
stickers: [sticker, sticker2, sticker3]
}
// Create a new sticker pack
await RNWSManager.Pack.createPack(stickerPack)// Retrieve a single sticker pack by identifier
await RNWSManager.Pack.getPack({
identifier: number
})Get a list of all sticker packs currently available in the app.
// Retrieve all available sticker packs
await RNWSManager.Pack.getPacksAll()// Update sticker pack metadata with optional fields
await RNWSManager.Pack.updatePackMeta({
identifier: number,
name?: string,
publisher?: string
});// Replace the tray image icon of a sticker pack
await RNWSManager.Pack.updateTrayIcon({
identifier: number,
newTrayImagePath: string
})// Delete a single sticker pack by identifier
await RNWSManager.Pack.deletePack(identifier: number)
// Delete all sticker packs
await RNWSManager.Pack.deletePacksAll()Get the response status from WhatsApp when sending a sticker pack.
The response status contains information about the outcome, including a type field indicating success or error, and a message` field providing a brief description of the error.
// Add a sticker pack to WhatsApp with a given identifier and name
await RNWSManager.Pack.addPackToWhatsApp({
identifier: number,
name: string
})Response result example:
"status": {
"code": 0,
"isPackValid": false,
"message": "sticker count should be between 3 to 30 inclusive, it currently has 2, sticker pack: 34",
"type": "validation_error"
}Alert Boxes which returns the response result from WhatsApp:
❕❗For more information on the response object and its properties, see the Response Object Details section
// Check if a sticker pack is added to WhatsApp with an optional filter
await RNWSManager.Pack.isPackAddedToWhatsApp({
identifier: number,
includeExtraPackages?: string[] // Optional filter for WhatsApp mods
})// Add a new sticker to a sticker pack
await RNWSManager.Sticker.addStickerToPack({
identifier: number,
newStickerPath: string
})// Replace an existing sticker with a new one
await RNWSManager.Sticker.replaceSticker({
identifier: number,
sticker_id: number,
newStickerPath: string
})// Remove a sticker from a sticker pack
await RNWSManager.Sticker.removeStickerFromPack({
identifier: number,
sticker_id: number
})❗ Method will be integrated in first public version. This method only validate the image fles and returns validation report to help debug and fix the image
let stickerPack = {
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",
publisher_email:"contact@myproject.com",
publisher_website:"https://myproject.com",
privacy_policy_website:"https://myproject.com/legal",
license_agreement_website:"https://myproject.com/license",
// identifier, // Auto filled using primary key
name: "My Sticker Pack",
publisher: "Publisher Name",
tray_image_file: "/storage/emulated/0/Download/trayIcon.webp",
image_data_version: "1",
avoid_cache: false, // false is default
animated_sticker_pack:true,
stickers: stickerFiles.map(item=>{
return {
image_file: item.path, // eg.: "/storage/emulated/0/Download/flying_bird.webp
emojis: item.emojiArray // eg.: ["😁","😋","😍"]
}
})
};-
image files: The image files you provide should not contain "file://" prefix, it may cuase
FileNotFoundException -
tray_image_file: .
-
image_data_version: The version of the image data for the sticker pack.
-
avoid_cache: A boolean value indicating whether to avoid caching for this sticker pack. The default - value is false.
-
animated_sticker_pack: A boolean value indicating whether this is an animated sticker pack or not.
-
stickers: An array of sticker objects, where each sticker object has the following properties:
- image_file: The file path to the sticker image file (e.g., /storage/emulated/0/Download/flying_bird.webp).
- emojis: An array of emojis associated with the sticker (e.g., ["😁", "😋", "😍"]).
The response returned when user interact with the alert box of whatsapp appeares when sending sticker pack to whatsapp. This result is useful when you don't know what went wrong at runtime.
- It will resolve/reject the promise when user will interact with the alert box as the promie is attached to event listener.
- It supports most common types of errors/sucess.
- In some cases,
isPackValidmay be false even if the pack is valid. However, it will always be true for the last two alert boxes that say "pack is already added" or "add pack". - The response type
user_touched_outsideis custom and not emitted from WhatsApp. This is returned if the pack is valid, but the user cancels the alert box by tapping outside of it. in that case response would be
{
...
isPackValid: true,
type: "user_touched_outside
...
}Feel free to create an issue for bug, feature suggestion, improvemments, etc. discussion : Use discussion tab for questions and help.
MIT License LICENSE
Inspired by https://github.com/Jobeso/react-native-whatsapp-stickers
Scaffolded with create-react-native-library