Building an Image Gallery app in React Native | Manoj Singh Negi | Recraft Relic

hey guys uh welcome to recreation channel and i hope you are doing well so today we are build we are going to build an image gallery in react native so let's just get started with that so firstly and for most i already have a amputee react native project uh set it up here and you can see the app running uh you know in the in the emulator so to build a react native app we are basically going to um uh you know uh so the main idea behind the app is that we are going to basically get all the photos in the devices show it up in uh up and agreed and when uh we click on them we are able to browse uh them you know by using swipes and all that so let's get started firstly foremost what we are going to do we are going to extract images from this uh from the device and for that we are going to use camera roll module provided by react native community i already have that installed so i'm just going to you know just import that so let me start by importing it um import camera roll from at react native camera roll so i will provide all the information about these modules in the description so you guys can you know go there and uh browse about them so we have the camera roll uh now uh one other thing we need is the permission to read the uh storage so we can basically get you know the image images information from the device so for that basically we are going to use the permission android module provided by react neter so first and foremost what i'm going to do is i'm going to write a use effect so on component mount what i'm going to do is ask for permission uh so can i can you know basically so our app can use the permission all right so let's uh start uh const okay so the first thing we are going to do is check if we already have the permission uh in case the user already granted us the permission so permission equal to uh you know permission android dot check and the permission that we are going to check is for permissions uh permissions dot uh uh you know uh read read ex external store storage read okay i messed up there so permission dot not like this it will be permissions dot android dot right so we are going to check if we has the permission has permission you're going to check permission check permission android.permission.read external storage and uh uh you know if we uh and this is going to be an you know a sync function and because of that i have to extract it inside our same function because inside use effect we can't use a thing so i'm just going to extract and just call it check permission equal to async and yeah get started here oh wait uh if we has the permission just written true we don't have to worry about anything if we don't have then request for the permission and how we're going to do is on status await permission android dot request and inside that i'm going to basically uh provide what kind of a permission that i'm asking for which is read external storage and this i'm just going to put it there and then i can basically you know provide some you know title for the modal that will show up you know which will ah which will ask user to provide them information for example i can say title image gallery app permissions and then i can say message image gallery needs your permission to access your photos for example right and then i can say you know button positive negative stuff like that but basically button position will render the okay button and the negative will render the cancel button and all that but for uh this example we're just going to do button positive right and then once we have the status we're going to return if the status was equal to uh granted right so if the user provides the permission or not one uh another important thing is to uh understand is that whenever we are requesting permission in the android we need to specify that inside the android manifest okay and so that's what i'm going to do um so if you go inside the app inside app you will go inside source and if you go inside main then you have this permission string here we need two permission uh if you're using the camera rule which is read and write for us we just need the right one so i'm just going to use the right uh not the right one only the read one so i'm just going to use the read one yeah read external storage and i am just going to go here instead of internet i'm just going to say read external storage and now i'm going to rebuild my app you know because i updated the android manifest so let's go here um let's say firstly i'm going to start the metropolis react native start right and then i'm going to say np x react native um run android okay so i'm just going to rebuild my app and open it in the emulator you can see the emulator here so it's executing building the app so now it's installing the app let's see okay uh so app is updated now let's uh see if you know if we have the permission so i also have that debugger on so it is basically you know open here you can see so this is where we are going to check the console um let's go here and firstly for most let's call the check permission function here and then let's console if we have the permission okay so if he has the permission uh if you're going to go inside the read external storage of undefined cannot create property read external storage of undefined permission android.permissions let me check so [Music] okay i think it should be in yeah so it should be in all caps so permission droid dot permission dot re-election storage let's see okay so it says true here uh let me see if it's the same console and reload the app so you can see that true has permission so i already have the permission to read the storage but let me deny that let me go in the app settings and let me deny that and see how it works i'm going to app info in the permissions files and media i'm just going to say deny and then i'm going to restart the application and now yeah so now you can see it says image gallery app permission so whatever the title that we provided and the message and if we hit ok then it asked me for the you know the permission to allow the app to use my uh like access my photos so i just say allow and now uh if i reload it again uh i can go here and just press r and if i reload it again and go to the console you can see true right so now we have the permission and now we can access our photos so let's uh go and access our photos so in order to do that what basically i'm going to do is i'm going to create a new function called const get photos and what this get photos function basically do is it's a it's a sync function right and what it's going to do is it's going to uh get the first 10 photos from our gallery so for this example i'm just going to keep it simple and i'm just going to fetch the first 10 photos all right so in order to do that i just have to do um const photo photos equal to await camera roll dot get photos right and then i just have to provide uh the how many images i need from the gallery all right so first 10 photos and then i will get the photos and i can console.log here right so good now what i'm going to do is because this is a promise if the check permission is true then only i will get the photos and if it is not then i will just uh error out but so for example i'm just going to call the get photos inside it not uh so in case if this fails nothing will happen but if it it is uh you know the permission is granted then it will call the get photos function let's see how that works um okay in our app we go here i'm going to go here hit r right so the app basically reloads and our browser uh console this so this is this is the same console from photos to just clarify i'm just going to put another text here and then i'm going to go to the app yeah just hit our app reloads and you can see you know this object here so when we basically get all the photos it returns us this object with edges inside edges we have node and inside node we have the image basically so right now if you if i go to my device i have downloaded some dummy image in uh in the emulator so if i go to my photos you'll be able to see uh you know six photos here uh this is not right and you can see the six photos here basically i know why this chrome is opening so if i open you can see these six photos so now we have the information uh of all the images in our system so you can see there are six edges here right so what i'm going to do is i'm going to save that in the state and then you know the next step will be basically uh showing them in a grid right so i'm going to create a very um you know state variable called nodes and updater function called get nodes use state auto import it and uh then then i'm going to basically set it as an empty array for now and i'm going to console it let's see you know what kind of data we will save here now if we go here and check the photos have this structure so inside photos we have dot edges and that inside edges is the array of nodes right so whatever we are going to do we only need the nodes so what we are going to do is set nodes set nodes why i type that node should be satellite so i'm going to do set nodes here so set nodes nodes dot not nodes dot ah but the photos dot edges dot uh not dot because adjacent array so edges dot map all right for every edge i want to extract its node and create an array of that and set inside the node so let's see if that works so if we go inside here i'm going to open my app i'm going to open my terminal going to hit reload and if i go to my you know browser you can see the the all the nodes right so now we don't have the edges and all that we have only have the nodes and inside node we have image which have the uri and everything right so now we have all the images in case you're wondering how i am able to access the logs in the browser what you have to do is just hit d here in in this terminal just hit d and go inside your uh you know uh emulator and you just here you will see a debug option click on it and it will open this for you if you want to stop it you can stop debugging all right so now we have all the nodes and all the photos and everything so now let let's show this you know in a grid in our application all right so now let's go um all right so let's create a view okay so let's create a view right and inside that view what we are going to do is we are going to map the nodes nodes dot map okay so node.map and uh it will give for every node we'll get the node and the index right one thing to remember that these images will be clickable so i'm going to wrap it wrap them inside a touchable opacity uh so you know they will be clickable because on their click we want to open them in you know in a view where you can basically slide between the different images so i'm just going to use the touchable opacity here the table opacity right and inside the touchable opacity what i'm going to oh so i'm just going to make it a bit beautiful i'm just going to do something like this right so inside touchable opacity what i'm going to do is um there will be an image right and this image source will be uri node inside node we have an image object and inside that we have a url so node.image.uri right and so we have uri node.image.uri and then we have so let's see if that works also we have to provide a key because you know let's see if that works i'm going to go to the okay let's say something view is not defined so i have to import the view okay so it's refreshing image is not defined why they are not getting it auto imported so if i go to the terminal hit refresh so we we are not able to see an image the reason being that we have to provide you know the some kind of uh styling to the view you know so it should be able to like take up all the width of the device so what i'm going to do here is view style equal to flex 1 right let's see if that works no and also i'm going to provide image the width height so let's see if we can give it uh you know some width and height so let's [Music] go here give it give it a height of 100 you know 100 what i'm doing i have to provide a style first so and inside style and object height will be 100 and let's for now give it a minimum width of 100 as well and give it a flex one so you know kind of all the all you know all of the images take same kind of width across the device so you can see in all the images are being shown here and you can see if i click on them they kind of graze out because we are using touchable opacity but this is not the right grid that we are targeting for so what we want is we want like a like a square block here then here then here uh and then the next image should be in the next row so in order to do that what i have to do is in this view i have to say that its flex direction is row and its flex wrap is a wrap okay and then uh again what i have to do is i also have to provide the same styling to the touchable opacity the reason being the touchable opacity is the right element it like is the child element of this view so i have to provide you know this the value so it you know it should be able to uh you know fill up the fill up the room basically here so that is that ah now you can see it goes like this but i was thinking what will happen if i remove the minimum width anything will happen okay so i have to provide a minimum width right and you can see right so you can see the grid basically working now so how it works is is something like this so view we have a view and then we basically give it flex direction to row so that means that all the items will stacked in a row but because we have given its children flex one so all the elements should be of same width and then after that we also provided that its flash wrap should be wrapped so if something is getting like uh overflowed then it will be you know wrapped to the next row basically so that is what is happening right now so we have six images which is perfect because then it you know uh basically gives us equal boxes right so now we have our grid that's good now what we can do is on there click we can open a view where we can swipe through the images so in order to do do that i'm going to use another module called react native swiper so if you haven't already heard of that i will basically add that in the description and you can go and read about it but in a nutshell react native swiper basically helps you create swiping views where you can put different views together and you can swipe between them that's what we are going to use so let's import i already have installed but yeah you can install when you will start working on this so i'll just say swiper from react native swiper right and uh now let's go so one other thing is important is that when we click on uh the image we want to hide this view this view and only show the you know the swiper view so in order to do that i am also going to you know um like have another variable in the state which will control that so let's do that first you know let's uh try to do that first before implementing swiper so let's say const um let's say for example detail view visible if it's visible or not set detail view visibility all right so if it's visible or not visibility and then for for the starter obviously it will be false because we don't want to show this view right away right so now let's um do one thing detail view visible so what i'm going to do for now if detail view visible is true right then i'm going to show an empathy view right with text empty view okay and if detail view is not being is false then i'm going to show this view right which is our the which is the main view basically okay yeah so and on the touchable opacity click here i'm going to make the view visible not on click on press and press set details visible to true and let's see if that works so yeah um so if i click on this you can see the there is an empty text is not defined what i'm doing i have to import the text just go here hit the reload again click on this and you can see the empty view right so this is the view that we are going to be using so now we already have the swiper let's uh try using that so instead of the view i'm going to use swiper you know so as uh i am uh live streaming there are some comments you know in the chat and uh yeah akash verma he says shout out please hey akash how are you so akash is a you know colleague of mine he is a really good friend and he is you know a fantastic react developer so that's yeah thanks for watching the video man so now we have the swiper get back uh to the swiper so now we have the swiper and what we're going to do is basically let's you know show the our images in here what i'm going to do is i'm going to map all the images in here so nodes again the same thing nodes dot map let's you know what do one thing let's copy paste this this will be much more easier so nodes dot map on notes dot map and inside the node instead of touchable city i'm going to render a view okay here as well view right and obviously there will be no there will be some styling so we'll talk about that later but uh there will be view and inside that view there will be images uh style um so now i don't want to render our image with height hundred million with 100 so what i'm basically going to do is i'm going to uh all right what i'm going to do is so okay so let's let's just render the image like this before uh first and then we'll think about anything else so the view says height hundred percent minimum weight hundred percent i don't think we need that we need flex one definitely i'm going to align the items to the center and i'm going to justify the content also to the center so all of the children should be center lines both vertically and horizontally then i'm going to say the background color should be hash 333 right let's see if that works so okay this is how it is looking right now this is not probably what we want so i don't think we need flex one yeah so this is how the images are looking right now so instead of that but i don't want its height to be hundred percent i'm going to remove the height and because i'm not providing any height it just disappears so there is a property called uh you know resize mode contain in which according to the you know width it will determine its own height and uh lisa you know resize it to resize it to contain the image so i'm just going to use that um still nothing i think i have to provide a bit to it let me reload that just click on here interesting so ah let me do one thing but it's uh so we don't provided any flags let's try to give it flex yeah so i think i can make its width hundred percent let's write yeah so now you can see the width hundred percent and you can see i'm able to you know swipe between the all of the images but you can see now i am able to loop through the images you can see here right so this is the first image is the first image this is the last image and you can see the dot going here so instead of that what i'm going to do is i'm going to make the loop so swiper have this property called loop and you can just set it to false and then it will stop looping for example if i try to go no it will not go you can see all right there's one problem that i'm i can't get out of this view so that uh that's the first thing the second thing is that let me reload that on i'll show you the second thing is it doesn't matter with uh you know uh on whatever image i click for example this it will always start from the first because the swiper things that you know it have to start from the start so instead of that what i can uh what swiper allows you to do is provide a index which can be the starting index so um i'm going to basically keep a track of that so whenever we click on an image we're going to pass that index to the you know to the swiper and uh it will take care of everything so const select selected index and then say set selected index equal to 4 you know for the start it will always be 0 but then when we click on this touchable opacity we will set the index because we have the access to the index so we're going to set the index so now i'm going to so you can see now if i click on this image it will start from here and then i can basically browse between different images right if i go here and click on this for example it will open this if i go here click on this it will open this and from here i can basically browse between different images right now the last thing which is remaining for us is uh you know that we should be able to close this way because right now i'm not able to close this video in order to do that what i'm going to do is i'm going to add another view in here inside this view inside the swiper view i'm going to add another view and i'm going to render a button inside it right like this like this and i'm going to render a button called title inside title there will be close right and yeah so that will be the title and on press of that button i'm going to close the model so once right um so on the on press of the model what i'm going to do is um or not the model on the button i'm going to just uh call these set detail views ability to false so so you know it hides the model and this view right um this view what i'm going to do is i'm going to provide style to it i'm going to position it absolutely because what i want to do is i want to render the so you can see the button is getting rendered here i want to render it here so what i'm going to do is position it you know absolutely so absolute and you can see the button in the center now what i'm going to do is i'm going to say from bottom uh you know put a 60 padding kind of thing so you can see the close button here so now if i go to any you know image it show me the close button if i click on the close button it closes the image gallery so yeah i mean and yeah that's pretty much it you know that's the simplest image gallery we can create and i think i took i took uh 30 30 around 37 minutes to do it and i think it's pretty uh simple and fast so what we did uh basically is that we installed camera roll we get all the images we showed them in a grid on click we use swiper you know to open the images in a swiping view and swipe across them and uh yeah close the swiper view and get go back to the photos obviously a lot of things can be done with this um you know it's the simplest example that i can create of you know if you wanted a good example of good of good and good simple and a fast example so yeah i mean that's pretty much it and in the comments i can see people are asking to make a new video about next js so yeah definitely i can do that next saturday and i will put all the information about this code or in the description the github repo and the all the packages that i have used and all of the issues that i ran into will be in the description so please go check it out and yeah so till the next saturday guys have fun

Channel: Recraft Relic

Views: 533

Keywords:

Id: 9xHQSR3Xsg4

Length: 37min 50sec (2270 seconds)

Published: Sat Jun 05 2021