React Native Case Studies & Practical Application 5 — Questions and Answers
Question 1: A logistics app must scan barcodes continuously without the user pressing a button each time. Which implementation supports continuous scanning?
- Use the Camera component's onBarCodeScanned prop with a cooldown flag (Correct answer)
- Take a photo on an interval and process it with an ML model
- Use Linking to open the native camera app for each scan
- Poll the device clipboard for barcode values
Correct answer: Use the Camera component's onBarCodeScanned prop with a cooldown flag
onBarCodeScanned fires automatically for each detected barcode; a cooldown flag prevents duplicate scans while keeping the camera live.
Question 2: A multi-tenant SaaS app must switch between different API environments (staging vs production) without rebuilding. What is the standard approach?
- Hardcode both URLs and toggle with a flag in AsyncStorage
- Use react-native-config to inject environment variables at build time per scheme/flavor (Correct answer)
- Store the active URL in Redux and change it from a hidden admin screen
- Read the URL from a remote config service on every app launch
Correct answer: Use react-native-config to inject environment variables at build time per scheme/flavor
react-native-config reads .env files per build variant, injecting the correct API URL at build time without runtime switches.
Question 3: A shopping app shows a 'You left items in your cart' push notification 30 minutes after the user abandons checkout. What component handles this?
- A local notification scheduled by the app when the cart is modified
- A background fetch that checks cart state every 30 minutes
- A server-side job that sends an FCM/APNs push 30 minutes after the last cart event (Correct answer)
- A React Navigation focus listener that detects when the cart screen is left
Correct answer: A server-side job that sends an FCM/APNs push 30 minutes after the last cart event
Abandoned-cart reminders require server-side scheduling because the app may not be running 30 minutes later to send a local notification.
Question 4: A telemedicine app shows a video call UI. During the call, incoming phone calls must not terminate the video session on Android. What API handles this?
- AppState listener to pause and resume the video stream
- ConnectionService API via react-native-callkeep to integrate with the system dialer (Correct answer)
- Setting android:launchMode='singleTask' in AndroidManifest.xml
- Using a foreground service to keep the process alive during interruptions
Correct answer: ConnectionService API via react-native-callkeep to integrate with the system dialer
react-native-callkeep integrates with Android's ConnectionService to manage VOIP calls at the system level, preventing interruptions from cellular calls.
Question 5: A sports app must update live scores every 5 seconds while the screen is active. What is the most efficient pattern?
- useEffect with a setInterval that's cleared in the cleanup function
- Polling with fetch inside a while loop on a background thread
- WebSocket connection opened once and closed when the component unmounts (Correct answer)
- BackgroundFetch configured for a 5-second interval
Correct answer: WebSocket connection opened once and closed when the component unmounts
A single persistent WebSocket connection receives server-pushed updates instantly with far less overhead than polling every 5 seconds.
Question 6: A recipe app allows users to take a photo of ingredients and get recipe suggestions. The feature must work offline. Which technology enables this?
- Upload the photo to a cloud vision API and cache the response
- Use a TensorFlow Lite model bundled with the app for on-device inference (Correct answer)
- Use the device's built-in OCR to extract text from the photo
- Store a local lookup table of ingredient images and fuzzy-match them
Correct answer: Use a TensorFlow Lite model bundled with the app for on-device inference
Bundling a TensorFlow Lite model enables on-device image classification that works without internet connectivity.
Question 7: A dating app displays profiles in a swipeable card stack. After 50 swipes users report high memory usage. What is the likely cause and fix?
- Images are not released; use Image.prefetch sparingly and remove swiped cards from state (Correct answer)
- The gesture handler retains event listeners; call PanResponder.reset after each swipe
- React Navigation keeps all screens mounted; switch to a lazy loading strategy
- FlatList windowSize is too large; reduce it to 3
Correct answer: Images are not released; use Image.prefetch sparingly and remove swiped cards from state
Keeping swiped card components and their full-resolution images in state prevents garbage collection; removing them from state allows memory to be freed.
React Native Case Studies & Practical Application 5
A logistics app must scan barcodes continuously without the user pressing a button each time.
Which implementation supports continuous scanning?