WhoBuilt

Skia Meets React Native: Revolutionizing Mobile UIs and Animations

Sep 26, 2024· 29 min· 948 views·Watch on YouTube

Speaker

Akshat Pauldigital specialist; technology consultant at McKinsey

Akshat Paul, founder and CDO of Company360, explains how React Native Skia can support mobile graphics and animations at Callstack’s RUC 2024.

Why Skia

Paul describes Skia as an open-source 2D graphics library for drawing shapes, text, and images. He says it powers parts of Android, Chrome, and Flutter, and traces its history from its founding in 2004 to its integration with React Native in 2021.

Where other graphics tools fall short

Paul compares Skia with PNGs, SVGs, Lottie, Reanimated, Gesture Handler, and Three.js. He says static images do not adapt to interaction, embedded Lottie animations cannot be changed in real time, and the other tools have limits for complex mobile 2D graphics.

Drawing and animating with Skia

Paul introduces React Native Skia with the package install command `npm install @shopify/react-native-skia`. His first demo draws a circle, adds a radial gradient to make it look like a sphere, then animates its vertical position and squash using React state and timed updates.

Building a sprinkle effect

Paul walks through a second demo that animates falling sprinkles. Each rounded rectangle gets a position, color, and randomized motion; timing moves it down the screen while computed transformations rotate it around three axes. A pressable title and start button add interaction.

What to explore next

Paul points to shaders as a way to create pixel-level visual effects and suggests combining Skia with React Native Animated and Gesture Handler for interactive experiences. He recommends Shopify’s documentation and blog, the shaders.do playground, Dan’s GitHub examples, and William’s React Native demos.

Takeaways

  • Use Skia when an interface needs interactive 2D graphics that static images or embedded animations cannot provide.
  • A radial gradient can add depth to a basic shape without introducing a separate animation library.
  • Use randomized positions and rotations to make repeated animated elements look less uniform.
  • Combine Skia with gesture handling when graphics need to respond to touch.
  • Explore shaders for visual effects that require control over individual pixels.

Mentioned in this talk

Company360GoogleShopifyChromeReact Native SkiaReact Native Gesture HandlerReanimatedReactSkiaAndroidFlutterApple MetalLottieThree.jsSkia shaders

Search inside this talk

What was claimed 12

Related talks