14 Access camera or image gallery in React Native | React Native tutorial tutorial in English

now so far we have enjoyed quite a lot now let's work on how we can access camera or let's say image gallery in this video right this will be more fun stuff right okay so let's do it so for that we will be using this export match bigger package and we need to install it so this copy this command Expo install Expo image picker control see and just go to your terminal and hit enter and I had just right click and hit enter so let's wait for a few moments and let this package install for so we can minimize that and then and what we can do is we can just read little bit documentation so we need to import everything and rename it as image because so we'll copy this line okay and let's see if there are some examples or not okay so we need to grab our missions as well and I think we need to ask for the permission first okay it is asking to access camera okay yeah and it's easy too okay so let's first copy these two lines image speaker and Expo permissions control see right and let's see if package is installed okay so this package is installed so let's open our vs code so I have a point this create employee component and just paste it here and we can just get rid of this constant so we are importing here everything and renaming it renaming it as image picker and we are importing everything and renaming it as permissions from these extra provisions and from this expo image picker okay yeah so we need to install this package right but we need not to install this package is pre-installed okay so now let's work on let's create a function let's say Const thick RP I seek a pic from let's say gallery ta EE okay now assign it to add a function right like so let's first we will ask ask user for the permission now we can make this for this function a sink is a sink and now we can use a weight inside in it oh wait and here we can use permission PR my permissions and then ass-kissing right and this inside an ass guessing we can again use permission again peace capital permission dot and then we can ask for camel I think fort Lexus gallery the name is camera roll and to access camera we need to ask for camera I'm not sure do let's see now from here we can do something and that something is called I think granted if you sir grants us the permission then we can restructure gir this okay bigger solution granted now granted is true if user gives us the permission right so if granted granted is true sorry then we do something as well do something right now if you if you sir gives us the permission then we we need to open up the camera right so for that I think we can just use a weight and sorry oh wait and here we can use mah picker yeah this one and here we can use dot and here we can use launch image library or maybe yeah image library is right I will make a separate function to launch camera right awesome so image library takes us takes the object yeah so in this object we can write media types and that we get us will be let's say image picker dot media or not like this oh yeah media type options and it from there wheel okay so we can upload videos as well but for now we will just select images right okay now in second option let's give it a lot I didn't yeah user will be able to crop images right so let's give it a true and we can define aspect ratio so this aspect will be basically an added so here we can define ratio so what we will do we will allow user 1 is to 1 ratio so that our image will be perfect square or not is 2 we just need to write here comma yeah perfect and now we can what we can do is give this quality qu a and Q you give me you a and I why it does not give me session because I have got a comma here quality yeah quality and now the quality is between 0 to 1 so if you use here 1 so it will upload the full quality image if so if we write here Jean 0.5 it will reduce the quality to its half so yeah we can use the 0.5 right as well okay so to half the quality or you can just burn as ah not a big deal okay so if users takes the image from image gallery now this will return us something so for now let's create a variable and let's name it as data and for now let's console dot log Delta console dot log that data okay now if user doesn't give us a permission then what we can do is we can just import alert from react native I think we have alert I just put a comma here yeah this alert and when here we can just alert alert dot alert and here in alert we can just passed message like you need to give us permission permission to work right yeah so let's copy this function we will do alt shift on key let's rename it as pick from camera right here see Amer CA me and in here I think we can write permissions dot simply camera and here instead of launch image I think we can use let's put a dot here and launch camera is sink like so yeah and this will also consult or lock that out and I think it's we should test this out so here instead where'd our two buttons so here it is so let's call this when user clicks on the camera button now let's call our function that is from pick from what was the name pick from let's say camera here and let's say pick from gallery right awesome so now uh let's open our emulator so here is my am later now let's run the app on emulator so we can hit npm run right so let's wait for a few moments and i think it is opening on our device and let's see the output and it is bundling the bundle i think it is finished so okay this to wait you can't do anything we can just wait it why it is taking so much time okay we are getting already root view what was that just hit reload again and there we go the unless create on this to navigate to a creative screen now let's click on upload image right and here we can choose from the gallery so can't find very well test let's see i haven't saved this oh my bad ok so let's test this one more time let's reload it hit reload now let's again there we get to great employee click on upload image let's select image from gallery okay it's asked for permission that's a la let's allow whatever it is asking so here our gallery is open so now let's pick this image okay so it is giving us option to crop and this and you can see we have one is to one aspect ratio so it is a perfect square you can crop it right and here we go we have uploaded it oh we haven't have noted we have accessed the image and see in here in data upon we have logged the data and here in aw are things we have canceled equal to false and we are here we have URI and in URI we have this image right this is jpg image right awesome amazing now ah so now let's test it out the fee click in this camera here right let's allow let's see if camera opens up so this is the default camera of the emulator I guess so let's click so I just closed my am later because my piece was producing some kind of noise so we test this camera thing you know real device so I have opened up visor right so let me run this app on my real device right okay so this is my app so let's press a to open this up on our ear device and get it off this notification right and yeah let's see create a plus click on plus here we can click on upload image and let's see if it opens up a camera ok it is asking for permission okay Allah right and here we go it has a point camera for us ok so it has open front camera let's see how the pig goes and here we can press ok so too bad quick okay so to bad pic I don't want that face what we can do it just clap it up and let's see if you have low something yeah so we have loud so this is the basically the image and yeah so this this objects is identical as we accessed from our Gallery has right so this is same as we got in our gallery as right when we accessed image from gallery so yeah it was nice application right it was fun too right so let's work on how we can upload these images right in very next video so till then bye bye

Channel: CODERS NEVER QUIT

Views: 11,735

Keywords: react native, react native tutorial

Id: bSw_yjBtZWg

Length: 10min 59sec (659 seconds)

Published: Fri Apr 03 2020