Adaptive React Native UIs for Tablets and Foldables
Adaptive UI is context-aware layout, not just stretching pixels. It matters when a phone app hits a tablet or a foldable unfolds. Most devs stop at flexbox and wonder why the tablet experience still feels like a blown-up phone.
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.
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.
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.
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.
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.
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'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.
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.
WebSockets: A Persistent, Two-Way Connection
Think of a WebSocket as a dedicated phone line to a server, keeping the connection open for two-way conversation. It's ideal for real-time features like live chat or streaming stock tickers.
AbortController: Stop Fetch Requests You No Longer Need
An AbortController is a kill switch for network requests. Use it to cancel a `fetch` when a user navigates away. The main footgun is not handling the `AbortError` that `fetch` throws, which can look like a real network failure.
FormData: The Right Way to Upload Files
FormData is your digital envelope for file uploads. It packages files and text into a `multipart/form-data` payload for `fetch`. Use it in React Native to upload images or videos. The footgun: don't set the `Content-Type` header yourself; `fetch` handles it.