? React Native Grid Layout

? Quick Overview

React Native does not have a built-in CSS Grid system like the web. Instead, grid-like layouts are created using Flexbox, primarily with flexDirection, flexWrap, and calculated item widths.

? Key Concepts

• Flexbox is the layout engine in React Native
• Rows are created using flexDirection: "row"
• Multiple columns use flexWrap: "wrap"
• Item width defines number of columns
• FlatList supports grid layouts with numColumns

? Syntax / Theory

A basic grid layout is created by wrapping items inside a container with row direction and wrapping enabled. Each item is given a percentage width.

? Code Example(s)

// Simple grid layout using Flexbox in React Native
import React from "react";
import { View, StyleSheet } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.box} />
      <View style={styles.box} />
      <View style={styles.box} />
      <View style={styles.box} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    flexWrap: "wrap"
  },
  box: {
    width: "50%",
    height: 100,
    backgroundColor: "#2563eb",
    borderWidth: 1,
    borderColor: "#ffffff"
  }
});

? Live Output / Explanation

? Interactive Example / Visual Explanation

Use the buttons below to change the item width percentage and see how the layout reacts inside the mock phone screen.

? Use Cases

• Photo galleries
• Product listing screens
• Dashboard cards
• Icon menus
• Social media feeds