React Native Whatsapp Stickers Manager

"The ultimate WhatsApp sticker manager to create, manage and share the stickers for React Native apps."

Description

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.

Features

Basic Features :

• 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

Advance Features :

• ✨ 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

Supported Platforms

• [x] Android (Tested with API level 33, 34)
• [ ] iOS

Installation

npm install react-native-whatsapp-stickers-manager...

Import

import RNWSManager from 'react-native-whatsapp-stickers-manager';

❗❕ Currently available methods createPack, deletePacksAll, getPacksAll, isPackAddedToWhatsApp, addPackToWhatsApp, validatePack Rest of methods will be awailable after end of beta version

Usage

Table if content

1.A: Pack Specific Methods 📦

• 1.1: Create a new sticker pack
• 1.2: Retrieve Sticker Packs
• 1.3: Update Sticker Pack Metadata
• 1.4: Replace Tray Image Icon of a Sticker Pack
• 1.5: Delete Sticker Packs

1.B: WhatsApp Interaction 🟢

• 1.6: Add a Sticker Pack to WhatsApp
• 1.7: Check if a Sticker Pack is Added to WhatsApp

2.A: Stickers Specific Methods 🎭

• 2.1: Add a New Sticker
• 2.2: Replace a Sticker
• 2.3: Delete a Sticker

1.A: Pack Specific Methods 📦

1.1 Create a new sticker pack

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)

1.2 Retrieve Sticker Packs

// 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()

1.3 Update Sticker Pack Metadata

// Update sticker pack metadata with optional fields
await RNWSManager.Pack.updatePackMeta({
  identifier: number,
  name?: string,
  publisher?: string
});

1.4 Replace Tray Image Icon of a Sticker Pack

// Replace the tray image icon of a sticker pack
await RNWSManager.Pack.updateTrayIcon({
  identifier: number,
  newTrayImagePath: string
})

1.5 Delete Sticker Packs

// Delete a single sticker pack by identifier
await RNWSManager.Pack.deletePack(identifier: number)

// Delete all sticker packs
await RNWSManager.Pack.deletePacksAll()

1.B: WhatsApp Interaction 🟢

1.6 Add a Sticker Pack to WhatsApp

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

1.7 Check if a Sticker Pack is Added to WhatsApp

// 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
})

2.A: Stickers Specific Methods 🎭

2.1 Add a New Sticker

// Add a new sticker to a sticker pack
await RNWSManager.Sticker.addStickerToPack({
  identifier: number,
  newStickerPath: string
})

2.2 Replace a Sticker

// Replace an existing sticker with a new one
await RNWSManager.Sticker.replaceSticker({
  identifier: number,
  sticker_id: number,
  newStickerPath: string
})

2.3 Delete a Sticker

// Remove a sticker from a sticker pack
await RNWSManager.Sticker.removeStickerFromPack({
  identifier: number,
  sticker_id: number
})

validate: check if an image file is a valid sticker

❗ 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

Detailed Reference

Sticker Pack and Sticker Object

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:"[e-mail]",
      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., ["😁", "😋", "😍"]).

Response Object Details

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, isPackValid may 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_outside is 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
  ...
  }

⚠️ Note: While the library aims to provide accurate response results, there may be edge cases or scenarios where the response is incorrect or unexpected. If you get any problematic response results, please create a new issue to help improve this feature.

Contributing

Feel free to create an issue for bug, feature suggestion, improvemments, etc. discussion : Use discussion tab for questions and help.

CONTRIBUTING.md

License

MIT License LICENSE

Acknowledgments

Inspired by https://github.com/Jobeso/react-native-whatsapp-stickers
Scaffolded with create-react-native-library

---