Bubble Album

Bubble Album is a mobile photo album prototype built with Expo React Native.

The active app lives in [Demo2].

Overview

Bubble Album presents albums as floating bubbles on the home screen. Each bubble represents one album. Users can create albums, browse photos, take new photos directly into an album, and add handwritten-style notes on the back of a photo.

The current implementation focuses on:

• bubble-based home screen
• album creation with soft bubble colors
• in-app continuous camera capture
• local persistence for albums, photos, notes, home position, and zoom
• saving captured photos into the device media library when permission is granted
• photo preview with front/back flip and note writing
• album edit mode with move/delete support

Tech Stack

• Expo SDK 54
• React Native 0.81
• React 19
• expo-camera
• expo-media-library
• expo-file-system
• @react-native-async-storage/async-storage

Main Features

Home Screen

• Apple Watch-inspired honeycomb bubble layout
• tap a bubble to open an album
• long press a bubble to open the in-app camera for that album
• create new albums from the bottom-right + button
• edit mode for moving or deleting albums

Camera

• in-app continuous capture flow
• flash mode toggle
• zoom presets
• grid overlay toggle
• front/back camera switch
• shutter mute toggle

Each captured photo is:

1. saved into the selected Bubble Album album
2. copied into local app storage
3. synced to the device media library when permission is available

Album and Photo Preview

• album grid view
• tap a photo to preview it
• flip between front and back of a photo
• write notes on the back of the photo
• note content persists locally

Project Structure

BubbleAlbum/
├─ README.md
├─ 气泡相册.md
└─ Demo2/
   ├─ App.js
   ├─ app.json
   ├─ eas.json
   ├─ package.json
   ├─ package-lock.json
   ├─ assets/
   └─ android/

Local Development

Requirements

• Node.js
• npm
• Expo CLI via npx

Run Locally

npm install
npx.cmd expo start -c

You can then run it with:

• Expo Go for quick development testing
• Android development build / preview APK for full native capability testing

Build an Installable APK

The project already includes eas.json for Android preview builds.

eas.cmd build --platform android --profile preview

This profile is configured to output an APK for direct installation.

Important Notes

• The current camera flow uses the in-app camera, not the system camera, so that continuous shooting is possible.
• Media library behavior depends on device permissions and OS-specific rules.
• The Demo2/android directory is included because the project has been prebuilt for native Android packaging/debugging.

Key Files

• [Demo2/App.js]: main application logic and UI
• [Demo2/app.json]: Expo app config
• [Demo2/eas.json]: EAS Build profiles
• [Demo2/assets]: icons and splash assets