Photo Gallery Tutorial
⏱️ 30 minutes Build a photo gallery app that captures photos and displays them beautifully. You’ll learn about camera access, photo library permissions, and image handling.What You’ll Build
A photo gallery app that:- Takes photos with the camera
- Selects photos from the library
- Displays photos in a grid
- Opens photos in full screen
- Saves photos locally
Part 1: Create the App
On the Nativeline home page, enter:Complete the Wizard
- Who is this for? — Just me
- Feel — Modern & polished
- Priority — Core functionality first
- Colors — Any palette (photos will be the focus)
- Name — Photo Gallery
Part 2: Set Up Permissions
Photos and camera require permissions. Let’s make sure they’re configured:In the Simulator, you can’t use the actual camera, but you can select from the photo library. The camera will work on a real device via TestFlight.
Part 3: Improve the Photo Grid
Let’s make the gallery look professional:Part 4: Add Photo Buttons
Make it easy to add photos:Part 5: Add Full Screen View
Let users view photos in detail:Part 6: Add Photo Deletion
Let users remove photos:Part 7: Make Photos Persistent
Save photos so they survive app restarts:- Add a few photos
- Close and reopen the app
- Photos should still be there
Part 8: Add Empty State
Handle the case when there are no photos:Part 9: Add Photo Info (Optional)
Show metadata for each photo:Part 10: Add Albums (Optional)
Organize photos into albums:Part 11: Add Photo Editing (Optional)
Basic photo editing:Final Result
You now have a complete photo gallery with:- ✅ Camera capture
- ✅ Photo library selection
- ✅ Grid display
- ✅ Full screen viewing with zoom
- ✅ Photo deletion
- ✅ Local persistence
- ✅ Empty state
- ✅ (Optional) Photo info
- ✅ (Optional) Albums
- ✅ (Optional) Editing
What You Learned
| Concept | How It Was Used |
|---|---|
| Camera | Capturing photos |
| Photo Picker | Selecting from library |
| Permissions | Camera & photo access |
| Grids | Displaying images in columns |
| Gestures | Pinch to zoom, swipe |
| File Storage | Saving images locally |
| Action Sheets | Option menus |
Testing Tips
In the Simulator
The Simulator doesn’t have a real camera, but you can:- Select from the sample photo library
- Drag images from your Mac onto the Simulator to add them to the library
On a Real Device
To test the camera, you’ll need to:- Deploy to TestFlight (see Publishing)
- Install on your iPhone
- Test camera functionality there
Troubleshooting
Camera option not working in Simulator
Camera option not working in Simulator
The Simulator can’t access a real camera. The camera option will work when you test on a real device. For now, use “Choose from Library” instead.
No photos in the Simulator library
No photos in the Simulator library
Add sample photos to the Simulator:
- Drag images from Finder onto the Simulator window
- They’ll be saved to the photo library
Photos not persisting
Photos not persisting
Make sure you asked for local persistence:
“Save photos to the app’s documents directory so they persist”
Grid looks wrong
Grid looks wrong
Specify exact layout:
“Use a LazyVGrid with 3 flexible columns and 2pt spacing”
Permission denied
Permission denied
Reset permissions in Simulator:
Device → Erase All Content and Settings
Challenge: Extend Your App
Try these on your own:- Sharing — Share photos to other apps
- Favorites — Mark photos as favorites with a heart
- Search by date — Filter photos by when they were taken
- Slideshow — Auto-play through photos
- Cloud backup — Sync to Supabase storage