Skip to main content

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
Wait for the build to complete.

Part 2: Set Up Permissions

Photos and camera require permissions. Let’s make sure they’re configured:
The app should now request permissions when you try to take or select photos.
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:
Test persistence:
  1. Add a few photos
  2. Close and reopen the app
  3. 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


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:
  1. Deploy to TestFlight (see Publishing)
  2. Install on your iPhone
  3. Test camera functionality there

Troubleshooting

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.
Add sample photos to the Simulator:
  • Drag images from Finder onto the Simulator window
  • They’ll be saved to the photo library
Make sure you asked for local persistence: “Save photos to the app’s documents directory so they persist”
Specify exact layout: “Use a LazyVGrid with 3 flexible columns and 2pt spacing”
Reset permissions in Simulator: Device → Erase All Content and Settings

Challenge: Extend Your App

Try these on your own:
  1. Sharing — Share photos to other apps
  2. Favorites — Mark photos as favorites with a heart
  3. Search by date — Filter photos by when they were taken
  4. Slideshow — Auto-play through photos
  5. Cloud backup — Sync to Supabase storage

Next Tutorial

Notes App

Learn cloud sync with Supabase

Weather App

Learn API integration