Software Mansion React Native Labs - SWM Photos

A React Native demo project replicating images gallery app behavior known from Apple Photos or Google Photos

This repository is given to you in chapters, each chapter being hosted on a different branch:

1. Building Apple & Google Photos Clone in React Native #1 : image list
2. Building Apple & Google Photos Clone in React Native #2 : multiplatform
3. Building Apple & Google Photos Clone in React Native #3 : Vega SDK

Project structure

.
├── scripts/ # utility scripts for the project
├── vega/ # a subdirectory for Vega build
├── assets/ # static assets used in the app (images and fonts)
├── src/ # mobile application source code
│   ├── app/ # app routing
│   │   ├── index.tsx # Main app entry point
│   │   └── settings.tsx # App settings screentsx # React Native Image in ScrollView demo
│   ├── components/ # reusable components
│   ├── config/ # Configuration files
│   ├── hooks/ # Custom React hooks
│   ├── providers/ # app-wide state and data providers
│   │   ├── CachedPhotosProvider/ # Handles optimized (cached/resized) versions of photos for fast gallery rendering and efficient memory usage
|   |   ├── FocusRefProvider/ # Stores and provides global references to React Native components, used mostly for focus management
│   │   ├── GalleryUISettingsProvider/ # Manages gallery UI settings such as number of columns, image size, gaps, and offscreen rendering distance, persisting user preferences
│   │   ├── MediaLibraryPhotosProvider/ # Loads and manages access to the device's photo library, including permissions and photo data
│   │   └── ScreenDimensionsProvider/ # Provides screen dimensions and scaling information
│   └── utils/ # Utility functions and helpers

Running the project in developer mode

1. Check out the episode branch you want to focus on
2. Install dependencies using bun install
3. Set up your unique bundle identifier (required for iOS builds):
   • Copy .env.example to .env
   • Update EXPO_BUNDLE_IDENTIFIER with your unique identifier (e.g., com.swmansion.photos.<SOME_SUFFIX>)
4. Run the project using bun android, bun ios, bun tvos, bun androidtv or bun web
   • This command builds the Release version of the app on respective platform
   • Ensure you have the desired platform available on your machine (e.g. tvOS simulator or AndroidTV device)
5. (Optional) reconfigure the app to launch only the Photos gallery screen by tweaking EXPO_PUBLIC_LAUNCH_GALLERY_ON_START env variable.
6. (Optional) seed the device with images, see Photos seed section
   • Ensure you have the desired platform available on your machine (either use Xcode to install tvOS simulator and Android Studio to install AndroidTV emulator or connect the physical device)
7. (Optional) seed the device with images, see Photos seed section

Note

If you're having problem with seeing the photos that are available on the photo, please restart the app.

Also, you can use the ⚙️ button to navigate to settings screen and trigger photos re-reading from the device and cache re-calculation (aka generating a mipmap for every photo).

Running the project in production (aka release) mode

1. Use the very similar commands as for developer, but with :release suffix:
   • bun ios:release
   • bun android:release
   • bun tvos:release
   • bun androidtv:release
   • bun web:release

Note

Running release commands will trigger native rebuild automatically, so there's no need to prebuild the native project.

Running the project for Vega

1. Navigate to the vega subdirectory (cd vega)

2. Use the vega-install.ts script, providing target device and optional arguments (use bun vega-install.ts to see description):

   • bun vega-install.ts device=<DEVICE_NAME> [target=sim_tv_aarch64] [photos=<DIR>] [resize=false] [target-size=1920x1080] [launch=false]

   For example: bun vega-install.ts device=Simulator target=sim_tv_aarch64 photos=../assets/photos resize=true launch=true.

3. (Optional) To seed the device with images, provide path to images directory via photos argument of vega-install.ts script

Note

If you're having any kind of problems with loaded images, please reinstall the app using:

kepler device uninstall-app --device <DEVICE_NAME> --appName com.swmansion.photos.main

and continue with the previously mentioned installation process.

Performance measurements

We've tested the performance using the following preset:

1. Using Release version of the app (React Native docs recommendation)
2. Set of testing devices
   1. Android Google Pixel 4a
   2. Android Google Pixel 9
   3. iPhone 13 mini
   4. iPhone 16 plus
3. Device orchestration
   1. on Android we use ./scrips/android-adb-orchestration
   2. on iOS we use manual gestures (there's no known way to automate this)
4. Some measurements were done via JS by storing some timestamps and calculating the average time between several runs of the same procedure.

iOS Performance profiling

1. Build and run the app on iOS in the Release mode (bun ios).
2. In Xcode open Instruments
3. We've used following ones:
   • Allocations - for memory measurements
   • Time Profiler - for CPU measurements

Android Performance profiling

1. Build and run the app on Android in the Release mode (bun android).
2. In Android Studio open Profiler.
3. We've used following ones:
   • View Live Telemetry - for memory and CPU measurements.

Photos seed

Images we use to demonstrate the application are fetched from Unsplash. Several images are available in the repository and could be treated a seed for a photos gallery:

• https://unsplash.com/photos/foggy-mountain-summit-1Z2niiBPg5A
• https://unsplash.com/photos/gray-concrete-bridge-and-waterfalls-during-daytime-cssvEZacHvQ
• https://unsplash.com/photos/aerial-photo-of-seashore-sLAk1guBG90
• https://unsplash.com/photos/ocean-wave-at-beach-GyDktTa0Nmw
• https://unsplash.com/photos/forest-heat-by-sunbeam-RwHv7LgeC7s
• https://unsplash.com/photos/landscape-photo-of-mountain-alps-vddccTqwal8
• https://unsplash.com/photos/body-of-water-surrounding-with-trees-_LuLiJc1cdo

You can use them to populate your device or simulator with number of photos. Follow ./scripts/populate-device-with-images to do so.

License

SWM Photos is licensed under The MIT License.

Community Discord

Join the Software Mansion Community Discord to chat about SWM Photos and other Software Mansion solutions.

SWM Photos is created by Software Mansion

Since 2012 Software Mansion is a software agency with experience in building web and mobile apps. We are Core React Native Contributors and experts in dealing with all kinds of React Native issues. We can help you build your next dream product – Hire us.