Journal

Tag

#reanimated

BankID Sweden Login Animation in React Native: the App Store logo on a glass tile over a blue gradient with bubbles
Guides 7 min read

BankID Sweden Login Animation in React Native

Build the BankID Sweden login animation in React Native with Reanimated while keeping real auth in the official, certified flow. Here is the code and the rules.

Lawrence Arya · June 18, 2026
Tinder swipe card animation in React Native with Reanimated: a phone toggle icon surrounded by location, calendar, settings, wallet and chart app icons on a coral gradient
Guides 10 min read

Tinder swipe card animation in React Native with Reanimated

Build a Tinder-style swipe card in React Native with Reanimated and Gesture Handler. Here is the core gesture, the snap logic, and the bugs to avoid.

Lawrence Arya · June 10, 2026
Tinder super like star animation in React Native (Reanimated): a glass iPhone UI wireframe icon on a holographic purple gradient
Guides 10 min read

Tinder super like star animation in React Native (Reanimated)

Build a Tinder super like star burst in React Native with Reanimated. Here is the burst, how to wire it to the like action, and when to use Lottie instead.

Lawrence Arya · June 10, 2026
Voice interrupt animation in React Native: barge-in UI: a glowing iPhone home-screen icon on a purple and blue gradient
Guides 10 min read

Voice interrupt animation in React Native: barge-in UI

Build a voice interrupt (barge-in) animation in React Native with Reanimated. Here are the four states, the audio-reactive orb, and the interrupt logic.

Lawrence Arya · June 10, 2026
Wheel of fortune spinning animation in React Native (Reanimated): the App Store logo as a glossy glass icon on a purple and blue gradient with floating bubbles
Guides 10 min read

Wheel of fortune spinning animation in React Native (Reanimated)

Build a wheel of fortune spin in React Native with SVG and Reanimated. The key: choose the winning segment first, then animate the wheel to land on it.

Lawrence Arya · June 10, 2026
Build a Swipe-to-Buy Button Animation in React Native: a glowing iPhone home-screen icon on a purple and blue gradient
Guides 6 min read

Build a Swipe-to-Buy Button Animation in React Native

A swipe-to-buy button slides to confirm a purchase, preventing accidental taps. Here is how to build the animation in React Native with Reanimated and gestures.

Lawrence Arya · June 8, 2026
Build a Toss-Style Banking App UI Clone in React Native: a glossy App Store icon on a blue, pink and orange gradient with bubbles
Guides 8 min read

Build a Toss-Style Banking App UI Clone in React Native

Toss feels premium because of minimalism and micro-animation, not its brand. Here is how to build a Toss-style banking app UI clone in React Native.

Lawrence Arya · June 8, 2026
Hero Animations in React Native: Shared Elements in 2026: a glowing iPhone home-screen icon on a purple and blue gradient
Guides 5 min read

Hero Animations in React Native: Shared Elements in 2026

Reanimated tags first, the manual overlay in your pocket: how shared element transitions actually work, and where the bridge breaks.

Lawrence Arya · June 7, 2026
Live-Stream Tip Shower Animation in React Native: a glowing iPhone home-screen icon on a purple and blue gradient
Guides 6 min read

Live-Stream Tip Shower Animation in React Native

The gift rain is a business mechanic, not decoration: UI-thread particles, value encoded in spectacle, and a shower that only plays once the payment confirms.

Lawrence Arya · June 7, 2026
Live-Tracking Map Marker Animation in React Native: the App Store logo on a glass tile over a blue gradient with bubbles
Guides 6 min read

Live-Tracking Map Marker Animation in React Native

The feed is a heartbeat; the animation makes it continuous. Interpolate between updates, rotate to bearing, keep the marker off React state, and keep the ETA honest.

Lawrence Arya · June 7, 2026
React Native Game Loop Engine Hook: a vivid neon 3D App Store icon on an orange, pink and blue gradient
Guides 5 min read

React Native Game Loop Engine Hook

React's event model fights a per-frame tick: run a frame-synced loop off the JS thread with Reanimated, pass delta time, and add start/stop/pause.

Lawrence Arya · June 7, 2026
Safari-Style Scroll-to-Hide Bottom Tab Bar in React Native: a glossy App Store icon on a blue, pink and orange gradient with bubbles
Guides 6 min read

Safari-Style Scroll-to-Hide Bottom Tab Bar in React Native

An auto-hiding tab bar maximizes content but cuts discoverability. Drive it on the UI thread with a scroll threshold, full snapping, and a reliable way back.

Lawrence Arya · June 7, 2026
Fixing Claude React Native Reanimated Errors, Fast: the App Store logo as a frosted glass icon on a pink and blue gradient with bubbles
Workflows 5 min read

Fixing Claude React Native Reanimated Errors, Fast

The Reanimated errors Claude-generated code hits most: the babel plugin rule, version mismatches, worklet violations, and the prompts that fix each one.

Lawrence Arya · June 5, 2026
Fix Jumping Bottom Sheets in AI Reanimated Code: a vivid neon 3D App Store icon on an orange, pink and blue gradient
Workflows 5 min read

Fix Jumping Bottom Sheets in AI Reanimated Code

AI-generated Reanimated bottom sheet jumping or stuttering? Here is why the gesture and animation fight, and how to make it smooth, from a free template.

Lawrence Arya · June 1, 2026
Fix Reanimated Tinder Swipe Card Memory Leaks in RN: the App Store logo on a glass tile over a blue gradient with bubbles
Workflows 5 min read

Fix Reanimated Tinder Swipe Card Memory Leaks in RN

AI-generated Tinder swipe stack leaking memory in React Native? Here is why cards and animation values pile up, and how to clean them so it stays smooth.

Lawrence Arya · June 1, 2026