Take a Picture using Camera for Expo React Native Apps and Save to Media Library or Share File

hi everyone today i'm going to show you how to use xk expo camera to take pictures on an expo react native app and i'm going to show you how to use expo sharing to share those pictures and expo media library to save those pictures to your cameras gallery so first off i'll install those free packages expo camera expo sharing and expo media library and i'm going to import them so first i'll import the camera then i want to import share async which allows you to share a file and i want to import the media library i'm also importing use effect because i'm going to use that to get permissions use ref because i need a reference to the camera and use states so that i can show different things depending on whether there's permissions available or whether there's a photo that's been taken so first off i'm just going to set up my camera ref so i'm just going to use ref for that and then i'm going to want to have a variable for state that is whether the cam whether we have camera permissions or not and that will also have a function that we can set which is called set has camera permissions and so for that i'm just going to use state and it's just i'm just going to set it to default of undefined i'm going to do the same for the media library so camera permissions are basically whether you can actually access the camera and take photos the media library permissions allow you to access the gallery or the camera roll and save photos to them i'm using use effect so that i can check for permissions when this um component mounts and i'll just run that once it won't run it multiple times so inside that i'm going to call an asynchronous function because it needs to go in asynchronously request permissions so first off i'll request camera permissions so just await camera.request camera permissions if you're wanting to record you'll probably want the microphone available as well but for this i'm just going to take photos i'll do another video at a later point about recording videos um then you've got the lead media library permissions it's very similar but you'll use the media library instead and just request permissions so once we've got the status of what the user has said in terms of what permissions i've granted you can set the state variable for has camera permission and has media library permission and this can be used to show whether you'll give like different options to the user like um whether you allow them to save the photo it's also important to add this permissions in and also for is access media location enabled you'll want that as a string not a boolean which it has in the expo documentation so if it has camera permissions equal to undefined so basically it hasn't evaluated whether there's permissions yet you'll just say return request text of requesting permissions because you can't interact with the camera yet so you don't want to show it and if you haven't been granted perm commissions you're going to want to prompt the user to enable those permissions for you so the users can do that in the settings you can get better instructions if you want i'm just going to say please change in settings and if it gets past there you can pretty much assume that you've got camera permissions and so um at that stage you're ready to actually go ahead and add your camera component so i'm just going to go ahead and change what's returned i'm going to make it a camera it's going to be a full screen camera i'm going to remove that text i don't want that text on screen what i will have on screen is a button um that will allow me to take the picture i'm just going to wrap that in a view so i can give it a white background it's more easily readable against the picture background and i'm going to use a button its title is going to be take picture and i'm going to call a function that i'll define called take pic also so on press i'll call this function take pic i'll also have to set the reference to the camera riff so that i can actually go ahead and take the picture and i'm going to want to set up that style for the button container i'm just going to want to align that towards the end so it's not blocking the middle of the picture and also give it a background color so that the button stands out a bit more i'm just going to set a background color of white and i'll align it to the ends out of the way now that i've done that i can go ahead and define my take pick function it's going to be an asynchronous function because taking pictures is an asynchronous action so basically what i'm going to do is i'm going to set up some options there are more options available and you can look at them on the expo documentation i'll link that in the description below quality 1 is basically the highest quality i want to include base64 because that's how i'm going to display my image and i don't want to include exif data which is basically aperture and shutter speed and anything technical like that and it's just basically extra information about the photo so i'm going to get it my photo by using my camera ref.current and i'll take a picture and pass my options in once i've got that i can actually go ahead and set up some state so that i can show different uh a different view depending on if there's been a photo taken or not so i'm going to want a photo variable which will contain my photo if there's one that's been taken i'm going to use state if it's undefined it basically means there's no photo taken and i can use that set photo to actually go ahead and set the photo so i'm going to go ahead and set my photo to my new photo there it's going to trigger a re-render and if there's a photo i'm going to want to handle that i'm going to want to show a few different action buttons i'm going to want a discard button a share button and a save button i'm just defining my functions for share and save at the moment and what i'm going to want to return is a safe area view and the reason i want to safe area view is that it doesn't sort of go off the screen for an iphone it sort of just makes a little bit more easier to manage you don't need to think too much about the safe areas on the iphone i'm also importing button and image because i've got a few buttons and images and i want to show the image preview so yeah i'm going to have a safe area of view i'm just going to set that style to container so it takes up that whole screen i'm going to have an image in there i'm going to give that a style of preview too which i'm going to define in a minute but basically it's just going to be um it's going to be basically stretched and taking up the remaining space so that it gives a good size preview of what the image looks like for source you want to use the base64 data from the photo um you also need to pre-paint that with the base64 um just so that it's recognized so yeah you can just copy and paste that in all this code is going to be available on github so you can check it out and look it in your own time as well it'll just be available in the description below and you can follow me for other um code on github as well so yeah i'm just making it stretched and flexed to take up the remaining space so i'll take up all space except for where my buttons are so it's now time to define my buttons there's a few different buttons i want firstly i want a share button so a button with the title sheer and on press i'm going to want to call my sharepic function that's basically going to open up the share dialog in the demo i'll cut that out a bit because i don't want to show you who i've been interacting with i had to use my personal phone for the demo because the camera is not available on the simulator so here i'm going to want to check whether there's a media permissions if there is then i'm going to want to show a save button which will allow people to save to the camera roll or gallery and i'll call that save photo functional define the defined if there's no camera permissions i won't show that button so i'll just return undefined and i'll also have a discard button which will basically be like if you don't like the picture you can discard um all that's going to do is set that photo to undefined that will take us back to the camera so we can take a new picture so now i just need to fill out my share pick so i'm going to use that share async function that i've imported previously and what i'll do is i can actually get the photo uri and from there we should be able to just share it quite easily so that's an asynchronous function and when it's complete i'm going to just want to discard the photo and it's just going to take me back to take another photo so i'm just setting that photo to undefined again i'll do the same thing for saving photo except this time i'm going to use the media library so media library dot save to library async that saves the camera roll or the gallery and you're using that photo uri again and once again it's asynchronous so i'll handle that promise and i'm going to what i'm going to do here is once again discard the photo once i've saved it because i'm going to want to go back and take another photo if you don't feel like that's necessary for your use case you want users to manually discard photos that's fine go ahead and do that you can just leave out that code for setting photo to undefined so now i've loaded up my code and i can see there's an error it seems to be because i accidentally imported this extra button and when i click and fix it i get these permission requests so if i approve those it brings up the camera and i can click on take pic which brings up the share button if i click on share i can go and save somewhere i've just clicked on files just as a demo you may also notice that i didn't have the save button and so it was just that typo and media library permissions are just fixed and so now i can choose to save it to the camera roll i hope you've enjoyed this tutorial today and if you have please like and subscribe for more content you

Channel: MissCoding

Views: 36,821

Keywords: expo react native, expo-camera, take picture expo react native, save photo to camera roll expo react native, react native save photo, react native share photo, expo react native camera, take photo react native, react native tutorial, expo-sharing, expo-media-library, how to take a photo expo react native, how to save a photo expo react native, photo quality expo react native

Id: 4WPjWK0MYMI

Length: 15min 27sec (927 seconds)

Published: Tue Apr 12 2022