Styling with Flexbox

Styling with Flexbox in React Native

React Native uses Flexbox for layout, just like CSS on the web. However, there are some key differences: Flexbox defaults to column direction, and you use StyleSheet.create() for optimized styles.

Flexbox Basics

  ┌─────────────────────────────────────────────────┐
  │         Flexbox in React Native                 │
  ├─────────────────────────────────────────────────┤
  │                                                  │
  │  flexDirection: 'column' (DEFAULT)              │
  │  ┌──────────┐                                   │
  │  │  Item 1  │                                   │
  │  │  Item 2  │                                   │
  │  │  Item 3  │                                   │
  │  └──────────┘                                   │
  │                                                  │
  │  flexDirection: 'row'                           │
  │  ┌──────────────────────────────┐               │
  │  │ Item 1 │ Item 2 │ Item 3    │               │
  │  └──────────────────────────────┘               │
  │                                                  │
  │  justifyContent: 'space-between'                │
  │  ┌──────────────────────────────┐               │
  │  │ Item 1    Item 2    Item 3  │               │
  │  └──────────────────────────────┘               │
  │                                                  │
  └─────────────────────────────────────────────────┘

StyleSheet.create()

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const FlexExample = () => {
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>Welcome!</Text>
      </View>
      <View style={styles.content}>
        <View style={styles.box}>
          <Text>Box 1</Text>
        </View>
        <View style={styles.box}>
          <Text>Box 2</Text>
        </View>
        <View style={[styles.box, styles.boxHighlight]}>
          <Text>Box 3 (Highlight)</Text>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    padding: 20,
    backgroundColor: '#007AFF',
    alignItems: 'center',
  },
  title: {
    color: '#fff',
    fontSize: 24,
    fontWeight: 'bold',
  },
  content: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    padding: 16,
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: '#e0e0e0',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8,
  },
  boxHighlight: {
    backgroundColor: '#007AFF',
    color: '#fff',
  },
});

Key Differences from Web CSS

• Default direction: Column, not row
• Units: Numbers, not pixels or percentages (use '%' string)
• Platform colors: Use platform-specific color names
• No shorthand: Write each property separately