Intermediate everything in React Native, page 9
Native Stack Navigator: Native Performance, Less Customization
Native Stack Navigator uses the OS's built-in screen management for smooth, performant transitions. Use it for standard screen stacks where a native look and feel is key.
Nested Navigators: Building Complex UI Flows
Think of nested navigators as UI building blocks, placing one navigator (like tabs) inside a screen of another (a stack). This creates flows like a main tab bar inside a stack for modals.
React Navigation: Configuring Screen Options
Treat screen options like CSS for your React Navigation screens, letting you style headers and tabs. Apply styles to a single Screen with the options prop, or to a Group of screens with screenOptions.
Escape Prop Drilling with React Navigation Hooks
React Navigation hooks let components control navigation without prop drilling. useNavigation gives you the navigation object to change screens, while useRoute provides data about the current screen. The footgun: they only work inside a navigator.
RefreshControl: The Pull-to-Refresh Handler
RefreshControl adds the native "pull-to-refresh" spinner to your lists. Use it inside a ScrollView or FlatList to let users manually trigger a data update. The footgun: you must control the 'refreshing' prop manually or the spinner vanishes instantly.
PanResponder: The Gesture State Machine
PanResponder turns raw touch events into a single, stateful gesture, like dragging an object. It's used to build draggable elements by providing a gestureState object with velocity and distance. The footgun is confusing moveX/Y with dx/dy.
The Gesture Responder System: Who Gets the Touch?
The Gesture Responder System is React Native's negotiation protocol that decides which component owns a touch. It's how the framework distinguishes a button tap from a scroll. The main footgun is that the deepest component wins the touch by default.
alignItems: Aligning Children on the Cross Axis
alignItems arranges children along the cross axis of a flex container. If items flow down (column), it aligns them left/right. If they flow across (row), it aligns them top/bottom. The footgun: alignSelf on a child overrides this parent property.
Pressable: A More Powerful Way to Handle Touches
The Pressable API wraps any component to detect granular press stages like press-in, press-out, and long-press. Use it for custom interactive elements. The main footgun is forgetting to use hitSlop on small targets, making them difficult to tap.
React Native TextInput: Handling User Input
TextInput is your app's keyboard entry point. Use it for search bars and forms, configuring features like auto-capitalization and keyboard type. Be careful with styling: Android adds a default underline, and multiline mode can break single-side border styles.
ScrollView: For Simple, Bounded Content
ScrollView is a container for a limited amount of scrollable content, rendering everything inside at once. Use it for short forms or articles where upfront loading is fine. The footgun: it's slow for long lists—use FlatList instead to avoid performance hits.
Expo Application Services (EAS): The Cloud Toolchain for React Native
Expo Application Services (EAS) is the cloud toolchain for production React Native apps. It handles complex native builds, app store submissions, and over-the-air updates. The main footgun is confusing it with the local expo CLI for development.
The React Native Bridge: Why It's Being Replaced
Think of the React Native Bridge as an asynchronous JSON message queue between your JavaScript code and the native UI. This design is the source of its core limitation: communication delays that cause visible UI jank and prevent modern React features.
Hermes: The JS Engine for Faster React Native Apps
Hermes is a JavaScript engine optimized for React Native that prioritizes fast startup and low memory use. It's the default for new apps, pre-compiling JS to bytecode at build time. The footgun: don't just check a global variable; benchmark release builds.
React Native: Platform-Specific Code
React Native lets you write platform-specific logic without ejecting. Use the Platform module for small style tweaks, and file extensions (.ios.js) for swapping entire components. The footgun is overusing Platform.select for complex UI, creating clutter.
Metro: The JavaScript Bundler for React Native
Metro bundles your React Native app's JavaScript, finding all modules, transpiling them for the device, and merging them into one file. It's what powers npx react-native start.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles