More in React Native — page 8
UI unresponsive during large data processing on main thread
Tests RN's dual-thread model and 16.67ms frame budget. Strong answers separate JS and UI thread roles, blame long JS tasks for dropped frames, and propose chunking data to yield the event loop. Red flag: claiming memoization alone solves thread blocking.
Upload Key vs App Signing Key
Your upload key is a disposable badge for Google Play, not the signature users install. You sign release AABs with it before uploading. Treating it as unlosable or committing it to git are common mistakes.
React Native Android Release Builds
A release build is the shipping crate: optimized JS, shrunk native code, and a cryptographic signature the Play Store trusts. Generate it before any Play Store upload. Lose your signing keystore and you can never update the app again; back it up immediately.
ESLint: Catch React Native Bugs Before Runtime
ESLint scans your React Native code before execution to catch syntax errors, unused imports, and missing accessibility labels in your IDE or CI pipeline. The footgun is ignoring warnings; silenced rules let bugs ship to production.
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.