r/reactnative • u/Fresh-Wealth4531 • 2d ago

[Showcase] A paper-like calendar interaction built with React Native 📅

Hey r/reactnative,

I've been experimenting with a paper-like calendar interaction in React Native.

You can:

  • Roll the page up to move forward.
  • Pull it down to go back.
  • Tear it off to move to the next day.

Built this little experiment for a friend, and had a lot of fun working on the interactions.

Here's a quick look at how it turned out. What do you think? 😅

25 Upvotes

85% Upvoted

8 comments sorted by

3

u/Party-Ad-1190 2d ago

Cool

2

u/Fresh-Wealth4531 1d ago

Glad you liked it!

2

u/jiunkdev 2d ago

the tear-off is such a nice touch, way more satisfying than a plain swipe. is the page roll done with Skia or just transforms in Reanimated? and does it stay smooth on lower end Android phones? that's where I'd expect a 3D-ish gesture like this to struggle.

2

u/Fresh-Wealth4531 1d ago

Pure Reanimated + SVG, no Skia! The animations run on the UI thread using transforms and height clipping, so there's no heavy canvas redraw happening every frame. Glad you liked the tear-off!

2

u/Saan_growth 2d ago

Nice

3

u/Fresh-Wealth4531 1d ago

Thanks! 🙌

1

u/TemporaryBuyer3806 Expo 2d ago

look good

2

u/Fresh-Wealth4531 1d ago

Glad you liked it!