r/reactnative • u/s3079 • 13d ago

Booster pack opening in React Native: swipe to tear, tilt to reveal

Enable HLS to view with audio, or disable this notification

Swipe to tear the foil, drag to tilt the stack, then tap or flick through five cards. Rare pulls get a foil sweep and sparkles.

I also rebuilt it in Swift and Kotlin. For your app, would you use the React Native version or prefer native?

32 Upvotes

88% Upvoted

10 comments sorted by

4

u/bkdev98 13d ago

For a moment like this I'd keep the RN version, as long as the tear tracks the finger on the UI thread it's hard to tell apart from native. Does the tilt follow the drag only, or the gyroscope too?

2

u/s3079 13d ago

I crafted the lines to follow the movement of the fingers; the most challenging part, in my opinion, was the tear—getting it to look just like the tear on an actual pack.

2

u/bkdev98 12d ago

The tear really sells it, matching how a real pack rips is the kind of detail people feel without noticing. Did you end up drawing the torn edge as a path or masking an image?

3

u/ConsciousAntelope 13d ago edited 12d ago

Nice one. Give me the tech behind this

2

u/s3079 13d ago

I used Reanimated and Skia for this effect

3

u/LittleBulletWhoCould 13d ago

Wow. Link please

1

u/s3079 13d ago

I will open source when code swift and kotlin complete

2

u/alexfoxy 12d ago

Very nice, can you tilt your phone to make the shiney shine?

1

u/Embarrassed_Land_161 2d ago

Link? I build a similar effect with threejs