Janik started with mobile apps built using Cordova and web views, then began working with React Native when it was iOS-only. He contributed fixes to React Native early on, when the project had more bugs and simpler issues to address. As the ecosystem matured, he found more contribution work in third-party libraries than in React Native core.
React Native Ease: Faster Native Animations with Platform Primitives
Speakers
Janik from Up and Flow discusses React Native Ease, his animation library, with host Łukasz Kuczyński on Callstack’s React Universe On Air.
Janik helped implement Animated’s native driver, which moved animation work from JavaScript to the UI thread. He saw that simple animations could use platform APIs directly: Core Animation on iOS runs through a render server outside the app’s UI thread. React Native Ease grew from that idea, focusing on simple transitions rather than trying to cover every animation.
React Native Ease wraps a regular view and animates supported properties when their values change. Developers use React state and choose an animation configuration, such as a spring or linear transition. The library targets cases like opacity changes and translations; Janik says gestures and complex interactions remain better suited to Reanimated.
The benchmark measures time spent on the UI thread against a roughly 16 millisecond frame budget for 60 FPS. Janik notes that the iOS comparison is not even because Core Animation does little work on the UI thread, while Android offers a fairer comparison across Ease, Reanimated, and Animated. The library began as a fix for a slowly moving onboarding background that stuttered during busy UI frames.
Janik says most apps may see little difference from Reanimated, especially on higher-end devices, and advises against migrating when animations already run smoothly. Ease may reduce resource use and help on low-end devices, while keeping a simple API. Web support maps its props and animation settings to CSS transitions, and the project is intended to stay focused on platform-supported animations.
Takeaways
- Match animation tools to the work: use platform transitions for simple property changes and Reanimated for gestures or complex interactions.
- A UI-thread animation still competes with other UI work; keep frame time near the 16 millisecond budget for 60 FPS.
- Test performance on lower-end devices, where UI work is more likely to expose dropped frames.
- Avoid migrating a working animation setup without a measurable performance or resource benefit.
- Simple animations can often be driven by ordinary React state and transition configuration.
Mentioned in this talk
Search inside this talk
What was claimed 9
- role at
“I'm an engineering manager, and today I'm your host.”
YouTube Unverified1 source· Talk
- works atJanik works at Up and Flow
“I've been working at Up and Flow for a while.”
YouTube Unverified1 source· Talk
- builtJanik built React Native Ease
“the library you created, React Native Ease”
YouTube Unverified1 source· Talk
- uses
“On iOS, that’s Core Animation.”
YouTube Unverified1 source· Talk
- uses
“On Android ... Animator.”
YouTube Unverified1 source· Talk
- featureReact Native Ease: React state driven animations with configurable spring or linear transitions
“Whenever the value changes for one of these props, it will be animated.”
YouTube Unverified1 source· Talk
- metricReact Native Ease: Aims to reduce UI thread time per frame; benchmark uses an approximately 16 ms budget at 60 FPS
“You have a budget of about 16 milliseconds per frame, which is the standard for 60 FPS.”
YouTube Unverified1 source· Talk
- featureReact Native Ease: Supports web through CSS transitions
“Web support was pretty simple because it maps directly to CSS transitions.”
YouTube Unverified1 source· Talk
- integrates withReact Native Ease integrates with CSS transitions
“It maps directly to CSS transitions.”
YouTube Unverified1 source· Talk
