More in Mobile Dev — page 38
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.
useSharedValue: State for High-Performance Animations
The `useSharedValue` hook creates state that lives on the UI thread, bypassing React's render cycle for animations. Use it with `useAnimatedStyle` to drive smooth, 60fps animations. The footgun: modifying a shared value won't re-render your component.
Zustand: Lightweight Global State for React
Zustand provides simple global state management for React, feeling like a shared `useState` hook for your whole app. Use it in small to medium apps where Redux is overkill. The main footgun is its limited ecosystem, making it a risk for large-scale apps.
Bottom Tab Navigator: Core Mobile Navigation
A Bottom Tab Navigator is the classic mobile UI for switching between top-level app sections. It lazily loads screens, mounting them only when first focused to save memory. Use it for primary navigation.
The React Native Gesture Handler State Machine
Think of a gesture handler as a state machine with six states. This lets you react to specific moments in a gesture's lifecycle—like `BEGAN` or `ACTIVE`—not just a single event. The footgun: ignoring the `CANCELLED` state, which can leave your UI broken.
KeyboardAvoidingView: Keep Inputs Visible When Keyboard Appears
KeyboardAvoidingView prevents the on-screen keyboard from hiding your inputs. It's a wrapper that shrinks, slides, or pads its content to keep it in view. Use it for login forms or chat windows. The `behavior` prop acts differently on iOS vs. Android.
Native Modules: Bridge JS to Native Platform APIs
Native Modules are your bridge from JavaScript to platform-specific APIs, letting your app use features not exposed by default. Use them when you need direct access to Android or iOS SDKs. The main footgun is misconfiguring Codegen in your project.
Expo: The New Default for React Native
Expo is the modern, production-ready default for React Native, not just a tool for prototypes. Use it for new apps to get smoother upgrades, cloud builds, and over-the-air updates out of the box.
CI/CD for React Native: Automating App Releases
CI/CD for React Native is an assembly line for your app, taming the complexity of managing JS, Android, and iOS code. It automates builds on every push and deploys to stores. The main footgun is storing signing keys directly in your repo instead of using.
fastlane for React Native: Automating Native Builds
fastlane automates the native build and release steps for your React Native app. It scripts Xcode and Gradle tasks like code signing and uploading to stores, letting you ship from one command. The footgun: it only automates native toolchains, not JS bundling.
OTA Updates: Ship JS Fixes Without App Store Review
Over-the-Air (OTA) updates let you ship JavaScript, styling, and image changes directly to users, bypassing app store review. Use it to fix JS bugs or tweak UI between releases. The footgun: you can't update native code or change permissions this way.
App Store Review: The Rules of Apple's Walled Garden
Think of App Review as Apple's curation for its "walled garden," prioritizing user safety and a consistent experience. It's the final gate before your app ships. The main footgun is assuming the rules are purely objective; Apple judges subjective quality.