Search
Find a bite, explore a topic or look for a role.
Results for “React”
Bites 747
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.
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.
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.
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.
Archiving a React Native iOS App for Release
Archiving creates a production-ready package for the App Store by bundling your JavaScript and disabling dev menus. This is the final step before submitting to TestFlight or for review.
Detox: Gray-Box E2E Testing for React Native
Detox runs gray-box E2E tests by automatically synchronizing with your React Native app's activity. This eliminates flaky sleep() calls. Write one JavaScript test suite for iOS and Android that runs reliably on CI and real devices.
The `act()` Utility: Syncing Tests with React's Updates
The act() utility ensures your tests wait for React to finish updating the DOM before you make assertions. Use it to wrap component renders and state updates. The footgun is forgetting to use await with an async function, which can lead to flaky tests.
React Native & Jest: Automatic Native Module Mocking
Jest tests for React Native run in Node, not on a device, so native code won't work. The react-native preset automatically mocks native modules, letting you test components without a real device environment.
React Native Testing Library: Test User Behavior, Not Code
React Native Testing Library tests components from a user's perspective. Instead of checking internal code, you find elements by visible text and simulate presses, ensuring tests survive refactors. The footgun is overusing implementation details like testID.
Unit Testing React Native Components with Jest
Jest tests your React Native components without a device, like checking individual Lego bricks. Use it to verify a button's logic or how a component renders with different props. The footgun is forgetting to mock native APIs, leading to flaky tests.
Fabric Renderer: React's Native UI Interpreter
Fabric is React Native's interpreter, translating abstract components into concrete native views for iOS and Android. It's the core renderer in the New Architecture, enabling more synchronous UI updates. The footgun is thinking it's a library you import.
Turbo Modules: Type-Safe Native Code in React Native
Turbo Modules let your JS code call native APIs synchronously, skipping the slow async bridge. Use them to access device features or high-performance native libraries.
Profiling React Native on Android with System Tracing
System Tracing helps you find UI jank on Android by showing where time is spent in each 16ms frame. Use it in Android Studio to diagnose stuttering animations by inspecting the UI, JS, and Native Module threads.
Inline Requires: Defer JS Loading in React Native
Inline requires are just-in-time loading for code. Instead of loading everything at startup, you pull in modules only when needed, improving initial app speed. This is ideal for heavy components. The footgun: module side effects will execute later.