Practical hacks for delightful interactions

Vicenti shows a photo viewer running on a $50 Android device and a four-year-old iPhone, where users can swipe a photo away. Its shared element transition uses a third, fake image to make the movement work across screens. He uses the example to introduce the tradeoffs behind delightful interfaces.

With the default Animated setup, JavaScript sends incremental animation updates to the UI thread, which can cause lag when JavaScript is busy. The native driver lets supported animations, such as opacity and transforms, run on the UI thread at 60 frames per second. It does not support layout and position values, so transitions can require complicated transform and scaling code.

React Native's responder system handles touches through JavaScript, which can be busy and miss frame deadlines. Users may tolerate about 100 milliseconds before an interaction begins, but expect smooth updates every 16 milliseconds once it starts. Vicenti suggests using the initial delay to prepare work, starting preparation on touch down, and using InteractionManager to defer other demanding JavaScript work.

Vicenti describes React Native Interactable and Gesture Handler as promising native-thread approaches, but says they were not yet mature solutions in React Native core. His practical workaround is to use an animated ScrollView as a main-thread gesture recognizer and map its scroll position to transforms. This can feel natural for a photo viewer, though scroll behavior limits control over how gestures end.

Vicenti recaps three approaches: run fire-and-forget animations on the UI thread, respect users' timing expectations, and repurpose ScrollView for gesture handling. He says hacks can be costly to maintain, but they can deliver interactions that would otherwise be out of reach and help reveal what libraries need to support.