Build a tiny counter screen
Create a single-screen app with a count label and one button. Use useState, SafeAreaView, Text, and Button. Keep all styles inline and readable on a small phone screen.
Frontend / Knowledge library
React Native
cross-platform native apps with javascript
Why learn React Native?
React Native lets teams build iOS and Android apps from one JavaScript/TypeScript codebase while still rendering native UI components. It reduces duplicate effort, speeds iteration with fast refresh, and keeps near-native UX for many product use cases.
Where it came from
2015: Open-sourced by Facebook after internal use. Early versions relied on a JS-to-native bridge and platform-specific UI components. The ecosystem matured with stronger navigation, state, and TypeScript support. Recent years: focus shifted to the New Architecture for performance and reliability at scale.
- 2015: Open-sourced by Facebook after internal use.
- Early versions relied on a JS-to-native bridge and platform-specific UI components.
- The ecosystem matured with stronger navigation, state, and TypeScript support.
- Recent years: focus shifted to the New Architecture for performance and reliability at scale.
Build your understanding
Work through these exercises in order. Try the task before opening a reference.
- Create a single-screen app with a count label and one button. Use useState, SafeAreaView, Text, and Button. Keep all styles inline and readable on a small phone screen.
- Replace a ScrollView-based contacts screen with FlatList. Add keyExtractor, initialNumToRender, and a lightweight row component to improve scrolling performance.
- Add platform-specific behavior: different button text on iOS vs Android and keyboard-safe layout. Keep shared logic in one component and isolate only required platform code.
- Given a laggy screen, identify whether Fabric, TurboModules, memoization, or list virtualization is the best first fix. Explain the tradeoff in 3-4 short bullets.
- Outline a safe release flow with OTA update limits, staged rollout, crash monitoring, and rollback steps for a production React Native app.
More ways to practice
Render performant lists
Replace a ScrollView-based contacts screen with FlatList. Add keyExtractor, initialNumToRender, and a lightweight row component to improve scrolling performance.
Platform-aware UI behavior
Add platform-specific behavior: different button text on iOS vs Android and keyboard-safe layout. Keep shared logic in one component and isolate only required platform code.
Adopt New Architecture thinking
Given a laggy screen, identify whether Fabric, TurboModules, memoization, or list virtualization is the best first fix. Explain the tradeoff in 3-4 short bullets.
Release workflow mini-drill
Outline a safe release flow with OTA update limits, staged rollout, crash monitoring, and rollback steps for a production React Native app.
Documentation and sources
- React Native Docs (Getting Started) (reactnative.dev)
- React Native Architecture Overview (reactnative.dev)
- Expo Documentation (docs.expo.dev)
Catalog research notes
- New Architecture (Fabric + TurboModules + JSI) is the primary direction in recent releases.
- Bridgeless mode is progressing to reduce legacy bridge overhead.
- Hermes is the default JavaScript engine for better startup time and memory use.
- Tooling around Expo, EAS builds, and OTA updates has become smoother for team delivery.
Connect the ideas
Explore next
Real World Example
Unified Field Logistics Interface
A regional logistics firm managing a fleet of delivery drivers using disparate legacy hardware.
The business problem
The firm faces high maintenance costs and training overhead because drivers are forced to use separate, platform-specific mobile applications for Android and iOS devices.
How this topic solves it
React Native allows the firm to maintain a single codebase using JavaScript, enabling the deployment of a unified logistics interface that renders as native components on both Android and iOS platforms.
- Initialize a shared project structure using the React Native CLI or Expo.
- Develop core logistics logic and UI components using JavaScript and React patterns.
- Utilize platform-specific extensions or conditional logic to handle unique hardware interactions like camera scanners or GPS modules.
- Compile the project into native binaries for distribution via internal app stores.
This diagram illustrates how a single codebase is transformed into platform-specific native applications.
JavaScript and React components
Abstraction layer for native APIs
Native APK/AAB for drivers
Native IPA for drivers
- Shared Codebase → compiles via → React Native Bridge
- React Native Bridge → renders as → Android Binary
- React Native Bridge → renders as → iOS Binary
Expected business outcome
The firm achieves a streamlined development lifecycle where feature updates are deployed simultaneously across the entire fleet, regardless of the underlying mobile operating system.
Limitations and checks
The primary tradeoff is the abstraction layer; while it simplifies cross-platform development, developers must occasionally write native modules for specialized hardware, which requires verifying platform-specific behavior through manual testing on physical devices.