AlteredIdea: Just Another Thought
JSON to TypeScriptJSON to Go StructCSS to React NativeRN Shadow GeneratorRN Flexbox PlaygroundJSON to KotlinJSON to SwiftKotlin FormatterSwift Formatter

RN Flexbox Playground

Visual React Native Flexbox editor with live preview and generated StyleSheet code.

Container

flexDirection
justifyContent
alignItems
flexWrap
gap8
padding8

Children (3/8)

Item 1
Width
Height
flex
alignSelf
Item 2
Width
Height
flex
alignSelf
Item 3
Width
Height
flex
alignSelf
Live Preview
1
2
3
Generated Code
const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    justifyContent: 'flex-start',
    alignItems: 'stretch',
    flexWrap: 'nowrap',
    gap: 8,
    padding: 8,
  },
  item1: {
    height: 60,
    backgroundColor: '#FF6B6B',
  },
  item2: {
    height: 60,
    backgroundColor: '#4ECDC4',
  },
  item3: {
    height: 60,
    backgroundColor: '#45B7D1',
  },
});

React Native Flexbox: the Yoga layout engine explained

React Native uses Yoga, Facebook's open-source cross-platform layout engine, to implement flexbox on iOS and Android. Yoga implements a large subset of the CSS flexbox specification with some intentional differences designed for mobile. The most surprising difference for web developers is that flexDirection defaults to 'column': meaning children stack vertically unless you explicitly set flexDirection: 'row'.

Understanding when to use flex: 1 versus explicit width/height is key to building fluid React Native layouts. A View with flex: 1 fills all remaining space in its parent after fixed-size siblings are placed. Two siblings each with flex: 1 split the space equally. Three siblings with flex values 1, 2, and 1 split it 25%, 50%, 25%. This playground lets you experiment with these ratios visually before writing any component code.

How to use the RN Flexbox playground: step by step

  1. 1
    Set the container properties
    Choose flexDirection (row or column), justifyContent, alignItems, flexWrap, and alignContent for the container. These control how child elements are laid out inside the parent.
  2. 2
    Add and configure children
    Add child elements and set individual flex, alignSelf, width, height, and margin values on each one. Changes appear in the live preview immediately.
  3. 3
    Watch the live preview
    The preview area renders the layout using actual React inline styles that match what React Native's Yoga layout engine produces, so the result accurately represents your mobile UI.
  4. 4
    Copy the StyleSheet code
    The generated code panel shows a complete React Native StyleSheet.create() object with container and child styles. Copy it and paste it directly into your React Native component.
  5. 5
    Experiment with edge cases
    Try different combinations of flexWrap with alignContent, or mix fixed and flex children, to understand how the layout engine resolves conflicts: much faster than building and running the app.

Related Tools

📘

JSON to TypeScript

Convert JSON objects into TypeScript interfaces or type aliases. RN-friendly types, optional fields, readonly, and multiple export styles.

🐹

JSON to Go Struct

Generate Go structs from JSON with json tags, omitempty, pointer types for nullables, and proper PascalCase field name conversion.

📱

CSS to React Native

Convert CSS rules to React Native StyleSheet objects. Handles shorthand expansion, property mapping, and flags unsupported properties.

🌗

RN Shadow Generator

Visually generate React Native shadow props for iOS and Android. Preview shadows in real time and copy platform-specific code.

Frequently Asked Questions

How is React Native flexbox different from CSS flexbox?
React Native uses Facebook's Yoga layout engine which implements most CSS flexbox features but with two key differences: flexDirection defaults to 'column' (not 'row' as in CSS), and flex in React Native behaves like flex-grow (not the CSS flex shorthand).
Why does flexDirection default to column in React Native?
Mobile UIs are primarily vertical scrolling lists of content. Column direction means children stack vertically by default, which matches the most common mobile layout pattern. CSS was designed for horizontal document flow, so row is the CSS default.
What does justifyContent control?
justifyContent controls how children are distributed along the main axis (the direction set by flexDirection). For a column layout, it controls vertical distribution. Options include flex-start, flex-end, center, space-between, space-around, and space-evenly.
What is the difference between alignItems and alignContent?
alignItems controls how children are positioned on the cross axis within a single line. alignContent controls spacing between multiple lines when flexWrap is enabled and there are multiple rows or columns of children.
What does flex: 1 mean in React Native?
flex: 1 on a child element makes it grow to fill all available space in the parent container along the main axis. It is equivalent to flex-grow: 1 in CSS. Multiple children with flex: 1 share the space equally.
When should I use alignSelf on a child?
alignSelf on a child overrides the parent's alignItems for that specific child. Use it when one item needs to be positioned differently from the rest: for example centering one item while others are aligned to flex-start.
Does this accurately represent how the layout will look on a device?
The preview uses the same flexbox rules as React Native's Yoga engine for most properties. Complex cases involving percentage-based dimensions or platform-specific rendering may differ slightly from a real device.
Is this tool free?
Completely free. No account, no install, everything runs in your browser.

AlteredIdea vs alternatives

vs other online tools: Everything runs in your browser: private, instant, no account needed.

vs desktop apps: No install required. Works on any device.

vs paid tools: Completely free, unlimited use.

Share:Share on XShare on LinkedIn