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

1. SWM React Native Labs #1: image list in minutes

.
├── scripts/ # utility scripts for the project
├── assets/ # static assets used in the app (images and fonts)

├── src/ # mobile application source code
│   ├── app/ # app routing
│   │   ├── settings.tsx # App settings screen
│   │   ├── photos-gallery.tsx # Main photos gallery view
│   │   └── list-scenarios/ # Various list implementation demos
│   ├── components/ # reusable components
│   ├── hooks/
│   │   └── usePersistedState # A hook that persists state to disk and restores it on mount, used for saving user preferences and app state

│   ├── providers/ # app-wide state and data providers
│   │   ├── MediaLibraryPhotosProvider # Loads and manages access to the device's photo library, including permissions and photo data
│   │   ├── CachedPhotosProvider # Handles optimized (cached/resized) versions of photos for fast gallery rendering and efficient memory usage
│   │   └── GalleryUISettingsProvider # Manages gallery UI settings such as number of columns, image size, gaps, and offscreen rendering distance, persisting user preferences

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
   • This command builds the Release version of the app.
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

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.

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

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.

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.

SWM Photos is licensed under The MIT License.

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

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.