React Native SME Cookbook

Sections

React Native & Expo Core

React Native Basics Views, Text & Core Components Props, State & Re-renders on Mobile Event Handling & Touchables Platform-Specific Code Images & Assets Dimensions & Responsive Layout React Native Fundamentals Best Practices

Expo Platform Basics create-expo-app Quickstart app.json & app.config.js Expo Go vs Development Builds Expo Modules Core Environments & EAS Environment Variables Expo Account, Projects & Permissions Expo Platform Best Practices

TypeScript in RN Basics Typing Components & Props Typing Navigation & Route Params Typing API Responses & Zod Utility Types for RN Expo Router Typed Routes TypeScript in React Native Best Practices

Component Patterns Basics Custom Hooks for UI Logic Compound Components Render Props & Slot Patterns Container/Presenter on Mobile Component Patterns Best Practices

Styling Basics Flexbox Deep Dive Safe Areas & Notches Dark Mode & Color Schemes Responsive & Adaptive Layout Shadows, Elevation & Borders Typography Scale & Font Loading Styling Best Practices

Lists Basics FlatList Recipes SectionList & Grouped Data FlashList vs FlatList Infinite Scroll & Pagination Lists Best Practices

Forms Basics react-hook-form on Mobile Validation with Zod Keyboard Controller Pickers, Date/Time & Native Inputs Accessibility in Forms Forms Best Practices

Error Handling Basics Error Boundaries in RN Network Failure UX Global Error Handlers User-Facing Error Copy Error Boundaries Best Practices

Tooling, Build & Quality

Project Setup Basics create-expo-app Templates Folder Structure for Features Monorepo with Turborepo Project Setup Best Practices

Local Development Basics iOS Simulator & Android Emulator Physical Device Testing expo-dev-client React Native DevTools Expo CLI Best Practices

Linting Basics Prettier & Import Sorting TypeScript Strict Mode React Hooks Lint Rules CI Quality Gates Linting Best Practices

Mobile Testing Basics Jest Setup for Expo React Native Testing Library Mocking Native Modules Maestro E2E Testing Best Practices

Expo Project Rules Checklist Navigation & Routing Rules Native Module Rules Security Rules for Mobile Release & OTA Rules Performance Budget Rules Expo Rules Best Practices

Architecture & Design

Mobile Architecture Basics Feature-Sliced Design for RN Clean Architecture on Mobile Modular Monolith vs Multi-App Dependency Injection in RN Architecture Best Practices

State Management Basics useState & useReducer Context Without Storms Zustand Redux Toolkit State Management Best Practices

Offline-First Basics AsyncStorage Patterns expo-sqlite Background Sync & TaskManager Data Layer Best Practices

Networking Basics Fetch vs axios TanStack Query on Mobile Retries, Backoff & Idempotency WebSockets & Real-Time Networking Best Practices

Mobile Auth Basics expo-auth-session & OAuth SecureStore & Keychain/Keystore Biometrics with LocalAuthentication Authentication Best Practices

Navigation & Routing

Expo Router Basics Stack Navigation Tabs & Drawers Route Groups & Organizing `app/`Link & href Typed Routes Redirects & Index Routes Expo Router Fundamentals Best Practices

Nested Navigators Modal & Presentation Routes Protected Routes & Middleware Native Tabs Expo Router Advanced Best Practices

Deep Linking Basics expo-linking API iOS Universal Links Android App Links Deep Linking Best Practices

Native Platform & SDK

Expo SDK Basics expo-notifications expo-location expo-camera & expo-image-picker expo-file-system expo-secure-store & expo-crypto Expo SDK Packages Best Practices

Native Modules Basics Using Third-Party Native Libraries Config Plugins create-expo-module Native Modules Best Practices

Prebuild Basics expo prebuild Workflow Config Plugins in CNG Custom Native Code in CNG Prebuild Best Practices

iOS Basics for RN Devs CocoaPods & Pod Install Entitlements & Capabilities App Store Review Guidelines TestFlight Distribution iOS Platform Best Practices

Android Basics for RN Devs Edge-to-Edge on Android Permissions & Play Policy Signing & Play App Signing Internal Testing Tracks Android Platform Best Practices

Brownfield Basics expo-brownfield Overview Brownfield Best Practices

UI, Performance & Media

Animations Basics react-native-reanimated 4 react-native-gesture-handler Layout Animations Animations Best Practices

Design Systems Basics NativeWind (Tailwind for RN)Tamagui React Native Paper Expo UI Drop-Ins Design Systems Best Practices

Accessibility Basics accessibilityLabel & accessibilityRole Focus Order & Keyboard Navigation Dynamic Type & Font Scaling Accessibility Best Practices

i18n Basics expo-localization i18next / react-i18next RTL Layouts i18n Best Practices

Performance Basics React DevTools Profiler Bundle Size Analysis Performance Best Practices

Media Basics expo-image expo-camera Media Best Practices

Shipping & Observability

EAS Build Basics iOS Credentials & Provisioning Android Keystores & Signing Build Profiles & Flavors EAS Submit EAS Build Best Practices

OTA Updates Basics expo-updates Configuration Release Channels & Branches OTA Updates Best Practices

Mobile CI/CD Basics EAS Workflows GitHub Actions + EAS Preview Builds on PRs CI/CD Best Practices

Store Operations Basics App Store Connect Workflow Google Play Console Workflow Phased Release & Rollback Compliance: ATT & Privacy Labels Store Operations Best Practices

Observability Basics Sentry for React Native Structured Logging On Device Analytics & Privacy Observability Best Practices

Ecosystem & Team

Essential Libraries Basics @tanstack/react-query zustand react-native-mmkv @shopify/flash-list react-native-reanimated & gesture-handler sentry-expo / @sentry/react-native Essential Libraries Best Practices

Agent Skills Basics EAS Release Skill Expo Router Skill Native Module Skill Mobile Testing Skill Agent Skills Best Practices

Git Basics for Mobile Teams GitHub Flow & Release Branches Interactive Rebase & Worktrees GitHub Actions Integration Git & GitHub Best Practices

CLI Basics for RN xcrun simctl & iOS Simulators adb & Android Devices jq, rg & JSON Logs macOS & Linux CLI Best Practices

Onboarding Basics First-Week Learning Path Codebase Tour Checklist Junior → Mid RN Leveling Pairing & Mob on Mobile Team & Onboarding Best Practices

Tech-Lead Craft

Mobile Incident Basics Crash Spike Triage Production Troubleshooting Best Practices

Mobile Delivery Basics Feature Flags on Mobile Enterprise Delivery Best Practices

Tech Lead Basics on Mobile Architecture Decision Records Code Review Standards for RN Mentoring Junior Mobile Devs Technical Leadership Best Practices

Product Collaboration Basics Platform Parity Decisions Stakeholder Communication Working with Design & Motion Product Collaboration Best Practices

Reference: B2C Expo SaaS App Reference: Offline-First Field App Reference: Fintech Mobile Client Case Studies Best Practices

Standards Basics Coding Standards & Style Guides Spikes, PoCs & New Architecture Governance Best Practices

/

/

© 2026 @csjcode|SystemsArchitect.io: Cloud Systems Tools|Terms

Search Documentation

Search across all documentation pages

React Native SME/Styling & Layout/Flexbox Deep Dive

Styling Layout Flexbox Deep Dive

Flexbox Deep Dive

The mobile layout workhorse — direction, flex, align, and common recipes.