Instagram Stickers - “Can it be done in React Native?”

11,777

403 0

Published 2023-08-22

Source code: github.com/wcandillon/can-it-be-done-in-react-nati…

Boilerplate: bit.ly/instagram-sticker-boilerplate

Learn React Native Gestures and Animations at start-react-native.dev/

Example of Sticker with Skia: github.com/Shopify/react-native-skia/blob/main/exa…
Matrix Swap PR in Skia: github.com/Shopify/react-native-skia/pull/1797/fil…

Chapters:
0:00 Intro
2:13 Create stickers from Figma
14:42 Gesture handing
25:36 Share picture
27:20 Performance tip

All Comments (21)

@sarojregmi200 10 months ago

Happy to see a new video in this series.
@MaxIme555 10 months ago

Happy you posted a new video, they are by far the best react-native videos ;)
@NametVevo 10 months ago

J'adore cette série, ça me donne plein d'idée pour mes projets ! (j'adore aussi ton accent Français ahah)
@JoseGarcia-vr8mx 10 months ago

William, thank you so much for creating this amazing video. keep doing the amazing work you are doing! 🙏🏽
@hectoradanmoraleslugo5693 10 months ago

Love it, I'm going to try this!
@yohaiwiener 9 months ago

Your videos are awesome! Thank you for taking the time to share with everyone! One question. What about applying an offset whilst pinching? I can get an image to offset using the focal points but never to preserve the correct offset after the scaling is affected.
@rog0079 10 months ago

Damn I missed your content!!
@Mehrabm 10 months ago

Great Video🎉 I'm happy
@omega5298 10 months ago

That video is helpful and useful. I'm looking forward to a tutorial on how to create the animation for switching between light mode and dark mode, as demonstrated in your App.js Conf 2023 presentation. 😍
@codefriendly8528 10 months ago

Hello William, thank you so much for creating this amazing video. Can you please explain me how to edit saved image? is this possible or not?
@ByteSound 5 months ago

Hey Willam. Thanks for this, it helped a lot. One feedback, in the toM4 function of the matrix helpers, skewX and skewY should change places. So skewX should be at index 1 and skewY should be at index 4.
@bullettime2808 6 months ago

I'm just not able to understand this matrix stuff, would love to see a tutorial series that would teach us from the basics to advanced concepts of RN Skia and Gesture Handler
@account-vj2tx 6 months ago

How could I place editable texts in the sticker location? With customizable fonts and colors? It could be an idea for the next video.
@PitZza143 10 months ago

Thanks new video <3
@efari 10 months ago

What is the intro music please? Reminds me of Ratatat
@noramanga 10 months ago

Great content😬! Please what is the font used for the code in the intro part of the tutorial ?
@martinwinther9006 6 months ago

what version of skia can i use the matrix buffer ? :)
@luizv 2 months ago

What is the color scheme you use? Also loved how the rgb codes are color highlighted. It's an extension?
@rohovdmytro 10 months ago

@William, how do you render 3d mockup of a phone in Remotion?
@bagusamrullah4371 10 months ago

Hi @William Candillon, amazing video as usual! I am wondering if we can insert "text" just like on the Instagram app ? Im still have not found the way to dynamically add text with react native skia .. Thank you !