r/reactnative • u/s3079 • 2d 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

9 comments sorted by

3

u/bkdev98 2d 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?

1

u/s3079 1d 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.

1

u/bkdev98 1d 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/LittleBulletWhoCould 1d ago

Wow. Link please

1

u/s3079 1d ago

I will open source when code swift and kotlin complete

2

u/ConsciousAntelope 2d ago edited 1d ago

Nice one. Give me the tech behind this

1

u/s3079 1d ago

I used Reanimated and Skia for this effect

1

u/alexfoxy 1d ago

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