DEV Community

Cover image for Yoga: A Simple Guide to Layout in React Native
running squirrel
running squirrel

Posted on

Yoga: A Simple Guide to Layout in React Native

#ios #android #mobile #reactnative

When you build layouts in React Native, you write styles that look a lot like CSS: flexDirection, alignItems, justifyContent, and so on.

But here's the interesting part:

There's no browser.

So… what's actually calculating your layout?

That's where Yoga comes in.

What is Yoga?

Yoga is an open-source, embeddable, high-performance layout engine that implements a subset of CSS Flexbox (and evolving toward broader web standards).

It calculates the size and position of UI elements ("boxes") based on styles like flex properties, margins, padding, and alignment.

Written primarily in C++ (with earlier C implementations), Yoga is not a full UI framework, it does no drawing or rendering.

Your Code (JS)
 ↓
React Native
 ↓
🧠 Yoga (calculates layout)
 ↓
Native Views (iOS / Android)
Enter fullscreen mode Exit fullscreen mode

How Did Yoga Come About?

Early on, Meta/Facebook faced a big challenge: building consistent layouts across platforms.

  • iOS had its own layout system

  • Android had a completely different one

  • Web used CSS and Flexbox

Maintaining separate layout logic for each platform quickly became painful.

So Meta built Yoga, a layout engine that could:

  • Run on multiple platforms

  • Deliver consistent layout behavior

  • Be fast enough for mobile apps

Eventually, they open-sourced it, and it became a core part of React Native.

Today, Yoga lives at yogalayout.dev and continues evolving with contributions from the community and Meta.

Why React Native Needs Yoga

Unlike web apps, React Native doesn't have access to browser engines like Chrome or Safari.

That means:

  • No built-in Flexbox engine

  • No CSS layout engine

  • No DOM

Native platforms use different layout systems:

  • iOS: Auto Layout (constraints-based) or manual frame setting.

  • Android: Various ViewGroup layouts (LinearLayout, ConstraintLayout, etc.).

Without a unified system, developers would face platform-specific code, inconsistent behavior, and harder maintenance.

React Native's promise is "learn once, write anywhere," so layout must feel consistent and declarative.

Consistency for the same layout code to produce identical results across iOS, Android, web (in some contexts), and other platforms.

How Yoga Solves Layout

Whenever you write styles in React Native, Yoga steps in behind the scenes.

<View style={{
  flexDirection: 'row',
  justifyContent: 'space-between'
}}>
  <View style={{ width: 50, height: 50 }} />
  <View style={{ width: 50, height: 50 }} />
</View>
Enter fullscreen mode Exit fullscreen mode

Here's what happens:

  • Style Translation: React Native passes these props to Yoga nodes.

  • Layout Calculation: Yoga builds a tree of nodes and runs its Flexbox algorithm to compute exact positions and sizes. It handles nesting, wrapping, stretching, shrinking, percentages, and more.

  • Native Application: Results are applied to native views (UIView on iOS, View on Android) for rendering.

What Yoga actually does:

  1. Builds a layout tree 
Parent View
├── Child 1 (50x50)
└── Child 2 (50x50)
Enter fullscreen mode Exit fullscreen mode
  1. Applies Flexbox rules 
flexDirection: row → horizontal layout

justifyContent: space-between → push items apart
Enter fullscreen mode Exit fullscreen mode
  1. Calculates positions 
Parent Width = 300 (example)

Child 1 → x: 0 Child 2 → x: 250
Enter fullscreen mode Exit fullscreen mode
  1. Then React Native simply renders this using native components. 
|[■]--------------------[■]|
Enter fullscreen mode Exit fullscreen mode

All of this happens incredibly fast because Yoga is written in C++ and optimized for performance.

One important detail:  Yoga doesn't render anything, it only calculates layout.

Are There Alternatives?

Yoga dominates in React Native, but alternatives and related options exist:

Native-only approaches: Use platform-specific tools like ConstraintLayout (Android) or Auto Layout/SwiftUI (iOS). These require more conditional code and lose the "write once" benefit.

Other Flexbox engines: Older css-layout (Yoga's predecessor) or community ports.

Emerging alternatives: Libraries like Taffy (Rust-based, supports more CSS features like Grid and calc) are discussed in other UI contexts as potential future options, though not integrated into React Native.

Web-based: For React Native Web, it aligns with browser Flexbox/Grid, but Yoga handles the native side.

Custom or third-party: Some apps mix Yoga with manual native layout for performance-critical sections, or use libraries like Reanimated for animated layout changes on top of Yoga.

Conclusion

Yoga is one of those tools you rarely think about, but rely on constantly.

It quietly powers every layout in React Native, translating simple style rules into precise, performant UI across platforms.

Next time you align a few views with justifyContent, take a moment to appreciate the sophisticated engine working behind the scenes, doing Yoga, so you don't have to.

For deeper dives, check the official docs at yogalayout.dev or experiment in a React Native project. Happy coding!

Top comments (0)