Styling & Flexbox Layout

React Native uses JavaScript objects for styles — no CSS files. Flexbox is the default layout system and works the same on iOS and Android. flexDirection defaults to column (unlike web row).

StyleSheet and Flexbox

React Native uses JavaScript objects for styles — no CSS files. Flexbox is the default layout system and works the same on iOS and Android. flexDirection defaults to column (unlike web row).

Column flex layout

Key Flexbox properties

flexDirection: 'row' | 'column' — main axis direction.
justifyContent — align along main axis (center, space-between, flex-end).
alignItems — align along cross axis.
flex: 1 — grow to fill available space.
gap — spacing between children (RN 0.71+).

StyleSheet example

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

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, backgroundColor: "#0f172a" },
  card: {
    backgroundColor: "#1e293b",
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
  },
  title: { fontSize: 18, fontWeight: "600", color: "#f1f5f9" },
});

export function Card({ title }: { title: string }) {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>{title}</Text>
    </View>
  );
}

Platform-specific styles

Platform.select and conditional styles

import { Platform, StyleSheet } from "react-native";

const styles = StyleSheet.create({
  shadow: Platform.select({
    ios: { shadowColor: "#000", shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2 },
    android: { elevation: 4 },
  }),
});