👩‍🏫 Learn React Native — Camera Permissions Tutorial 📱

Elevate your coding game with our FREE JavaScript Reference Guide! Dive in and upgrade your skills today! Download Now 💪🚀

As all developers must know. User privacy come with great importance. Applications should not be able to directly access the user’s camera, microphone, location, etc… without the user checking off on it. We need to respect user privacy by seeking actual permission to access these features.

In today’s tutorial we’ll be building out a basic user profile that will allow the upload of an Avatar, along with other user information. The real obstacle here will be to handle camera and library permissions in order to allow users to upload the Avatar from their image gallery or directly from their camera. User will need to grant access to these features in order to achieve this functionality. Without these permissions being granted the user will not be able to upload images to their profile.

Let’s get started

For this tutorial we’ll be using our very own React Native template to help bootstrap our project.

This template will provide us with all the necessary tools and libraries we will need to achieve our functionality.

We’ll be using Redux to store and retrieve our user data including our avatar. We’ll be using React hooks to access our user’s camera and photo library in order to select an image for our avatar. And finally we’ll be using react-native-permissions to request permissions from our user to access both their camera, and photo library.

Step 1 — Installing & updating template

First thing in your terminal run:

npx react-native init {YOUR_APP_NAME} --template https://github.com/daboigbae/react-native-template

Replace {YOUR_APP_NAME} with the name you’d like to give your project

After installing and running our template we’ll need to make some styling updates to our BottomTabNavigation.js:

This will simply be some styling changes to our bottom tab:

Step 2 — Update Home Screen

let’s make some updates to our HomeScreen.js. This is where we’ll display our users profile when data is set.

As you’ll notice there will be three things we’ll need to build out before this screen can actually display anything. Our profile editing screen, a UserProfile component, and a UserDetails component.

We’ll also need to add a temp image for our avatar when there is no avatar uploaded

Image path: src/assets/avatar-temp.png

Step 2a — <UserProfile />

Component path: src/components/home/UserProfile.js

This component will display our user profile avatar (or temp avatar when no avatar uploaded), username, and title. We will also display a follower and following count, but this will just be static data displayed.

Step 2b — <UserDetails />

Component path: src/components/home/UserDetails.js

This component will display our users email, mobile phone number, and twitter handle.

Step 2c — Profile editing screen

Screen path: src/screens/EditProfileScreen.js

This screen will allow our users to edit their profile.

This screen will be displayed as a modal so it won’t be a part of our tab navigation. We’ll need to create a new navigation component in order to display our modal screens.

Before we create our navigation component we need to setup an array to display our modal screens to keep our code clean. This will be an array because we’ll also be using it to eventually display our permission modal to allow our application to ask our user to request permission to access their camera and library.

you’ll find this path at: src/utils/screens.js

We’ll also need to update NAVIGATORS object to add our modal navigator variable we’ll use to display our modal navigation. You’ll find this object in the same path above.

Now that this is set up we’re ready to create our modal navigation component.

component path: src/navigation/ModalNavigation.js

Finally we’ll update our Main Navigation component to display our modal navigation.

component path: src/navigation/Navigation.js

Now we should be able to see our Profile display and successfully navigate to our edit profile screen.

Step 3 — Permissions set up

Before we can continue building out or application. We need to set up our permissions logic. We’ll be using React hooks to handle this. this will be the flow in a nutshell.

When the user presses on the avatar on the edit profile screen….

1. We’ll check for permissions, if permissions haven’t been set we will display our permission modal screen with type of CAMERA_REQUEST and allow users to request camera and library permissions.
2. If permissions are blocked we’ll redirect to the same permission modal screen with type of CAMERA_ERROR and this time instead of allowing the requesting of permissions we’ll redirect the user to their settings app to change their permissions manually
3. If permissions are granted we’ll open up our bottom action sheet that will show our options for uploading an image. Either for their camera or their gallery.

Step 3a — react-native-permissions

First we’ll need to install our library to handle permissions: react-native-permissions

You can read more about it here

To install: yarn add react-native-permissions

After installing the package we’ll need to make some updates to our project.

The first update will be made to our Info.plist with our wanted permissions usage descriptions:

Our next update will be to our Podfile

After making these changes we’ll need to run pod install inside our projects ios directory.

