Concepts in React Native, page 7
Reanimated Worklets: Run JS on the UI Thread
A Reanimated worklet is a JS function that runs directly on the UI thread, bypassing the bridge for 60fps animations. They're used in hooks like useAnimatedStyle to compute styles without dropping frames. The footgun: worklets capture their entire closure.
React Native NetInfo: Know Your Connection State
The NetInfo API is your app's network sensor, telling you if you're online and whether you're on WiFi or cellular. Use it to show an 'offline' banner or defer large downloads. The main footgun: isConnected only confirms a local link, not server reachability.
React Native Geolocation: The Web API on Mobile
Think of it as the web's navigator.geolocation API for your native app. Use it for map features or location-based content. The biggest footgun on iOS is forgetting location usage descriptions in Info.plist, which causes silent permission failures.
React Native Secure Storage: Using Keychain and Keystore
Use the device's native vault (Keychain/Keystore) to store secrets, not plaintext in AsyncStorage. It's for securely persisting small data like API tokens or private keys. The footgun is treating it like a general database; it's slow and for secrets only.
React Native's Two Threads: JS and UI
React Native splits work between a JS thread for React logic and a UI thread for drawing pixels, keeping the app responsive. The JS thread runs your code and calculates layout, while the UI thread handles native view updates.
React Native: Creating an iOS Native Module
An iOS Native Module is a bridge, letting your JavaScript code call directly into native Objective-C or Swift. Use it to access platform APIs unavailable in React Native or for performance-critical tasks.
React Native: Sending Events from Native to JavaScript
Think of it as a webhook from native code to your JavaScript UI. Native modules can push updates to JS without being called, enabling reactive UIs for long-running tasks or platform-level events.
Android ViewManager: Bridging Native UI to React Native
A ViewManager is a factory for native Android UI. It tells React Native how to create and update a native view from JavaScript, bridging the gap between JS and native platform widgets. It's used for custom or third-party UI.
React Native Codegen: Bridging JS and Native
React Native's Codegen auto-generates the boilerplate 'glue code' connecting your JavaScript specs to native implementations. It's essential for building Turbo Modules and Fabric Components.
React Native's New Architecture Interop Layer
The Interop Layer is a compatibility bridge, letting legacy native modules run in React Native's New Architecture without a full rewrite. Library maintainers must ensure compatibility for users on RN 0.74+. The footgun: remove partial Codegen specs.
useSyncExternalStore: For Synchronous External State
useSyncExternalStore lets React safely read from external data sources without UI tearing. It's for integrating non-React state, like from Redux or browser APIs, ensuring consistent reads during concurrent rendering.
React Native's Bridgeless Mode
Bridgeless Mode replaces React Native's legacy message queue with direct calls between JavaScript and native code. This improves performance by removing the serialization bottleneck for UI rendering and native module calls.
Appium: Test Your React Native App Like a Real User
Appium tests your app like a real user, tapping and scrolling on actual devices to catch bugs your unit tests miss. It's for verifying full user flows across iOS and Android. The footgun: relying only on unit tests gives a false sense of security.
React Native Gesture Handler: Native-Driven Touch
React Native Gesture Handler moves touch recognition to the native thread so gestures stay smooth when JavaScript is busy. Use it for swipeable cards and bottom sheets. The footgun is using it without Reanimated, gaining complexity without the frame-rate win.
Composing Gestures: Race, Simultaneous, Exclusive
Gesture composition lets multiple detectors negotiate one touch stream. Use it when a view must scroll and pinch together. The footgun is assuming gestures cooperate by default; without explicit composition, one steals the stream and breaks the rest.
useAnimatedGestureHandler: UI-Thread Gesture Worklets
useAnimatedGestureHandler bridges RNGH events to Reanimated shared values on the UI thread via worklets, keeping pan gestures at 60fps without JS drops. The footgun is reading JS state inside worklet, which crashes because worklets run in an isolated runtime.
React Native State Persistence
React Native state dies when the OS kills your app. Persistence writes critical data to disk so users resume where they left off. The footgun is testing with a swipe-close instead of a real process kill, or restoring stale data without schema checks.
Handling Network Errors in React Native
Network errors are normal state, not bugs to silence. In React Native, every fetch should expect flakiness and surface a retry path. The footgun is treating a timeout as permanent failure and wiping optimistic local state.
React Native Offline Sync Strategies
React Native offline sync writes to local storage first, then reconciles with the server later. It keeps forms and messages working offline. The footgun is non-idempotent mutations replayed, creating duplicates or overwriting fresh data.
Reanimated Layout Animations: Auto-Morphing Views
Reanimated's layout prop auto-animates view bounds between layout passes. Use it when state changes make views shift, expand, or reorder so you avoid manual measurement code. It conflicts with gesture-driven transforms, causing jumps if mixed.
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