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

Hi everyone!
Today I have a tutorial on how to take a picture in Expo React Native apps using the expo-camera Camera component. I will show you how to create a reference to the camera using react's useRef, and how to use that to take a picture. I will also explain a couple of options you can provide to the camera and then show you how to display the picture you have taken and give the user options to save to camera roll/gallery (using expo-media-library), share the image (using expo-sharing) or discard the image entirely and take another one. I will also show you how to request permissions to the Camera and Media Library
All my code is available on Github:
github.com/che...
You can also view the Expo documentation on expo-camera, expo-media-library and expo-sharing:
docs.expo.dev/...
docs.expo.dev/...
docs.expo.dev/...
There are other options you can set against the camera but for today that was not the focus of my video. You can find these option in the expo-camera documentation.
You’ve clearly come here to learn and a free audible trial allows you to increase your learning potential in situations where you may be hands free like at the gym or on your commute. It allows you to spend more time on theory when you aren’t able to watch a screen, so that you can maximise your screen time to pick up technical skills. Try it for free today:
amzn.to/49NX6Xe
// ABOUT ME
My name is Chelsea and I started studying software engineering in 2010. I have been working commercially full time since 2014 and have been in various positions from graduate developer to tech lead to solution architect.
I'm a full stack developer with a lot of experience in C# and Javascript but my passion is for mobile development; specifically native iOS development and cross platform using React Native.
I always have many things on the go and am always trying out a new side hustle and failing at it; perhaps you can learn from my mistakes!
Please like and subscribe if you enjoyed this video and want to see more like it!
Have any suggestions on topics you would like to learn more about? Please suggest them in the comments... I would love to help you out while doing a bit of learning myself!
// PRODUCTS USED
I use the following products in the creation of my videos:
Boya MM1 Microphone - amzn.to/3uupmOB
A reasonable quality and reasonably sturdy but cost effective microphone that can be used by both DSLR cameras, mobile phones and laptops
Canon 18-55mm Lens - amzn.to/3QYYdLk
A kit lens but a decent quality lens for beginners getting used to a DSLR
Canon EOS Rebel T7 with 18-55mm Lens - amzn.to/3GdRPuq
This is the kit I started with it includes the lens linked above and is a great starter camera.
I love Apple devices... These are the ones I use for my channel content creation:
Apple iPhone 13 - amzn.to/3G8pHcl
A good all round phone, good for Apple development and recording videos with enough high quality features but at a cheaper price point than the pro versions.
Apple MacBook Pro - amzn.to/3MUuPV8
A nice portable computer for working from anywhere and perfect for iOS development
Apple iPad Air - amzn.to/49LvYrY
Really easy to use for graphic design if required for logos as part of my app development or editing the videos on the go.
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!
//CONTACT:
Please contact me at: [e-mail]
//CRAVING MORE:
You can find links to all my different sites and social media over on Linktree: linktr.ee/miss...

[@peterluo1776]

for a newbie to React Native I thought this was a really good video. Thanks for sharing.

[@pauljere7013]

you have just saved my life MissCoding... thank u so much! 😀

[@AndrewOxenburgh]

Fantastic. Told me exactly what I needed to know! Thank you. 5 stars.

[@thomasmuaddi5747]

THANK YOU! as I was trying to figure this out this video was playing in the background HA

[@dhriti3080]

Thank you Miss for this lovely tutorial.

[@otodidak_misaja5725]

please make a tutorial about facial recognition that can generate names with expo reacnative

[@sventhesous-chef5750]

Thank you so much. You saved me HOURS of work :)

[@salahalsamarraaee650]

Thanks a lot. Amazing work, and thanks for the github code

[@ashutoshnayakkgp]

wonderful, really to to follow along

[@dennysusastro3270]

Kamsia yoooo, matur suwun sangett

[@TheSimbeye]

You are a life saver! Thank you so much.

[@gouravnainwaya5669]

I will definitely try it 👍

[@MissCoding]

Thank you Gourav! Hopefully it helps you :)

[@devcordova]

Amazing tutorial, thanks for sharing it !

[@chombazm]

Thank you for this tutorial 🙌🏾

[@Ellenox147]

Thanks for your video ! It really helped me !

[@MissCoding]

I'm so glad! Is there any other sorts of tutorials you would find useful?

[@Ellenox147]

@@MissCoding Not at this moment but thanks for asking !

[@jordanhazell4570]

thank you

[@therionk5144]

Thank you so much it really helped me a lot

[@appstuff6565]

Liked and Subbed. Amazing tutorials. However, sometimes when I open the expo app and click save it doesnt. I have called the save function inside TakePic function so it auto saves but sometimes it misses..any idea why?

[@MrArod1207]

Great video.. great explination! I just had a quick question, why is useRef() used? Thanks!

[@bobbyjoe5852]

It's a hook, for functional components, so you don't have to use a class component.

[@shanemarchan658]

it maintains create a reference to the camera object and maintains the same value across any rerendering of the component.

[@Kroxx95]

Excellent contribution, I am new to react native and I am in a project that I must use the camera. I have a question: how would I take the photo and save it to my dropbox account or google drive?

[@MissCoding]

I know at least for iPhone the share option should enable you to save to Dropbox/Google Drive

[@Kroxx95]

@@MissCoding Yes, that does help me in a certain way, but what I try is that after taking the photo, it is internally sent or uploaded to google drive or dropbox. Another question, can you save the photo with a specific name? Sorry if I bother you so much, it's just to be able to incorporate it into my project. Thank you

[@TrippLilley]

The `isAccessMediaLocationEnabled` bug is fixed in the current Expo SDK (48) so it can be a plain Boolean again, not a string.

[@brianambeyi4928]

You saved me. Thank you.

[@aporelly]

amazing tutorial, thanks! do you know how to save latitude and longitude in the exif? I'm trying with additionalExif but it's not working

[@ludwigvillalba1886]

Thanks for sharing!

[@MissCoding]

Thank you for watching!

[@alex2261997]

Hello, the mediaLibrary is not working with android versions 13 onwards. Do you have any suggestions for those cases?

[@mnarimohamedwebdev1059]

very helpful !

[@SmallgoodSfly5294]

You are a godess

[@user-hq4im9wb8k]

if i want to close the camera or permissoin close then how to do that?

[@umerfarooq5716]

hi, i want to make folder in phone storage on both android/ios and save picture on this folder , if any teriorial kindly attach a link thanks.

[@user-mo5jz1zu3o]

Hello, Does the camera api support panoramic photography？

[@GilisFansClub]

thank you!

[@vinitjain7]

Is it still relevant or somethings changed ??

[@howardcai1851]

I have exact package.json as you had and version after the initial expo project init.

[@AigleLee18]

Thank you

[@nigelpallatt]

expo install : expo-camera, expo-sharing and expo-media-library

[@johncmm9759]

Hey can I use this code in my app? It's super helpful!

[@MissCoding]

Yes, any of my code is freely available for use! No attribution or any other requirements :)

[@johncmm9759]

@@MissCoding thank you! I’ve watched a ton of your videos and they’re all super helpful :)

[@sajjadjafari9761]

Hi I have got a little error at the end ! Here what is the error: Text strings must be rendered within a component. setPhoto(newPhoto); Thanks a lot!