Skip to content

Chapter 4 of 7

Native Features, Data, and Device APIs

React Native apps can access a wide range of device capabilities through dedicated modules and Expo libraries. The expo-location module provides GPS access with permission handling, while expo-image-picker and expo-secure-store handle camera roll and encrypted storage respectively. Push notifications can be implemented using Expo Notifications or Notifee plus react-native-push-notification, requiring registration for push tokens via FCM or APNs. Biometric authentication uses expo-local-authentication or react-native-biometrics to invoke Face ID, Touch ID, or Android's BiometricPrompt, with appropriate fallback to the device passcode. The Share API opens the native share sheet, and Vibration triggers short haptic feedback.

Persistent storage comes in several flavors. AsyncStorage offers a simple, asynchronous key-value store similar to web localStorage, suitable for non-sensitive preferences. SecureStore and react-native-keychain use the iOS Keychain and Android Keystore with hardware-backed encryption, making them the right choice for auth tokens and passwords. For relational data, libraries like WatermelonDB or react-native-mockup-sqlite-storage provide structured storage with offline-first sync patterns that queue mutations locally and push them when connectivity returns, resolved via NetInfo's connectivity events. MMKV is a fast alternative for high-throughput key-value storage when AsyncStorage performance is insufficient.

Network connectivity is detected with @react-native-community/netinfo, which provides real-time updates and access to connection type information. HTTP requests typically use the fetch API, often paired with async/await inside effects or event handlers, while axios adds interceptors, retries, and automatic JSON parsing. For advanced data fetching, useSWR and React Query handle caching and revalidation cleanly. File uploads with progress can be tracked via XMLHttpRequest's onUploadProgress or axios callbacks, or via dedicated libraries like expo-file-system's uploadAsync for background-capable uploads. When requesting sensitive permissions such as the camera roll, declare the appropriate usage description in Info.plist and request runtime permissions using PermissionsAndroid on Android, with the library handling iOS automatically.

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...