React Native
198 bites tagged React Native — interview questions with model answers, and 60-second explainers.
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.
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.
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.
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.
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.
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 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.
Handling Permissions in React Native
A unified permissions API gives you one way to request device features, avoiding separate logic for iOS and Android. It's essential for apps needing the camera or location. The main footgun is forgetting to configure the native project files.
Shared Element Transitions: Morphing Views Across Screens
Morph a component from one screen to another during navigation. By giving two components the same `sharedTransitionTag`, Reanimated animates the view's properties (size, position) between screens for a seamless transition.
withTiming: Animate Values Over a Set Duration
withTiming is your CSS transition for React Native animations. You define a target value, a duration, and an easing curve to create predictable, time-based animations like fades or size changes.
useNativeDriver: Offload Animations from the JS Thread
useNativeDriver offloads animations from the JavaScript thread to the native UI thread for smoother performance. Use it in Animated API calls to prevent dropped frames.
Get React Native bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.