React Native Case Studies & Practical Application 4 — Questions and Answers
Question 1: A video streaming app downloads HLS segments. Users on older Android devices report the player crashes. What is the most likely cause?
- HLS is not supported on Android below API 26 (Correct answer)
- The Video component is rendered inside a ScrollView which clips it
- react-native-video defaults to a software decoder on low-memory devices
- ExoPlayer requires a minSdkVersion of 26 for HLS
Correct answer: HLS is not supported on Android below API 26
Native HLS support on Android was added in API 26; older devices need an ExoPlayer-based library configured to handle HLS manually.
Question 2: A project management app allows drag-and-drop reordering of tasks. Which gesture handling approach is most suitable?
- PanResponder tracking dy/dx and updating list order in onPanResponderRelease (Correct answer)
- TouchableOpacity with onLongPress to trigger a modal reorder UI
- ScrollView's onScroll event combined with state tracking
- Pressable with onPress and a sort button
Correct answer: PanResponder tracking dy/dx and updating list order in onPanResponderRelease
PanResponder captures continuous drag gestures and provides the precise position data needed to update list order in real time.
Question 3: A survey app must work fully offline and sync answers when connectivity is restored. What is the recommended architecture?
- Cache API responses in AsyncStorage and retry on app restart
- Store answers in SQLite, detect connectivity with NetInfo, and sync when online (Correct answer)
- Use a WebView that caches the survey page via a service worker
- Queue answers in Redux state and flush on the next API call
Correct answer: Store answers in SQLite, detect connectivity with NetInfo, and sync when online
SQLite provides durable local storage while NetInfo allows detecting when the device comes back online to trigger a reliable sync.
Question 4: An analytics dashboard renders dozens of recharts-style SVG charts. The app feels sluggish on mid-range devices. What helps most?
- Replace SVG charts with Canvas-based rendering via react-native-skia (Correct answer)
- Increase the JS engine's heap size via metro config
- Render charts in a hidden WebView and screenshot them
- Disable Hermes to use JavaScriptCore instead
Correct answer: Replace SVG charts with Canvas-based rendering via react-native-skia
react-native-skia renders graphics on the UI thread via its own Skia canvas, bypassing JS-thread bottlenecks that slow SVG-based charts.
Question 5: A real estate app shows property listings on a map with hundreds of markers. Performance degrades as markers increase. What is the solution?
- Render all markers and use shouldComponentUpdate to skip re-renders
- Use marker clustering to group nearby pins and render aggregate counts (Correct answer)
- Switch from react-native-maps to a WebView-based Leaflet map
- Reduce marker image resolution to decrease memory usage
Correct answer: Use marker clustering to group nearby pins and render aggregate counts
Marker clustering reduces the number of rendered map elements by grouping nearby markers, dramatically improving map performance.
Question 6: A fintech app must display sensitive account numbers that should never appear in screenshots or screen recordings. How is this achieved on iOS?
- Overlay a view with opacity 0 over the sensitive text
- Mark the sensitive UIView as secureTextEntry or use UITextField in secure mode
- Hide the component in the AppState 'inactive' callback and show a placeholder (Correct answer)
- Encrypt the text and only decrypt it on tap
Correct answer: Hide the component in the AppState 'inactive' callback and show a placeholder
Listening for AppState 'inactive' (which fires before screenshots on iOS) and replacing content with a placeholder prevents it from being captured.
Question 7: A language learning app plays short audio clips for pronunciation. Clips must start within 100ms of a button tap. What causes audio latency and how is it fixed?
- Network latency; preload audio files into local storage before the lesson starts
- JavaScript bridge overhead; use a native audio module with preloaded buffers (Correct answer)
- React re-renders; wrap the play function in useCallback
- Async storage reads; cache the audio URI in a ref
Correct answer: JavaScript bridge overhead; use a native audio module with preloaded buffers
Audio latency under 100ms requires native audio modules that keep buffers ready in memory, bypassing the JS bridge on each play call.
React Native Case Studies & Practical Application 4
A video streaming app downloads HLS segments.
Users on older Android devices report the player crashes.
What is the most likely cause?