custom_toolbar

Animated Toolbar

A Custom playful, interactive toolbar made in React Native with cool gesture based interruptible animations.

📽️ Video | Playlist

• Toolbar.tsx:- Implementation using reanimated & gesture-handler.
• ToolbarAnimated.tsx:- Implementation using built-in Animated and Gesture APIs.

👀 This is how it looks

rn_custom_toolbar_demo_ios.mov

✨ Some features

1. Toolbar buttons expands on long click
2. After long press on any button, using gestures haptics play as you scrub through the items (No conflict with default list scrolling)
3. The items scale up/down as they become show/hide while scrolling.
4. Scroll Rubberbanding effect when scrolling past the top or bottom, which stretches the item's spacing out (works on iOS only)

📦 Packages used

1. react-native-gesture-handler:- Long & Pan gesture to activate the items
2. react-native-reanimated:- All the animation logic & also for scroll handler
3. react-native-vector-icons:- Google Material icons
4. react-native-sfsymbols:- Apple's SF Symbols (iOS only)

🌻 Motivation

Inspired by this original iOS implementation by jtrivedi.

🔗 Links

• YouTube Tutorial
• Demo: twitter | youtube short 1, short 2