A Free and Open Source UI and animation samples created in react-native.

The project contains 3 UI templates, and 5 interactive animations samples (more to add in future) listed below:

Samples:

1. Hotel Booking: Shows the list of hotels nearby with their ratings and other details, filter UI and custom calendar view etc. (Demo)
2. Design Course: A minimal UI showing list of courses related to UI design. (Demo)
3. Animated OnBoarding: An onboarding UI flow with smooth animations, for a Mental Wellness App. (Demo)

Animation Challenges:

Animation challenges that utilise the built in Animated APIs, as well as community provided solutions such reanimated, gesture-handler, Skia, SVG etc.

1. Vertical Toolbar: A Custom playful, interactive toolbar with cool gesture based interruptible animations. (Animated, Reanimated) (Demo)
2. Color Swatch: A Color Swatch that plays a circular rotation based on user gestures. (Demo)
3. Grid Magnification: A grid list view that displays Magnify effect on long press & drag, focusing on the items near the touch area within a radius. (Reanimated, Skia) (Demo)
4. Rope Physics: A realistic looking gesture controlled, bezier based Rope UI implementation and related samples. (Reanimated, gesture-handler, Skia, SVG) (Demo)
5. Custom Cursor/Caret: A Customizable custom cursor/caret for TextFields, with intuitive validation animations for max length and password strength. (Demo)

Tutorials

Tutorials for some of these samples can be found in my youtube channels (main, shorts)

Check out this youtube playlist

For more demos for such challenges, check out my Twitter/X.

What's more?

More samples that are currently not included here are available on my Patreon, some of which I might open source in the future.

Screenshots