Open source · Author

Inertia — animations for React Native

TypeScriptinertia

Declarative animation primitives for React Native — a thin wrapper over react-native-reanimated 4 where animations are props on a component. Drop in a Motion primitive, hand it an animate prop, and the spring runs on the UI thread.

Why it mattered

Reanimated is superb, but the worklet model is a lot to carry for a fade-in. Inertia was built to clear specific sharp edges I kept hitting in the existing wrappers: style types that didn't narrow per element, spring params borrowed from physics rather than from the API people already knew, and gesture props that had multiplied into a whileTap/whilePress soup. Mount, exit, per-property transitions and gestures all share one shape.

Code contributions

  • Animations expressed as animate and transition props — shared values, worklets and useAnimatedStyle stay hidden
  • Style types inferred per primitive: Motion.View takes ViewStyle, Motion.Text takes TextStyle, so wrong props fail at compile time
  • react-spring's vocabulary (tension, friction, mass, velocity) instead of Reanimated's raw stiffness/damping
  • One gesture prop shape — pressed, focused and hovered on every primitive, rather than a separate pressable variant
  • Memoized worklet factory hashes resolved animate/transition objects, so re-renders with unchanged values allocate no new UI-thread closures
  • Tree-shakable subpaths per primitive, with bundle size verified in CI

Tech

Reanimated 4Animation

How I use these tools

Links

Writing about this project

Other projects

  • react-navigationRouting and navigation for React Native and web apps.
  • react-native-paperMaterial Design components for React Native (Android & iOS).
  • react-multi-carouselA lightweight, production-ready carousel with multi-item and SSR support — no dependencies, 2kb.
  • uiA component library for React Native & Expo that works with any design system — Material Design 3 out of the box.
  • resistor-color-calculatorWork out a resistor's value from its colour bands, without the effort.

Want something like this built?

Get in touch →