Building Better Apps with React Native

This real-time face blurring app processes a gigabyte of data every two seconds. See how it was built with just a few dozen lines of JavaScript.

#1about 3 minutes

Understanding React Native's architecture and performance model

React Native leverages JavaScript for its development speed while achieving near-native performance through its native UI components and the Hermes engine.

#2about 1 minute

Speeding up development with fast refresh and OTA updates

Fast refresh provides instant feedback during development, while over-the-air (OTA) updates allow for pushing production changes without a new app store submission.

#3about 2 minutes

Leveraging the Expo ecosystem for faster app development

The Expo ecosystem simplifies development with tools like Expo Go for instant prototyping and Expo Application Services (EAS) for managing cloud builds and submissions.

#4about 1 minute

Using essential community libraries and basic components

An overview of recommended community libraries for common tasks like camera and graphics is provided, along with a look at a basic React Native component structure using hooks.

#5about 2 minutes

Using Vision Camera and frame processors for real-time video

The Vision Camera library simplifies camera control and enables real-time video analysis by running JavaScript functions called frame processors on every captured frame.

#6about 2 minutes

Creating custom graphics and effects with React Native Skia

React Native Skia allows for drawing custom 2D graphics and shaders with JavaScript, which can be combined with camera frames to build interactive effects like an object detector.

#7about 1 minute

Building a real-time face blurring filter like Snapchat

A step-by-step guide shows how to build a performant, 60 FPS face-blurring effect by detecting faces and applying a Skia blur filter within a frame processor.

#8about 3 minutes

Analyzing performance and production use cases

A breakdown of the face-blurring app's performance shows it processes gigabytes of data per second, proving React Native is suitable for demanding production applications.

#9about 1 minute

Comparing approaches for building custom native modules

An overview of the three primary methods for creating custom native modules in React Native: the official Turbo Modules, Expo Modules, and the high-performance Nitro Modules.

#10about 5 minutes

Creating type-safe native modules with Nitro and Nitrogen

Nitro Modules use the Nitrogen code generator to create type-safe native bindings from a TypeScript specification, preventing runtime errors and ensuring code correctness.

#11about 2 minutes

Prototyping apps instantly with the AI tool Rourke

Rourke is an AI-powered tool that generates a functional React Native app from a text prompt, allowing for instant testing on a device via Expo Go without any local setup.