If you run into any issues after adding these changes to your project. Try deleting your Pods and Podfile.lock inside your ios directory and pod install again

On android:

Simply add the permission to your android manifest file.

path to file android/app/src/main/AndroidManifest.xml

Now our application is ready for requesting permissions.

Step 3b — Redux store

Before we can start handling any permissions we need to set up our Redux store to be able to store and retrieve our users data, and store and retrieve our users permissions statuses

path to file: src/redux/UserSlice.js

We’ll also need to setup a couple more const variables for our default permission state that will be assigned on a fresh install to our store.

path to file: src/utils/constants.js

Step 3c — React hook

Now we’ll need to create a react hook that will handle our permission checks and requests

path to file: src/hooks/usePermissions.js

Additionally we’ll need to create a couple more const variables for our permission types in order to differentiate from a camera request and camera error on our permission modal screen.

path to file: src/utils/contants.js

Step 4 — Build Permission modal screen

Now that our permission logic has been set up we can continue on to building our permission modal screen, But first we’ll be updating our modal permission screen array that we’ve set up.

path to file: src/utils/screens.js

Now we can go ahead and create our permission screen. Our permission screen logic will depend on the type prop that is being set as params from our permissions hook. If it’s a CAMERA_ERROR the button will open up the user setting app to change user permissions manually. If it’s a CAMERA_REQUEST the button will request the permission on screen then navigate back to the edit profile screen.

path to file: src/screens/PermissionScreen.js

Now we’ll need to make some updates on our <EditProfileScreen /> to handle what happens when user presses on the avatar component. Remember on a fresh install we’ll be redirected to our permission screen where user will be able to request permissions. If they’ve denied permissions when pressing on the avatar component they will still be redirected to the permissions screen, but when they press the continue button they will be redirected to their setting app where they can set their permissions manually.

path to file: src/screens/EditProfileScreen.js

Step 5 — Image options, and image upload

So now we’re ready to upload an image only after users permissions have been granted. We’ll want to install two different packages for this.

reanimated-bottom-sheet : This will be used to display our image options; either from camera or from library.

react-native-image-picker : This will be used to upload our images

A quick reminder that camera functionality is not accessible on simulator. So in order to test the camera functionality make sure to test on an actual device.

on root of project run : yarn add reanimated-bottom-sheet react-native-image-picker

Step 5a — useCamera hook

First thing we want to do after installing our packages is create a new react hook that will handle launching the camera or the library depending on the choice of our user

path to file: src/hooks/usePhotos.js

Step 5b — Image options

Next we’re going to be using reanimated-bottom-sheeet to display our image options to our user only after permissions have been granted. We will display three buttons:

1. Take a picture: this will allow users to take a picture using their camera
2. Choose from gallery: this will allow user to select a picture from their library
3. Cancel: this will simply close our bottom sheet

We will be using our usePhotos.js hook we created above to allow this functionality

path to file: src/components/home/ImageOptions.js

Lastly we’ll update our <EditProfileScreen /> once again and add our ImageOptions to be displayed and add our final callback function to our checkCameraPermission function to handle our image options when permissions have been granted. We’ll also create a reference to our bottom sheet to allow closing functionality in our <ImageOptions />, and an upload function that we’ll pass on to our <ImageOptions /> component in order to set, and display our image.

path to file: src/screens/EditProfileScreen.js

Step 6 — final updates

Now that everything is set up the way we need it. We can make our final updates to our screens to display our user information when it has been set. We will also be adding a final function to our <EditProfileScreen/> that will allow our user to save their changes to their profile.

Step 6a — <UserProfile /> updates

path to file: src/components/home/UserProfile.js

Step 6b — <UserDetails /> updates

path to file: src/components/home/UserDetails.js

Step 6c — <EditProfileScreen /> updates

path to file: src/screens/EditProfileScreen.js

And that’s it!!! We have now successfully set up camera permissions, and can allow our users to upload an avatar to their profile!

These are the final results:

Closing thoughts

So in closing, today we learned all about the permission flow. With this we can add all sorts of permission functionality to our application; remember we’re not just limited to camera and library options. Visit the full documentation to learn more about react native permissions

Thanks for reading! If you’re a freelancer looking to improve your proposal writing game and land more clients, give Bingo a try. Head to our website to learn more and start writing winning proposals today.