book

React Native for Mobile Development: Creating Stunning Cross-Platform Mobile Applications with React Native

Name: React Native for Mobile Development: Creating Stunning Cross-Platform Mobile Applications with React Native
ISBN: 9798868829772

by Abhishek Nalwaya, Akshat Paul

August 2026

Intermediate

363 pages

7h 34m

English

Apress

Read now

Unlock full access

React Native for Mobile Development
Acknowledgments
Table of Contents
About the Authors
About the Technical Reviewer
1. Learning the Basics: A Whistle-Stop Tour of React
1.1 The Philosophy Behind React1.2 Declarative vs. Imperative React Paradigms1.3 Why React?1.4 Installation and Setup1.4.1 Prerequisite: Install Node.js1.4.2 React Setup1.5 Building a To-Do App with React1.5.1 Introduction to ComponentsState Management and HooksuseState: For Managing StateuseEffect: For Side Effects1.6 Context1.7 Summary
2. The Simplest Program: Hello World with React Native
2.1 An Introduction to React Native2.2 The Essentials of React Native2.2.1 Install Node.js and npm (JavaScript Runtime)2.2.2 Install Xcode (for iOS Development: macOS Only)2.2.3 Set Up Android Studio (for Android Development)2.3 The Installation of React Native2.4 Your First React Native App2.4.1 Create a Basic Skeleton2.4.2 Learn How to Perform Basic Debugging Effectively2.5 Summary
3. Structuring Screens: Tabs, Stacks, and Beyond
3.1 Navigating Within the Application3.1.1 Introduction to React Navigation3.1.2 Different Type of React NavigationsStack NavigationKey Stack Navigation FeaturesBest Use Cases for Stack NavigationLibrariesTab NavigationKey Tab Navigation FeaturesBest Use Cases for Tab NavigationLibrariesDrawer NavigationKey Drawer Navigation FeaturesBest Use Cases for DrawerLibrariesModal NavigationKey Modal Navigation FeaturesBest Use Cases for Modal Navigation3.2 Example: Building an Expense Tracker App with Tab and Stack Navigation3.2.1 Tab Navigation3.3 Integrating Stack Navigation Within Tabs3.3.1 Use Case Example: Stack Navigation in the Transactions Tab3.4 Summary: Mastering React Navigation
4. Canvas, Brush, and Paint: Working with Styling and Layout
4.1 Styling in React Native4.1.1 The StyleSheet API4.1.2 Inline Styling4.1.3 Style PropertiesStyling with Platform Differences4.1.4 Combining and Overriding Styles4.1.5 Dimension API4.2 Creating Layout with Flexbox4.2.1 Understanding the Flexbox ModelMain Axis vs. Cross Axis: The Foundation of Alignment1. flexDirection: Defining Your Layout’s Main Axis2. justifyContent: Distributing Space Along the Main Axis3. alignItems: Positioning Items Along the Cross Axis4. alignContent: Managing Multiple Lines of ContentRow Gap, Column Gap, and Gap (React Native 0.71+)4.2.2 Flexbox Properties on Items (Children)4.3 Summary
5. Building Interfaces with Core Components
5.1 React Native Core Components5.1.1 Core Components at a Glance5.2 Layout and Container Components5.2.1 View: The Building Block5.2.2 SafeAreaView: Respecting Device Boundaries5.2.3 Modal: Overlays and Pop-ups5.2.4 KeyboardAvoidingView: Handling Keyboard Overlap5.3 Text and Input Components5.3.1 Text: Displaying Information5.3.2 TextInput: Capturing User Input5.4 Lists in React Native: ScrollView, FlatList, and SectionList5.4.1 ScrollView5.4.2 FlatList5.4.3 SectionList5.5 Interactive Components: Button, Pressable, and Touchables5.5.1 Button5.5.2 Pressable5.5.3 Touchable Components: Legacy but Useful5.6 Animation5.6.1 Animated API: The Core of Animations5.6.2 Layout Animation: Automatic Layout Transitions5.6.3 Gesture-Driven Animations5.6.4 Advanced Animations: Combining and Sequencing5.7 ExpenseTracker App5.7.1 Theme in React Native5.8 App Layout5.8.1 Create an Add and Remove Expense5.9 Summary

