Remotion and Animations in React Native

Burger describes his work as a React Native developer and how the idea for Remotion came while he was making a promotional video for an app. Remotion uses the `useCurrentFrame` hook to expose a frame number to a React component, which can render different visuals for each frame. It uses the standard web React reconciler rather than a special video reconciler.

Remotion is useful for data-driven videos and generating many videos from a dataset or template. Burger gives examples including a cinema’s daily Instagram Story and stock tickers posted to Twitter. Developers can connect APIs and GitHub Actions to automate video creation and posting.

A project starts with `npm init video`, then developers build a React component and preview it in a timeline editor. Remotion opens a headless browser, captures each frame as a screenshot, and uses FFmpeg to encode the images into an MP4; a 30-second video takes around 1,000 screenshots. Burger says audio was a frequently requested addition, and notes that Remotion suits React developers, while simple trimming or joining is easier in a tool like iMovie.

Burger contrasts Remotion, which can render frames slowly before encoding them into a video, with React Native, where animations need to run smoothly during app use. Animated can avoid React re-renders, while its native driver supports only some view properties. LayoutAnimation offers a simple way to animate layout changes, and Reanimated 2 lets developers write regular JavaScript worklets that run on another thread.

Burger describes a range of options, from high-level libraries such as Moti to Reanimated, native APIs, and React Native Skia, with different levels of control and performance. Lottie uses predefined JSON animations created in tools such as After Effects, making designer handoff easier. Because Lottie animations are predefined, they cannot respond to runtime input such as gestures or scrolling.