React Native Assignment– 7

Device Features and Integrations

Basic Questions

  1. Install react-native-image-picker, configure Android/iOS permissions, and add a button that opens the camera to capture a photo and displays the thumbnail.
  2. Add an option to open the gallery with launchImageLibrary and render the selected image URI in an <Image> component.
  3. Save the last selected image URI to AsyncStorage and restore it on app launch.
  4. Install react-native-image-resizer and create a function that resizes the selected image to 800px width and compresses it to 70% quality; show size before/after.
  5. Install react-native-geolocation-service, request location permission, and display the current latitude/longitude in a <Text> component.
  6. Configure iOS Info.plist with NSLocationWhenInUseUsageDescription and Android AndroidManifest.xml with ACCESS_FINE_LOCATION / ACCESS_COARSE_LOCATION; prove permissions prompt appears.
  7. Install react-native-maps, render a MapView, and center it on the current location with a marker.
  8. Add a shake-to-refresh action using react-native-sensors accelerometer to re-fetch current location.
  9. Detect device orientation changes using gyroscope data and update UI (e.g., show “Portrait”/“Landscape”).
  10. Install react-native-permissions; create a utility that checks and requests Camera, Photos, and Location permissions, returning a unified status.

Intermediate Questions

  1. Build an image picker modal with options “Take Photo” and “Choose from Library”; on select, resize and compress automatically, then show a preview grid.
  2. Persist the preview grid (list of URIs + sizes) to AsyncStorage; implement “Clear Cache” to wipe it.
  3. Implement geofencing mock: define a circular region on the map and display “Inside/Outside region” based on current GPS position.
  4. Add a background task (Headless JS/TaskManager) to periodically read location and append to an in-app location log.
  5. Create a permission gate screen that blocks access to the Camera tab unless Camera permission is granted; include a “Go to Settings” link when blocked.
  6. Install react-native-sqlite-storage, create photos and locations tables, and insert a record each time a photo is saved or location is captured.
  7. Create a list screen backed by SQLite that displays saved photos (thumbnail + timestamp) and locations (coords + time).
  8. Implement update and delete operations in SQLite for both tables; show changes instantly in the list via state.
  9. Install react-native-fs and implement file download from a test URL with a progress bar; save to app documents directory.
  10. Add a file manager screen that lists downloaded files (via react-native-fs), supports rename and delete actions.
  11. Implement file upload to a mock server endpoint with multipart form-data; show progress and error handling.
  12. Replace AsyncStorage caches with MMKV (react-native-mmkv) for faster reads; compare load times (simple console timings).
  13. Install react-native-encrypted-storage and securely store a login token; demonstrate retrieval and wipe on logout.
  14. Add a theme preference (light/dark) saved in storage (MMKV or AsyncStorage) and applied on app start.
  15. Integrate @react-native-firebase/messaging; request notification permission and log the FCM token.
  16. Configure Android notification channel (high importance) and send a test notification from Firebase console; verify receipt in foreground/background.
  17. Handle notification clicks to navigate to a “Details” screen, passing custom payload data (e.g., itemId).
  18. Show different handling for notifications in foreground (in-app toast), background, and killed app states.
  19. Schedule a local notification to remind the user to upload pending files in 1 minute; cancel it on upload completion.
  20. Group multiple incoming notifications under a single group on Android (e.g., “New Messages”) and verify UX.

Advanced Questions

  1. Build a camera workflow: pick/capture → resize/compress → write file to disk (react-native-fs) → store metadata in SQLite → cache URI in MMKV; add a “rebuild cache from DB” action.
  2. Implement a task manager with offline-first SQLite storage: create/edit/delete tasks offline and sync with a remote API when online; resolve conflicts with a “keep local/keep remote/merge” dialog.
  3. Add location-linked tasks: each task can optionally include a geofence region; when entering the region, schedule a local notification to remind the user.
  4. Create a sensor-driven UI: use accelerometer to detect shakes and trigger a data refresh; use magnetometer to show a simple compass overlay on the map.
  5. Build a permissions dashboard screen that lists Camera/Photos/Location/Notifications statuses using react-native-permissions and lets the user request/refresh each individually.
  6. Implement a downloads manager: queue multiple file downloads, show progress for each, allow pause/resume/cancel, and persist queue state across restarts via MMKV.
  7. Add secure file vault: encrypt selected files before saving (store encryption key via encrypted storage), and decrypt on view; log access attempts.
  8. Implement rich notifications: include an image attachment, action buttons (e.g., “Mark Done”, “Open”), and deep link to specific nested routes; handle each action distinctly.
  9. Build a data usage monitor: track bytes downloaded/uploaded for picker uploads and downloads; display per-day totals and warn when exceeding a threshold via notification.
  10. Final Hands-on Project:
    • Photos: camera/gallery → resize/compress → file save + SQLite metadata + MMKV cache
    • Location: current position map, geofence alerts, background logging
    • Sensors: shake-to-refresh, orientation/compass overlay
    • Storage: AsyncStorage (simple), MMKV (fast), Encrypted Storage (secure), SQLite (structured)
    • Files: download/upload with progress + manager UI and persistence
    • Notifications: FCM setup, channels, deep link handling, rich actions, foreground/background/killed flows
    • Deliver a demo video and README with setup steps, permissions, and test cases