6. Working with Device Capabilities in React Native
6.1 The Role of Device Capabilities in Mobile Application Architecture6.1.1 The Dual-World Execution Model6.1.2 Expo As a Managed Capability Layer6.1.3 The New Architecture: JSI Replaces the Bridge6.2 Extending the Expense Tracker with Device Capabilities6.2.1 Installing Required Packages6.2.2 Project Structure After This Chapter6.2.3 Architectural Assurance6.3 Permission Management in Mobile OS Ecosystems6.3.1 Capability-Based Security Model6.3.2 OS-Level Permission GovernanceAndroid ClassificationiOS Permission Lifecycle6.3.3 Architectural Placement of Permission Logic6.3.4 Permission Handling in React Native + Expo6.3.5 Permission Request Lifecycle6.3.6 Permission UX Design: Best Practice Rules6.3.7 Permission Revalidation Must Be Continuous6.4 Camera: Attaching Receipt Photos to Expenses6.4.1 Installing and Importing the Camera Module6.4.2 Adding Camera State to AddAssets6.4.3 Conditional Camera Permission Logic6.4.4 Rendering the Camera View Overlay6.4.5 Attaching the Receipt URI to an Expense6.4.6 Displaying Receipt Thumbnails in the Expense List6.4.7 Performance and Resource Notes6.5 Contacts Subsystem: Importing a Payee from the Address Book6.5.1 Module Installation6.5.2 Adding Contacts State to AddAssets6.5.3 Requesting Address Book Permission and Loading Contacts6.5.4 Rendering the Contact Picker6.5.5 Adding “Pick from Contacts” Button to the Form6.5.6 Memory and Security Constraints6.6 Calendar Subsystem: Scheduling Payment Reminders6.6.1 Installing the Calendar Module6.6.2 Updating TransactionDetailScreen to Receive Full Expense Data6.6.3 Determining the Default Calendar6.6.4 Implementing the Payment Reminder Feature6.6.5 Styles for TransactionDetailScreen6.6.6 Failure Modes and Defensive Strategies6.7 Local Storage with AsyncStorage: Persisting Expenses Across Restarts6.7.1 Installing AsyncStorage6.7.2 Updating ExpenseContext to Use AsyncStorage6.7.3 Showing a Loading State While Hydrating6.7.4 AsyncStorage Data Flow6.7.5 Constraints, Patterns, and Best PracticesCapacity and Data SizeSerialization Patterns6.7.6 Verifying Persistence6.8 How Native Modules Work in React Native6.8.1 The JavaScript ↔ Native Execution Boundary6.8.2 Native Module Methods: Always Asynchronous6.8.3 Native-to-JS Events6.8.4 Failure States and Isolation Guarantees6.9 Summary and Best Practices6.9.1 Architectural Lessons to Retain6.9.2 Checklist of Best PracticesSecurity and PermissionsExecution BehaviorState and Storage HygieneError and Recovery6.9.3 What You Can Build Now
7. Networking, Data Layers, and Native Module Integration
7.1 The Role of Networking in Mobile Application Architecture7.2 REST APIs in React Native7.2.1 Native Networking Stack Behind fetchWhat Actually Happens When fetch() Is CalledAsynchronous by Design: No ExceptionsJavaScript Does Not Own the ConnectionWhy This Matters Architecturally7.2.2 Performing a REST API Call7.2.3 Error Handling and Network FailuresObserving Failure Modes in the Posts Feed7.2.4 Request Cancellation and Component Lifecycle7.3 GraphQL in React Native7.3.1 Why GraphQL Exists in Mobile Applications7.3.2 GraphQL Client Architecture7.3.3 Executing a GraphQL QueryInstalling Apollo Client7.3.4 REST vs. GraphQL: Choosing the Right Approach7.4 Networking State As a First-Class Concern7.5 Why Native Modules Exist7.6 Introduction to Native Modules in React Native7.7 Building a Native Battery State Module7.7.1 JavaScript Interface: Codegen Spec7.7.2 iOS Implementation7.7.3 Android Implementation7.7.4 Observations from the Demo7.8 JS–Native Integration
8. Testing and Debugging
8.1 Introduction to Unit Testing8.1.1 The Anatomy of a Unit Test: The AAA Pattern8.2 Setting Up Unit Testing in React Native8.2.1 Unit Testing in Practice: Expense Tracking ApplicationStep 1: Defining the Logic (the “Brain”)Step 2: Writing the Unit TestStep 3: Handling Complex Logic (Filtering)Step 4: Building the Interface (the “Body”)8.2.2 Unit Testing vs. UI Testing: A Quick ComparisonStep 5: Mocking DependenciesWhy Unit Testing Is Your “Secret Weapon”8.3 Master the Hunt: React Native Debugging Techniques8.3.1 1. The Developer Menu: Your Control Center8.3.2 2. Console Logging: The Simplest Form of Debugging8.3.3 3. Inspecting Network Requests8.3.4 4. Breakpoint Debugging8.4 Performance Debugging: The “Why Is It Slow?” Hunt8.4.1 The Key Performance Areas8.4.2 Using the Perf Monitor8.5 Common Performance Issues and Solutions8.5.1 Issue 1: Excessive Re-rendersProblem ExampleSolution: Use useCallback and React.memo8.5.2 Issue 2: Heavy List RenderingProblem ExampleSolution: Use FlatList with Optimization Props8.5.3 Issue 3: Unoptimized ImagesSolution: Implement Expo Image8.6 Summary
9. Getting Ready for the App Store and Play Store
9.1 Creating Android Production Builds in React Native9.1.1 Step 1: Configure App Versioning9.1.2 Step 2: Create a Signing Keystore9.1.3 Step 3: Configure Signing in Gradle9.1.4 Step 4: Enable Code Shrinking and Optimization9.1.5 Step 5: Generate Android App Bundle9.1.6 Step 6: Upload the Android Production Build to the Play Store9.2 Creating iOS Production Build in React Native9.2.1 Step 1: Configuring the Bundle Identifier9.2.2 Step 2: Setting Up Certificates and Signing9.2.3 Step 3: Setting Version and Build Number9.2.4 Step 4: Switching to Release Configuration and Archiving the iOS Application9.2.5 Step 5: Uploading to App Store Connect9.3 Comparison of Android vs. iOS Store Submission Workflows9.3.1 Key Differences in Practice9.4 Summary
10. Introduction: The React Native Ecosystem
10.1 Why the Ecosystem Matters More Than the Framework10.1.1 React Native As the Center of a Larger System10.1.2 Conceptual Structure: The React Native Ecosystem10.1.3 A Flow-Oriented View of Responsibility10.1.4 The Hidden Cost of Ecosystem Decisions10.1.5 Ecosystem Literacy As a Professional Skill10.1.6 Note: Treat Dependencies As Architecture10.2 Understanding the Shape of the React Native Ecosystem10.2.1 From a Flat List to a Structured System10.2.2 Core Runtime Components: The Stable Center10.2.3 Adjacent Libraries: Extending the Runtime from Within10.2.4 External Services: Influencing Behavior from the Outside10.2.5 A Layered View of Responsibility10.2.6 Note: Structure First, Tools Second10.3 Categories of Third-Party Libraries in React Native10.3.1 Libraries That Define Application Structure10.3.2 Libraries That Shape Data Flow and State10.3.3 Libraries at the JavaScript–Native Boundary10.3.4 Libraries That Abstract Device Capabilities10.3.5 Libraries That Address Networking and Reliability10.3.6 Libraries for Developer Experience and Tooling10.3.7 Comparing Categories by Architectural Impact10.3.8 Note: Evaluate Proportionally10.4 Evaluating Library Quality and Long-Term Risk10.4.1 Popularity Is a Signal, Not a Guarantee10.4.2 Maintenance Health and Ownership10.4.3 Architectural Alignment with React Native10.4.4 API Surface Area and Coupling10.4.5 Type Safety, Documentation, and Developer Ergonomics10.4.6 Upgrade and Exit Strategy10.4.7 Note: Evaluate Libraries Under Future Pressure10.5 The Role of Expo in the Modern Ecosystem10.5.1 Expo As an Ecosystem Multiplier10.5.2 Managed vs. Bare: A Spectrum, Not a Fork10.5.3 What Expo Abstracts—And What It Does Not10.5.4 Expo’s Architectural Trade-Offs10.5.5 Expo in Long-Lived Code Bases10.5.6 Note: Choose Expo for Leverage, Not Avoidance10.6 Back-End and Platform Services Around React Native Apps10.6.1 Services As Architectural Extensions10.6.2 Common Service Categories in React Native Applications10.6.3 Operational and Organizational Implications10.6.4 Latency, Reliability, and Failure Modes10.6.5 Treating Services As First-Class Architecture10.6.6 Note: Design for Service Failure10.7 Feature Flags, Experimentation, and Over-the-Air Updates10.7.1 Feature Flags As Runtime Control10.7.2 Experimentation and Behavioral Change10.7.3 Over-the-Air Updates: Power and Responsibility10.7.4 A Controlled Flow of Change10.7.5 Guardrails and Governance10.7.6 Note: Configuration Is Code, Even When It Isn’t10.8 Distribution Pipelines for React Native Apps10.8.1 Distribution As a Continuation of Architecture10.8.2 Internal Testing and Pre-release Validation10.8.3 Staged Rollouts and Risk Management10.8.4 Distribution Constraints and OTA Boundaries10.8.5 Distribution As a Cross-Functional Concern10.8.6 Note: Optimize for Repeatability, Not Speed10.9 When and Why to Create Your Own npm Package10.9.1 Recognizing the Signals for Extraction10.9.2 Internal Packages vs. Public Packages10.9.3 Designing for Unknown Consumers10.9.4 The Maintenance Commitment10.9.5 When Not to Create a Package10.9.6 Pro Tip: Packages Are Products10.10 Anatomy of a Modern React Native Package10.10.1 Packages As Contracts, Not Utilities10.10.2 TypeScript As an Architectural Boundary10.10.3 Scope Discipline and Responsibility Containment10.10.4 Platform Awareness Without Platform Leakage10.10.5 Designing for Change, Not Permanence10.10.6 Documentation As Part of the Product10.10.7 Versioning As Communication10.10.8 Note: Package Design Is Social Design10.11 Staying Current in a Fast-Moving Ecosystem10.11.1 The Cost of Chasing Novelty10.11.2 Reliable Signals in the React Native Ecosystem10.11.3 Weak Signals and Ecosystem Noise10.11.4 Building a Sustainable Update Habit10.11.5 Adapting Without Overreacting10.11.6 Note: Optimize for Awareness, Not Urgency10.12 Popular React Native Packages (March 2026 Snapshot)10.12.1 Navigation and Application Structure10.12.2 State Management and Server State10.12.3 Animations and Gestures10.12.4 Device and Native Capability Access10.12.5 Networking and Data Communication10.12.6 Storage and Persistence10.12.7 Developer Tooling and Diagnostics10.13 Summary
11. Best Practices for Building Large Mobile Applications in React Native
11.1 Understanding the Challenges of Large React Native Applications11.2 Building Large-Scale Application11.2.1 Defining Clear Architecture and Application BoundariesFeature-Based vs. Layer-Based ArchitectureSeparation Between Presentation and Business LogicMonorepo vs. Polyrepo for Large TeamsDefining Application Layers1. UI Layer2. Business/Domain Layer3. API/Data Layer4. Shared Utilities LayerLayer RuleDesigning a Centralized API LayerError Handling, Retry, and LoggingDesign System and Theming BoundariesEnforcing BoundariesReal-World Example Structure11.3 Coding Practices and Maintainability at Scale11.3.1 Code Organization and Naming11.3.2 TypeScript11.3.3 Reusability and DRY Principles11.3.4 Prefer Composition Over Duplication11.3.5 Code Quality Tooling11.4 Performance Optimization at Scale11.4.1 Avoiding Prop Drilling and Unnecessary Re-rendersOptimizing Component Rendering and Memoization11.5 Minimizing JavaScript Costs11.5.1 Measuring and Profiling PerformanceOffline-First Strategies11.6 Build, Release, and Monitoring in Production11.6.1 Automating Builds with CI/CD11.6.2 Environment-Based Configuration11.6.3 OTA (Over-the-Air) Updates11.6.4 Monitoring and Observability11.6.5 Feature Toggling and Controlled Rollouts11.6.6 Production As a Living System11.7 Final Thoughts: Thinking Like a Mobile Architect
Index

Content preview from React Native for Mobile Development: Creating Stunning Cross-Platform Mobile Applications with React Native

A. Nalwaya, A. PaulReact Native for Mobile Developmenthttps://doi.org/10.1007/979-8-8688-2977-2_5

5. Building Interfaces with Core Components

Abhishek Nalwaya¹ and Akshat Paul²

“Great design is not just what it looks like and feels like. Great design is how it works.”

–Steve Jobs

Chapter 4 introduced the fundamental concepts of StyleSheet and Flexbox. Building upon that foundation, this chapter advances into the study of React Native Core Components, which form the essential building blocks of user interface design. The topics addressed in this chapter include

Layout and container components
List components
Interactive components
Animations

A comprehensive understanding ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9798868829772Purchase Link Publisher Website

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

React Native for Mobile Development: Creating Stunning Cross-Platform Mobile Applications with React Native

by Abhishek Nalwaya, Akshat Paul

5. Building Interfaces with Core Components

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.