? Flexbox Layout in React Native

✨ Quick Overview

React Native uses Flexbox by default to design responsive layouts. Flexbox allows you to arrange components in rows or columns and control alignment, spacing, and sizing easily.

? Key Concepts

• flexDirection – Defines row or column layout (RN defaults to column)
• justifyContent – Controls main-axis alignment
• alignItems – Controls cross-axis alignment
• flex – Defines how components grow or shrink

? Syntax / Theory

In React Native, Flexbox works similarly to CSS but with a few differences. The default flexDirection is column.

? Code Example

// Basic Flexbox layout in React Native
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center'
  },
  box: {
    padding: 20,
    backgroundColor: 'skyblue'
  }
});

? Live Output / Explanation

The boxes appear in a horizontal row. Spacing is evenly distributed and items are vertically centered on the screen.

? Interactive Example

Use the controls below to modify the flexDirection, justifyContent, and alignItems props on the simulated phone screen.

? Use Cases

• Building responsive mobile screens
• Aligning buttons and icons
• Creating navigation bars and cards