📸 Issue 10 — Camera Functionality Take Photos (frontend) #134
Description
🎯 Goal
Implement real camera functionality in React Native using Expo Camera, allowing users to capture photos and preview them before upload.
This feature forms one of the core actions of SnapMap.
📝 Task Description
Build a fully functional camera screen with:
- Live camera preview
- Flash control
- Front/back camera switching
- Photo capture
- Preview on upload confirmation screen
This issue does not include backend upload logic — only camera functionality.
🛠️ Steps to Achieve This
1. Request Camera Permissions
File:
/frontend/src/screens/CameraScreen.js
Use Expo Camera permission API:
const { status } = await Camera.requestCameraPermissionsAsync();Show fallback message if permission is denied.
2. Show Live Camera Preview
Initialize Expo Camera:
Ensure preview is fullscreen and responsive.
3. Add Camera Controls
Add UI buttons for:
- Shutter button — triggers photo capture
- Flash toggle — on/off
- Switch camera — front/back
These controls must float or overlay on the camera preview.
4. Capture Photo
Use:
const photo = await cameraRef.current.takePictureAsync();After capturing:
- Navigate to
UploadConfirmationScreen - Pass the
photoobject as navigation params
5. Upload Confirmation Screen
Add an Upload Photo button (placeholder) and a Retake Photo.
On clicking Upload:
- Show a success popup (Toast / Alert)
- Log metadata in console:
- timestamp
- camera data
- location metadata: latitude, longitude
Note: Ensure these location metadata is being recorded, for this additional permissions will be required configure them also in this issue.
📤 PR Submission
By completion:
- All previous implementation should be Intaced (signup and signin)
- User opens Camera Screen from Home Screen
- Live camera preview is visible
- Flash toggle & camera switch work
- Photo can be captured successfully
- Captured image appears on Upload Confirmation screen
- Upload & Retake buttons are visible
- Clicking “Upload Photo”:
- Shows a success popup
- Logs metadata in console
- Returns back to Home Screen (will later change it accordingly)