React Native in Action

Overview

React Native in Action (2019) by Nader Dabit is a hands-on guide to building cross-platform mobile applications with React Native. Dabit, a developer advocate at Amazon Web Services, brings practical experience building production React Native applications.

The book covers the full development lifecycle — from setting up the development environment and understanding React Native components, through navigation and state management, to native module development and app store submission.

---

Key Takeaways

1. React Native uses a JavaScript-to-native bridge. React components map to native iOS and Android UI elements, not web views.

2. The component model is the same as React. If you know React, you already understand React Native's core concepts.

3. Navigation is fundamentally different from the web. Stack, tab, and drawer navigators replace browser routing.

4. State management patterns transfer from web React. Redux, Context API, and local state work identically.

5. Native modules bridge the gap. When React Native lacks an API, you can write native code and expose it to JavaScript.

6. Lists require special optimization. FlatList and SectionedList virtualize rendering for performance.

7. Platform-specific code is inevitable. Use Platform.select and .ios.js / .android.js file extensions for platform differences.

8. Animations use the Animated API or react-native-reanimated. JavaScript-driven and native-driven animations have different performance characteristics.

9. Networking uses the Fetch API or libraries like Axios. React Native includes a polyfill for the web Fetch API.

10. Deployment differs by platform. iOS requires the App Store and provisioning profiles; Android uses APK signing and Play Console.

---

Who Should Read

| Reader Type | Why | |---|---| | React developers going mobile | Leverage existing React knowledge | | Mobile teams evaluating cross-platform | Practical assessment of React Native | | Startup developers | Ship on both platforms faster | | Web developers expanding to mobile | Familiar patterns for mobile development |

---

Who Should Skip

• Complete beginners to React or programming
• Developers building graphics-heavy or AR applications
• Teams committed to fully native development

---

Related Books

| Book | Author | Connection | |---|---|---| | The Swift Programming Language | Apple Inc. | Native iOS development alternative | | Flutter Complete Reference | Alberto Miola | Cross-platform alternative comparison | | Learning React | Alex Banks & Eve Porcello | React fundamentals for React Native |

---

Final Verdict

A practical, hands-on introduction to React Native. Dabit's experience shines through in the real-world examples. Somewhat dated (2019) — the Expo ecosystem has evolved significantly since publication.

Rating: 7/10 — A solid primer for web developers moving into mobile. Supplement with current Expo and React Native documentation.

React Native's Architecture

React Native uses a JavaScript-to-native bridge to render platform UI components, not web views.

graph TD
    subgraph RN_Arch["React Native Architecture"]
        JS["JavaScript Thread<br/>(React, business logic)"]
        NB["Native Bridge<br/>(JSON serialization)"]
        MT["Main Thread<br/>(UIKit/Android Views)"]
        SH["Shadow Thread<br/>(layout calculation)"]
    end

    JS <--> NB
    NB --> MT
    NB --> SH

---

Core Components

| Component | Description | Web Equivalent | |-----------|-------------|---------------| | View | Container | div | | Text | Text display | span or p | | TextInput | Text input | input | | ScrollView | Scrollable container | overflow: scroll | | FlatList | Virtualized list | -- | | TouchableOpacity | Pressable element | button | | Image | Image display | img |

---

Navigation

React Native uses native navigation, not browser routing.

graph TD
    subgraph Navigation_Types["Navigation Types"]
        SN["Stack Navigator<br/>(push/pop screens)"]
        TN["Tab Navigator<br/>(bottom/top tabs)"]
        DN["Drawer Navigator<br/>(side menu)"]
    end

    subgraph Flow["Example Navigation Flow"]
        A["Home Screen (Tab)"]
        B["Profile Screen (Stack)"]
        C["Settings Screen (Stack)"]
        D["Login Screen (Modal)"]
    end

    A --> B --> C
    D -->|"present"| A

---

State Management

React Native supports the same state management options as React web:

| Approach | Best For | Complexity | |----------|----------|------------| | Component state (useState) | Simple local UI state | Low | | Context API | Global theme, auth | Medium | | Redux | Complex app state | High | | MobX | Observable-based state | Medium | | Zustand | Simple global state | Low |

---

Native Modules

When React Native lacks an API, native modules bridge the gap.

flowchart LR
    subgraph Native_Module["Native Module Flow"]
        JS["JavaScript Call"]
        JB["JSON Bridge Serialization"]
        NM["Native Module<br/>(Swift/Kotlin)"]
        RP["Return Promise"]
    end

    JS --> JB --> NM --> RP --> JS

---

Platform-Specific Code

| Strategy | Implementation | |----------|---------------| | Platform.select | if (Platform.OS === 'ios') | | File extension | Button.ios.js / Button.android.js | | Platform-specific API | Check Platform.OS at runtime |

---

Performance Optimization

| Technique | Impact | |-----------|--------| | FlatList instead of ScrollView | Virtualized rendering | | PureComponent / React.memo | Skip unnecessary re-renders | | Native driver for animations | Offload to UI thread | | Hermes engine | Faster JS startup | | Image caching | Network image optimization |

---

Reading Guide

| Chapter | Topic | Est. Time | Priority | |---------|-------|-----------|----------| | 1-3 | React Native fundamentals | 2h | Essential | | 4-5 | Components and styling | 2h | Essential | | 6-7 | Navigation | 1.5h | Essential | | 8 | State management | 2h | Essential | | 9 | Networking and data | 1h | Important | | 10 | Native modules | 1.5h | Optional | | 11 | Performance | 1h | Important | | 12 | Deployment | 1h | Important |

Strengths

• Practical, hands-on examples. Dabit's experience at AWS and with production React Native apps shows in the realistic examples.
• Good for web developers. The book effectively translates web React knowledge to mobile development.
• Covers the full lifecycle. From environment setup through app store deployment, the entire development process is covered.
• Clear navigation discussion. Navigation is one of the hardest parts of React Native, and Dabit explains it well.

---

Weaknesses

• Dated Expo coverage. The book does not cover the modern Expo development workflow (EAS Build, Expo Router) that is now standard.
• No TypeScript. The book uses plain JavaScript, but modern React Native development is predominantly TypeScript.
• New Architecture missing. React Native's new architecture (Fabric, TurboModules, JSI) is not covered — it was introduced after publication.
• Performance optimization is thin. The book could provide more depth on performance profiling and optimization techniques.

---

Criticism

The "Expo Is Better" Critique

Since 2019, the React Native ecosystem has shifted significantly toward Expo as the recommended development approach. The book's bare workflow focus feels outdated to many readers.

The "Too Shallow" Critique

Experienced mobile developers find the book too basic, especially the sections on native module development and performance optimization.

---

Comparison with Similar Books

| Book | vs. React Native in Action | |------|---------------------------| | Learning React Native (Bonnie Eisenman) | Older but covers fundamentals well | | Fullstack React Native (Accomazzo) | More comprehensive, updated | | Official React Native Docs | Always current, interactive examples |

---

Final Assessment

| Dimension | Rating | Notes | |-----------|--------|-------| | Depth | 6/10 | Good introduction, shallow on advanced topics | | Breadth | 7/10 | Covers major topics adequately | | Readability | 8/10 | Clear and approachable | | Practical Utility | 6/10 | Dated by modern Expo ecosystem | | Lasting Value | 4/10 | Ecosystem has evolved significantly since 2019 | | Overall | 6.0/10 | Decent snapshot of mid-2019 React Native |