Skip to content

Chapter 7 of 7

Debugging, Testing, and Accessibility

Debugging a React Native app typically begins with Chrome DevTools. Opening the developer menu by shaking the device or pressing Cmd+D/Ctrl+M in the emulator and selecting 'Debug JS Remotely' opens Chrome at localhost:8081/debugger-ui, where you can set breakpoints, view console logs, and step through code. React DevTools provides a separate window for inspecting the component tree. LogBox is the in-app warning and error console during development, and noisy third-party warnings can be silenced with LogBox.ignoreLogs. To detect whether code is running in development versus production, check the __DEV__ global flag or Constants.expoConfig.developmentClient from expo-constants.

Testing React Native components relies on Jest and @testing-library/react-native. Components are rendered with render(), queried with getByText, getByTestId, or getByRole, and interacted with using fireEvent.press() and similar helpers. Native modules are mocked via jest.mock('module-name') in setup files, and snapshot tests verify rendered output. For end-to-end testing, Detox provides automated interaction with native apps. Memory leaks can be detected by watching the Performance Monitor during development, profiling with Android Studio's Memory Profiler or Xcode Instruments, and looking for uncleared subscriptions and timers. Global error handling combines ErrorUtils.setGlobalHandler for uncaught JavaScript errors, native crash reporters like Sentry or Crashlytics for native crashes, and React error boundaries using componentDidCatch for render-time errors.

Accessibility is essential for inclusive mobile apps. The accessibilityLabel prop provides a textual label that VoiceOver on iOS and TalkBack on Android read aloud when the element receives accessibility focus, while accessibilityHint explains what activating the element does and accessibilityRole communicates the element type. accessibilityElementsHidden and importantForAccessibility let you hide decorative elements from screen readers. The useColorScheme hook, available since React Native 0.65, returns 'light', 'dark', or null based on system preference, enabling automatic dark mode support when combined with theme objects. To respect user preferences, multiply font sizes by PixelRatio.getFontScale() so text scales with the user's accessibility settings. SafeAreaView and react-native-safe-area-context handle device-specific insets like notches and home indicators across platforms.

All chapters
  1. 1Foundations of React Native
  2. 2Hooks, State, and Side Effects
  3. 3Navigation, Routing, and Screen Lifecycle
  4. 4Native Features, Data, and Device APIs
  5. 5Animations, Gestures, and Performance
  6. 6Expo, Deployment, and the New Architecture
  7. 7Debugging, Testing, and Accessibility

Drill it

Reading is not remembering. These come from the React Native Mobile deck:

Q

What is the default flex direction in a React Native View container?

The default flexDirection is 'column' in React Native, which differs from the web's default of 'row'. Children stack vertically from top to bottom unless you ch...

Q

How do you make a Text component take up the full available width of its parent?

Apply style={{flex: 1}} or alignSelf: 'stretch' to the Text component. Without these, Text only wraps its content. flex: 1 grows the component to fill remaining...

Q

What is the purpose of the SafeAreaView component?

SafeAreaView renders content within device areas not covered by notches, status bars, or home indicators. It's primarily useful on iOS devices with notches and...

Q

Explain the difference between useState and useRef for storing mutable values.

useState triggers a re-render when updated and is meant for state that affects the UI. useRef returns a mutable object (.current) that persists across renders w...