More in Mobile Dev — page 15
C++ as React Native's Cross-Platform Engine
C++ is the shared engine under React Native's New Architecture, powering JSI and cross-platform TurboModules. One C++ module replaces separate Android and iOS native code.
New Shadow Tree: Async Layout Engine
The New Shadow Tree is React Native's C++ layout engine that runs off the JS thread. It calculates Yoga flexbox asynchronously before mounting native views.
Enabling React Native's New Architecture
Enabling React Native's New Architecture swaps the async bridge for direct JSI calls. Set build flags to use Fabric and TurboModules. It is not a drop-in upgrade; legacy libraries often break without interop support or proper codegen types.
React Native's Legacy Bridge: The Async Bottleneck
The legacy bridge is an async JSON queue between JavaScript and native threads. You see it stutter when a FlatList scrolls or native events flood the pipe. Teams often optimize JavaScript when the real bottleneck is bridge saturation from redundant native…
Native Module Threading Model
Native modules run on their own threads, not the JS thread or main UI thread. Heavy work stays off the JS event loop, but UI mutations must be manually dispatched to the main thread. Assuming they are main-thread safe causes crashes and ANRs.
Writing React Native iOS Modules in Swift
React Native speaks Objective-C on iOS, so Swift needs an Objective-C wrapper to join. Write logic in Swift, expose it via an Objective-C class, and register with RCT_EXPORT_MODULE. Skip the bridging header and the compiler never sees your Swift code.
Mapping JavaScript Props to Native Views
React Native bridges JS props to native views via annotated setters. Use it when wrapping platform views like maps or video players. The footgun is a missing annotation: the prop crosses the bridge but native never receives it, causing silent failures and…
iOS ViewManager: Native UI Bridge Factory
An iOS ViewManager is a bridge factory, not a view: it creates native UIViews and maps JS props to them. Use it for iOS surfaces like MapKit or camera previews JS cannot render. Never store view state in the manager; one manager vends many views.
Returning Promises from React Native Modules
A native module promise is an IOU across the bridge: JS asks native for a future result. Use them when native work like file encryption must run off the JS thread. If native code never resolves the promise, the JS await hangs forever and leaks.
Bridging Data Types in React Native
The React Native bridge only moves serializable data, so values crossing between JS and native must be primitives, arrays, or plain objects. You face this building native modules. The footgun is passing functions or class instances; the bridge strips them.
Building Android Native Modules in React Native
Native modules let JavaScript invoke Android APIs in Kotlin or Java. You build them when no library covers a device capability or you must reuse native code. The classic mistake is blocking the UI thread inside a @ReactMethod or mismatching getName() in JS.
React DevTools Profiler: Find Slow Renders
The Profiler is a stopwatch for your component tree. It records why each render happened and how long it took, so you can spot unnecessary re-renders in React Native. The footgun is chasing render counts instead of actual frame time.
React Native IAP: The Store Bridge
React Native IAP is a bridge, not a store. You ask Apple or Google to charge the user and listen for a receipt. Use it for subscriptions or feature unlocks. The footgun is forgetting to finish transactions natively, leaving users charged but stranded.
AsyncStorage: React Native's Async Key-Value Store
AsyncStorage is React Native's bare-bones key-value closet: strings on disk, retrieved asynchronously. Use it for auth tokens, onboarding flags, or cached JSON that survives app restarts. It is plain text and unencrypted; never store passwords or PII here.
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.
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.
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 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.
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.
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.