I Tried Snap’s Valdi – Is It Better Than React Native?

Snap, the company behind Snapchat, released Valdi, a new cross-platform UI framework designed to deliver native performance without sacrificing developer velocity. In this video, I try Valdi for the first time, sharing my honest experience setting up a new project and exploring its features compared to React Native.

Valdi compiles declarative TypeScript UI components directly to native views on iOS, Android, and Mac OS, avoiding JavaScript bridges or web views. It includes features like automatic view recycling, optimized layout with Yoga, built-in animations and gestures, and multi-threaded JavaScript execution. This tutorial is for React Native developers curious about new alternatives and native performance improvements.

What's inside

• Snap, the company behind Snapchat
• How Valdi compiles declarative TypeScript UI to native views
• Valdi’s performance advantages like view recycling and optimized layout
• Setting up the Valdi development environment on macOS
• Bootstrapping a new Valdi UI application
• Exploring Valdi’s hot reload and debugging experience
• Styling and component creation with Valdi’s React-like syntax
• Built-in animations and gesture handling in Valdi

Snap, the company behind Snapchat

Snapchat’s team has been using Valdi internally for about eight years to build their fast native app, which surprised me since I thought Snapchat was fully native. Valdi is written in TypeScript and targets native views directly, avoiding the JavaScript bridge architecture of older React Native versions. Snap calls Valdi “Vetera” in open source because their tools and docs need more battle testing outside their internal use.

They are positioning Valdi as a competitor to React Native, especially targeting developers frustrated with React Native’s reliance on bridges or web views. Snap reached out to me months ago to test Valdi but declined once they learned I work at Expo, citing conflict of interest. This video is my personal, unsponsored opinion.

How Valdi compiles declarative TypeScript UI to native views

Valdi lets you write your UI declaratively in TypeScript, similar to React or React Native, but it compiles directly to native views on iOS, Android, and Mac OS. There are no web views or JavaScript bridges involved, which should improve performance.

The framework uses a React-like component model with classes extending from Valdi core components. It uses Yoga for layout, the same flexbox engine React Native uses, so styling feels familiar if you know React Native’s stylesheet. Valdi also supports multi-threaded JavaScript execution with worker threads, enabling performant animations and gestures.

Valdi’s performance advantages like view recycling and optimized layout

Valdi includes several performance optimizations:

• Automatic view recycling: native views are reused across screens to reduce memory and rendering overhead
• Optimized component rendering: components rerender independently without forcing parent rerenders, enabling fast updates
• A C++ layout engine running on the main UI thread with minimal overhead, using Yoga for flexbox layout
• Viewport-aware rendering: only visible views are inflated, making infinite scrolling performant by default

These features aim to deliver smooth native performance without the complexity of React Native’s older bridge architecture.

Setting up the Valdi development environment on macOS

To get started, you need macOS with dependencies like Homebrew, Java, Android SDK, Git, and Watchman. Valdi provides a CLI tool and a valdi dev setup command to install and configure these automatically.

I ran into some setup issues related to Android NDK paths but was able to fix them manually. The setup process can be slow and sometimes painful, especially on the first run, but it handles most dependencies for you.

Bootstrapping a new Valdi UI application

Using the Valdi CLI, you can bootstrap a new project with valdi bootstrap. It asks if you want a UI or CLI app; I chose UI to test on iOS. The CLI scaffolds a project with familiar structure and dependencies.

After bootstrapping, you run the iOS app with the Valdi CLI. The initial build and reload times are slow, but hot reload works and updates the UI quickly once running.

Exploring Valdi’s hot reload and debugging experience

Valdi supports instant hot reload and full VS Code debugging. The syntax is similar to React Native’s JSX with TypeScript for type safety, making it approachable for React Native developers.

I experienced some warnings and minor issues but was able to change UI properties like background color and padding with fast reloads. The logs run directly inside the render method, showing immediate feedback on changes.

Styling and component creation with Valdi’s React-like syntax

Valdi uses Yoga for layout, so styling with flexbox is familiar if you know React Native. However, inline styles are not supported, which I found limiting.

Components extend from Valdi core classes, similar to old React class components. You export classes extending from Component in val-core. This is a bit different from modern React function components but still straightforward.

Built-in animations and gesture handling in Valdi

Valdi includes built-in support for native animations and gestures out of the box, unlike React Native where you need extra dependencies like React Native Reanimated or Gesture Handler.

Animations are simple to use with an animate method that accepts duration and properties, enabling things like crossfades easily. Gesture recognition supports tap, double tap, long press, drag, rotate, and pinch gestures built-in.

This integrated approach reduces setup complexity and feels more predictable and easier to use compared to React Native’s ecosystem.

Resources

CourseReact Native course

Master React Native fundamentals and ship production apps with confidence.