How to add animated stickers packs to WhatsApp using React Native?

Question

I am using image picker to pick animated webp images in react-native android and can add static stickers but it fails to add animated sticker pack. To avoid file type issues I have used sample stickers from WhatsApp's sample animated sticker assets. (png tray icon sized 96x96 under 50kb and 3 animated webp files)

I am using react-native-whatsapp-sticker and modified it according to a repo react-native-dynamic-whatsapp-sticker. Those modules have not get updated since 2-3 years so the repo does not contains code for animated stickers. So I compered my module with WhatsApp sample app and made changes accordingly.There is no errors building the apk and stickers get added if I set animated sticker pack to false. But setting "animated_sticker_pack"=true and then adding sticker pack, WhatsApp show error as "there is problem with this pack...".

below is the code and links for modules file. I have been trying hard to solve it but could not get success. Thanks in advance.

Code:

    let pack = {
      "identifier": 'id1',
      "name": 'name1',
      "publisher": 'pub',
      "tray_image_file": tray,
      "publisher_email": Meta['EMAIL'],
      "publisher_website": Meta['SITE'],
      "privacy_policy_website": Meta['POLICY'],
      "license_agreement_website": Meta['LICENSE'],
      "image_data_version":"1",
      "avoid_cache":true,
      "animated_sticker_pack":true, // if false then works fine for static sticker 
      "stickers": stickers // array of {image_file:image.uri, emojis:['', ''],}
    }

  const send = (pack) => {
    return RNWhatsAppStickers.prepare(JSON.stringify(pack))
    .then(str => JSON.parse(str.slice('1')) ) // {"animated_sticker_pack": 1, "identifier": "id1", "isWhitelisted": 0, "name": "name1", "publisher": "pub"}
    .then(res => RNWhatsAppStickers.send(res.identifier,res.name) )
  }

all those 5 java files responsible for sending sticker to WhatsApp. https://github.com/CrackerKSR/temporary

I have tried your code . and found that sometimes I got "There's a problem with your sticker pack" even with static images.. I am using External uri in tray_image_file and stickers image_file — Double H, Jan 01 '22 at 19:23
@DoubleH I have made changes after reading similar code in flutter module. Now whatsapp accepting the sticker pack and also it shows the animation icon over pack in whatsapp but still there is issue with the stickers only. tray icon is vissible but it shows "something wrong" whenI open the pack to send stickers. And I checked the framecount and duration of image those are not according to the requirement. duration is 0 and frame is 1 which means animated webp files are converted to static only. it only storing the first frame I think which makes it static. — PyProto, Jan 01 '22 at 21:47
It maybe BitmapFactory.decodeStream(inputStream); losing all frames except first or compress(Bitmap.CompressFormat.WEBP, 100, out); . Also there is one more doubt with closing the inputstream after BitmapFactory.decodeStream(inputStream); inputstream.close() and returning the bitmap of it. I dont know how these bitmap and bytes works. I am hvaing doubt on the only after some tests.. Ref file: https://github.com/CrackerKSR/temporary/blob/main/RNWhatsAppStickersModule.java — PyProto, Jan 01 '22 at 21:52
Do you have code examples so that I can compare and make changes accordingly. Right now its accepting the animated pack but not showing the stickers — PyProto, Jan 01 '22 at 21:55
[https://gist.github.com/doublehrajput/5700e97e86724a34fc2cbc4c1c065ba2](https://gist.github.com/doublehrajput/5700e97e86724a34fc2cbc4c1c065ba2) .I have used your github repo java files.. But my sticker pack configuration consist of dynamic links .. Am I doing wrong? — Double H, Jan 02 '22 at 03:26
I am trying to implement pack which fetches stickers from server url — Double H, Jan 02 '22 at 03:32
This module automatically download the images if we pass the URLs of images. so no issue if the image is on local or cloud. — PyProto, Jan 02 '22 at 07:23
Yes. I have also tested it.. But if I try to add a pack (same config without adding to whatsapp) it alert unexpected.. sometimes it alert... There's a error with sticker pack but sometimes it alert desired.... — Double H, Jan 02 '22 at 10:13
I also found that image download process is asynchronous.... If I disable or down my internet... The process keeps on running without downloading images and cause "There's is error with sticker pack" ... — Double H, Jan 02 '22 at 13:15
Okay I got solution. Animated pack is working now but the issue is if I add new pack the old one stickers get vanished (but the icon and pack name will be there without actual stickers.). I will share the module after fixing all. — PyProto, Jan 03 '22 at 06:38
Yes . I also got trapped in same situation.. My Previous packs showing errors — Double H, Jan 03 '22 at 06:40
Did you able to resolve the issue? ... I think issue is in uri schema .. After creating a new pack URI call for stickers of previous pack not happening but tray_icon_image is called by ContentProvider — Double H, Jan 05 '22 at 14:03
I got it all working.... There is some minor mistake ..... please replace `sticker_pack` with `sticker_packs` in Both `StickerContentProvider` and `RNWhatsAppStickersModule` files. Hope it will help you — Double H, Jan 06 '22 at 10:32
I will release the npm module with all required features like retriving added stickers, getting details about error on sending pack to whatsapp.. Resizing the pack also included.. — CrackerKSR, Aug 21 '23 at 14:10

How to add animated stickers packs to WhatsApp using React Native?

0 Answers0