More in React Native — page 11
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.
JSI Host Objects: Exposing C++ to JavaScript
A JSI Host Object is a C++ object exposed directly to your JavaScript runtime, bypassing React Native's slow, serializing bridge. It's used in high-performance native modules like database adapters.
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.
Why-Did-You-Render: Find Unnecessary React Re-renders
The `why-did-you-render` library is a detective for your React app, finding components that re-render unnecessarily. Use it in development to debug performance by spotting when new object or function references break memoization.
Analyzing Your React Native Bundle Size
Think of it as an X-ray for your app's final JavaScript file. It shows which libraries take up the most space, helping you shrink your app and improve startup time. The biggest mistake is only analyzing after performance degrades; do it proactively.
React's useMemo Hook: Cache Expensive Calculations
useMemo is React's cache for expensive calculations, preventing re-computation on every render. Use it for heavy tasks like filtering large lists. The main footgun is an incomplete dependency array, which leads to stale, cached data.
useCallback: Cache Functions Between Renders
useCallback caches a function so it's not recreated on every render. This is crucial for performance when passing callbacks as props to memoized components, preventing them from re-rendering unnecessarily.
Flipper: A Desktop Debugger for React Native
Flipper is a desktop debugging platform for React Native, acting like Chrome DevTools for your mobile app. It connects to your local Metro server, letting you inspect component trees, view logs, and trigger reloads. The main footgun: the project is archived.
React Native's Performance Monitor Overlay
Think of it as a quick, in-app speedometer for your app's performance. Toggle it from the Dev Menu for a live overview on your screen. The footgun: it's only a guide, not a precise tool for deep performance analysis.
Connect React Native Apps to BLE Hardware
react-native-ble-plx is the bridge from your RN app to physical BLE hardware. Use it to scan for, connect to, and exchange data with peripherals like sensors or smart locks, without writing native code.
Local Notifications: Your App's On-Device Messenger
Local notifications are messages your app sends to itself on the user's device, no server needed. Use them for timers, reminders, or download progress. The footgun: forgetting to create Android Notification Channels will cause your alerts to fail silently.
React Native Push Notifications: Permissions First
Think of push notifications as your app's mailbox. Your server sends a message, but your React Native app must ask the user for permission to show it. This is key for sending alerts via Firebase, but on iOS, silent failures occur if you don't request.
Using Device Motion Sensors in React Native
Treat device sensors as a data stream. Instead of polling, subscribe to an observable that emits readings for acceleration or rotation. This is for building compasses, shake detection, or AR views.
React Native Camera Access: Permissions and Setup
Accessing the camera is a two-part contract: declare your intent in native config files, then ask the user for permission at runtime. This is required for any photo, video, or scanning feature.
React Native's Share API: Use the Native Share Sheet
The React Native Share API opens the native OS share sheet, letting users share content like URLs or text. It provides a familiar UI with a single cross-platform method call.