Building a Camera App with React Native Vision Camera and Expo: A Step-by-Step Tutorial | Code with Beto

Learn how to build a camera app similar to Obscura using Expo and React Native Vision Camera. You'll learn how to set up the project, configuring permissions, and adding camera features like zoom, exposure, flash, and photo saving. The app works on both Android and iOS devices.

If you want to create a responsive, native-feeling camera app with React Native, this tutorial walks you through the essential steps, including native project prebuild and UI controls with animations. It’s beginner-friendly and practical for real device testing.

What's inside

Creating a new Expo project and installing dependencies
Configuring app.json for Vision Camera permissions
Prebuilding native iOS and Android projects with Expo
Running the app on a real device (no simulator support)
Implementing zoom and exposure controls with animations
Taking photos, saving to media library, and displaying previews
Adding flash and front/back camera toggle
Building a permissions screen for camera, microphone, and media access

Creating a new Expo project and installing dependencies

We start by creating a new Expo project using (you can also use npm or yarn). The app is named "Obscura clone" to match the target UI. After the project is ready, we install key dependencies: for camera access, for UI effects (optional), and to save photos.

I emphasize that the Vision Camera library is fast and responsive, making it a great choice for camera apps. The Expo blur effect is used to display zoom and exposure values nicely but is optional.

Configuring app.json for Vision Camera permissions

Vision Camera requires explicit permissions setup in . I show how to add camera and microphone permissions under the Expo plugin configuration. If you don’t plan to record video, you can omit audio permissions.

This configuration ensures the app requests the right permissions on both Android and iOS. I also explain that these settings are optional depending on your app’s features.

Prebuilding native iOS and Android projects with Expo

Since Vision Camera needs native code, I demonstrate running to generate the iOS and Android folders. This step creates native projects based on your Expo config, enabling native module integration.

I advises adding these generated folders to to avoid committing native code to version control. After prebuild, you open the iOS project in Xcode to sign in and enable capabilities for testing on a real device.

Running the app on a real device (no simulator support)

Vision Camera requires a real device because simulators don’t provide camera access. I show selecting an iPhone 12 in Xcode and running the app directly on the device.

This is a crucial step since camera functionality cannot be tested in simulators. I also mention the minimum React Native version (0.73+) needed for Vision Camera compatibility.

Implementing zoom and exposure controls with animations

The app includes UI controls for zoom and exposure, inspired by the Obscura app’s black screen UI. I use Reanimated to animate the controls panel opening and closing smoothly.

Users can adjust zoom and exposure values with sliders, and the current values display on screen using Expo Blur for a nice overlay effect. I explain how these values differ slightly between iOS and Android and how to handle that.

Taking photos, saving to media library, and displaying previews

Once zoom and exposure are set, users can take photos. I show how to capture an image with Vision Camera and then display it in a modal with a smooth animation.

From the preview screen, users can save the photo to the device’s gallery using Expo Media Library or delete it and return to the camera. This flow mimics real camera apps and provides a responsive user experience.

Adding flash and front/back camera toggle

The app supports toggling the flash on and off and switching between front and back cameras. I demonstrate turning the flash on before taking a picture and show the effect clearly.

It also shows taking selfies with the front camera. These features are essential for a full camera app experience and are implemented using Vision Camera’s API.

Building a permissions screen for camera, microphone, and media access

I includes building a dedicated permissions screen that requests access to the camera, microphone, and media library. This screen is shown on Android devices to handle permission prompts gracefully.

Although the demo does not show the full permission flow on iOS, the UI is prepared to ask for and validate permissions before enabling camera features. This improves user experience and app stability.

Resources

CourseReact Native course

Learn React Native fundamentals and build real apps with TypeScript and Expo.

Premium resourcePro Membership

Get access to exclusive React Native tutorials, source code, and community support.

Let's connect!