React Native Grid View - The How to Guide

whenever we want to render multi-column view the very first thing that comes in our mind is the flat list we can simply use the columns that we want inside flat list and we'll get the desired look that we want and for that I have already explained all those things in my previous videos now if you want to know more about this then I will leave its Link in the description box below but in this video I'm going to explain how we can achieve the greed view without using flat list with just plain view and some Flex properties now if you want the complete explanation you can come to this post I have already wrote all of these code for you right here also I'll leave the link to the GitHub repo now let's directly start writing code right now you can see this is a blank project where we just have this app.tsx where we are rendering just this grid View and inside this create view we are going to write out the actual code that we want to render our grid so here we are going to accept the data these are going to be props now here I'm using the typescript now if you want to skip the typescript file you can simply do this now after this we are going to have this render item function where we'll have the item and this is going to be some type and this is going to return the jsx dot element now if I can type this element and then we are going to have the column and this column is going to be number and this is going to be optional prop now we want to define the type for this data and the item and these are going to come from inside this props where we are going to accept this generic type quality now this data is going to be the type of this array and this render item is going to Loop through this data and this is going to give this t as the item and now to get this T right here we need to Simply remove this type from here and now for this props we are going to define the props like this and here we have to pass the T and this T is going to come from right here let's fix this and this is going to extends okay now that's how we can pass the genetic type to this one now if you are not using typescript then you can simply ignore this part this part and all these things okay now let's come inside our view and we are going to use our data render item and the column to render our grade view so for this one I'm going to Simply restructure all these things from inside our props and they are going to be data render item and the column okay now this column is going to be 2 by default because we want to render two column view by default and then here let's simply use this data.map and here you are going to get the item and this is going to be type t as we defined earlier so this is going to Simply go to this return and here we are going to have our view and let's complete this and inside this what we are going to do we are going to use this render item and we are going to pass the item now this is how we are going to get the flexibility to render the item that will have inside this array wherever we want and however we want that's how we are going to render our data but now we need to also use this column so for this one inside this view we are going to pass the style and for this one the first thing that will Define is the way and because we want to respect the column that we want to render here what we can do here is we can simply use the 100 which is going to be the 100 percent of the the width and then we can simply Define the column that we want and then we can simply use this plus and we can add this percentage which is going to give us the actual percent that we want for the view variable we want to render the item which is going to come from inside this data and that's it now you can simply come down and here we have the container style for the actual container where I'm going to define the width which is going to be 100 and this is going to be the same exact hundred percent which we are dividing for these items or for the single items okay after that we need to have the flex property so Flex Direction and this is going to be row and then we are going to use the flex wrap and this is going to be wrap so this Flex wrap is going to be the actual property which is going to render our view into the next line but anyway this is going to overflow okay so this is going to be the case and that's it now you can simply save this file and now let's come inside our app.t ESX and inside this grid view we can pass the data and here I'm going to pass the array so these are going to be the data that we want to render and then here we can simply pass a render item method and here if you just pass this item and this is going to be the function where you will render the item and if you hover over on this you are going to get the exact type that you have for these items inside this data and this is coming from right inside here where you extend the type and pass this to your props now because we are using this map I forgot to pass the key so for this one here we'll have the index which I'm going to Simply pass as the key and this is going to be index so that's it let's just save this file and here I'm going to come again and what I would do I simply use this View and inside this view let's render the text component which is going to come from inside the react native and here we'll render the item dot name so that's it let's just save this file and let's see if we have something now if you notice here we have this jungle news and the four names and let's just style them a little bit so that we can see the grid view clearly for now I just have these Styles here you can see we have this item container with some height background color broader radius margin bottom and all these things now we want to render this title at the center for that we have these Flex properties justify content Center and the alignment center and then here we have the title with the white color font port and the font size 25. now I'll come up and here let's add the style which is going to be a stash dot title and this view is going to be style and this is going to be Styles dot item container and for the container where we are rendering this grid view I'll also increase the padding top right here also you can use the save area view if you want to but for now let's just leave it like this and let's save this and you can see this is going to be your grid view now if you notice this doesn't look like the grid view right so for that what you can do you can simply give some padding to achieve those grid Gap kind of a thing so for this one we can wrap the render item inside another view and let me wrap it like this and inside this view first of all let me format this inside this view we can have the padding and let's just use this file also you can accept it as the greedy Gap if you want to let's just save this file and that's how it looks so that's how you can get your grid view now if you want to know more about these things I have already covered all these things and we are using that same thing to render different kind of a view as you can see this is going to be the application that you will create if you purchase the premium course that I have on udemy and here you will learn to build this audio sharing application using react native and node.js I will leave its Link in the description box below that is going to be discounted link if you want to purchase this course that's it for this video I'll see you in the next one

Channel: Full Stack Niraj

Views: 6,497

Keywords:

Id: wHPcWp1yPkI

Length: 7min 36sec (456 seconds)

Published: Sun May 14 2023