I was recently working on a React-Native project where we needed to give the user the ability to include photos from either their library or take a photo with their device camera. I wanted to build the project with the Expo "Managed workflow" so I could test it wirelessly on my device. I found ImagePicker (expo-image-picker) but until I started looking at the API reference, I didn't realize it also allows you to use the camera in addition to picking an existing photo from the device library.

What it does

This tutorial will show you how to build a simple Expo Managed React-Native photo app. The app simply allows you to select a photo from your library or take a photo with the camera and then display it on the main screen. It is intended to be a boilerplate to get you started building your own photo app.

How I built it

I used Visual Studio Code, React-Native with an Expo Managed Workflow, and ImagePicker.

Challenges I ran into

I was really hoping to show a way to select more than one photo at a time on the photo library screen but ImagePicker doesn't support that on mobile devices.

Accomplishments that I'm proud of

I demonstrated how someone with little knowledge of React-Native can get a simple photo app boilerplate up and running quickly. Hopefully, this will help some folks get a head start and a good feeling of accomplishment to see something a little more fancy than a text "hello world" on their first React-Native app.

What I learned

What's next for Build a React-Native photo app in 30 minutes

How to do something with the photos. I.e., how to upload the photos to a cloud server such as AWS S3 or Azure Blob Storage where they can be manipulated or analyzed. I.e., Add a sticker or use machine learning to identify cars, plants, animals, etc.

Built With

Share this project: