Skip to content

Drops Lifetime — $56Pricing Market About

Home Drops PricingSign in

© 2026 Motionary Inc.
All rights reserved.

Product

Explore
Sell

Company

About

Legal

Privacy Policy
Terms of Service

Social

What's Included

TypeScript source (Container.tsx)
SVG checkmark + spinner icons (Checkmark.tsx, Loading.tsx)
Demo screen (App.tsx)
README with install + usage
MP4 preview

About the Project

Built with react-native-reanimated v4 — a single `progress` shared value (0 Save → 1 Saving → 2 Saved → 3 reset) drives the entire choreography on the UI thread, so width, background color (interpolateColor), label letters, and the indicator all stay in sync with zero React state. Each suffix letter is a worklet-animated Animated.Text that fades and slides over its own staggered slice for the rolling effect. The status indicator layers an AnimatedBlurView (expo-blur, intensity animated via useAnimatedProps) over a spinner that scales out as the checkmark scales in; the spinner spin uses a Reanimated CSS keyframe animation. Tap scaling comes from pressto's PressableScale and the app is wrapped in react-native-gesture-handler's root view. Icons are react-native-svg. Tested on Expo SDK 56 (iOS + Android); note that the expo-blur indicator looks best on iOS.

Save Status Button preview

Created bymehdi_made

Save Status Button

Free

Commonreanimatedexpoexpo blurreact native svgreact native gesture handlerreact native

An animated submit button that walks through Save → Saving → Saved on tap. The width springs open, the label morphs letter-by-letter (e → ing → ed) with a staggered roll, and a blurred spinner crossfades into a checkmark before the whole thing resets. Perfect for form submits, bookmark/like actions, or any optimistic async confirmation.

File Details

Total Size

0.13 MB

Code

package.json

More from mehdi_made

Receipt Printer

Receipt Printer

The iPhone Dynamic Island morphs into a thermal printer and feeds out a receipt line-block by line-block, then tap to tear the finished sheet away. Perfect for checkout confirmations, order-success screens, paywalls, or any moment worth celebrating.

Telegram Swipe Actions

Telegram Swipe Actions

A Telegram-style chat list row you can drag either way to reveal circular action buttons — Mute, Delete, Archive on the left drag, Unread and Pin on the right. Buttons stagger in as the row travels, overdragging stretches the edge button into a pill that fires its action on release, and only one row can ever be open at a time. Drop it around any list item (FlatList, LegendList, FlashList) that needs iOS-grade swipe actions.

Flip Calendar

An Apple-Calendar-style card whose big day number split-flaps through dates like an airport board or flip clock. Every flip is driven by a single 0..1 shared value, so you can scrub it with the included drag slider or play it through with a spring or timing the control and the calendar can never disagree.