Intermediate everything in React Native, page 6
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.
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.
Debugging React Native Performance
React Native drops frames when the JS thread overloads, not just from bad code. Complex re-renders, console.log statements, or dev mode freeze touches and animations. Never trust performance numbers from development builds; always test in release mode.
React Native's Platform Build Glue
React Native integrates into Android via Gradle files. You edit settings.gradle and both build.gradle files to wire the React Native Gradle Plugin and enable autolinking. The footgun: editing the wrong build.gradle breaks native modules silently.
Touchable Components in React Native
TouchableOpacity and siblings wrap views to give press feedback by dimming or highlighting. Use them for simple taps on buttons or list items. They inject extra Animated.View nodes that can silently break layout, and Pressable has superseded the entire family.
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'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.
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 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.
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.
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: 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.
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'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 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 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 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.
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.
useAnimatedStyle: Link Shared Values to Component Styles
The useAnimatedStyle hook connects a shared value to a component's style, running animations on the UI thread. It's a reactive StyleSheet for dynamic properties like opacity or transform. The footgun: never mutate shared values inside the hook.
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