Scrolling card design with react native expo [2024]

[Music] hello guys and welcome back to the rising time now in this video I'll be showing you how to create this uh simple scroll view with cards in a react native so here we just have a simple scroll queue with the cards of users where we get them from the random user API which I will show you how to um do a simple fetch request in react and get data from my API as well so uh without wasting time let's get started all right so here we have a blank react native project the only thing we added to it is the font folder where we added the monad font you can add your own font of your choice by going to Google font and downloading any font of your choice and to it I'm going to leave a link to this particular font here on in the link in the description so do check it out if you want to follow us so we're going to go into this app component we're going to remove this text and add our card our card list [Music] component I going to create it by coming here we say card list.js we generate the skeleton for it and now we're going to import it back into the app. GS file so when you import it and now we have the app the card list so coming back to we just going to give you some basic styles by coming here to say the Styles should [Music] beer so just give it some basic styling which is setting it to be the WID and height of the container I give it the background color now for the finished product we use the hex code of uh [Music] h04 of this value and I'll give it a we of 100% get it to scale for as well so we have here uh we're going to come out here to create the individual card item so we just say inside this card there is a card item let's call it so GRE to create it inside this uh the same card directory we just create the card item the JS file we going to import it here so we have that working coming to this directional we will just say the style should be style. card and in here we just say to give it the height a fixed height of 65 will give it the background color of this dark color so it be [Music] this just give it some ping [Music] and some border R used to give it a bit of curve along the edges so you have our component now um to now to position the element properly we're going to come back to the card list and we'll give it I'll add some pings here so you may notice that uh if you on your on your device you may notice that that this card is actually reaching the top so the way you fix that is by giving it a padding on Android this is this is the way you fix it on Android so you just give you the Ping to say 20 20 pixels and that's going to resolve however if you're on iOS you need to come to the root of the application which is this app component and you change this um view to uh safe area [Music] view import it from a react n so that's how you resolve this this NCH thing on a iPhone back into this component just going to give you some horizontal padding so just say padding horizontal and say 10 give it a bit of ping on the side so remove this one I will say uh [Music] just give it a bit of flex this is because you want the item to be horizontally position so we give it this flex and then we're going to give it now the first section is going to be the so using this Flex we're going to give it divided into three section that is um the image section the main content and then the star we had on the right hand so this is for the image section we just going to call this um we give it a star [Music] profile and we're just going to leave it empty for now we'll come here we'll give it another we another [Music] view just going to call this one the main content since this where the main uh the text is going to go and we're going to create the last section which is going just going to be that right section so just going to say start just going to put it the right [Music] section right inside this image component we're going to leave it for now since we don't have any Imes however we're going to style it by coming by uh creating that Circle so we're just going to say give it a fixed width and height property so we just say the width should be let's just say 40 the height 140 the Border Ru I just to give it 25 make it a circle position the element in the center so just say a display of [Music] flex Flex justify content set it to the center align item Center uh let's give it a bit of background color so be able to see it for now so just say the background color should be as you should give it [Music] um all right so this is our element on the scen that's the profile image next thing we're going to come and we Define this the the text here in the content so this is a name section so just saying let text style sty we just say the name give it a starting name for now [Music] do here we're going to give a the location which which which we have in the finished P so we just say St st. location this location I just going to say New York City USA all right that is that is uh looking okay and for this final section we use an icon from ionic icons I'm just going to copy this from the other screen here and I'll paste it in and I'm going to import this icon from scroll here to the top let me my this scroll here to the top and I'll say import from export icons export Vector icons import this ionic icon and [Music] uh all right this is the icon we use and we give it this a yellowish color which you can use so now to make it horizontal we're going to come here but this are Flex we're just going to give it um say should be horizontal by setting the flex to be this plan fle set the justify content property to be spaced between and we're going to set align items to Center to make it vertically align I this is going to put everything at the center so you need to set it you need to set the flex property of one to make it take the WID of the container [Music] so and flex and flex direction of [Music] FL all right so um I think the now we have to um start this main content section so come we copy this main content down here we say for main content we want the W to be 75 to be [Music] 70% I want it uh I believe that is okay for the name and the location we will just say the name we set the color property of white we set the font size be a little bit bigger so we say 16 add here and for the location we're going to do the similar a similar thing we just set the color to white and um there you have it uh one more thing we need to do is we need to import the fonts we use so we're just going to set the fonts family to the monat mon serat on [Music] we when you set it you're going to receive a warning telling you that moner has not been installed yet on your app JS file so if you're receiving that error you just need to come over to your app.js file mine is working right now because I already I I did it on this emulator before so we need to import uh the font here but before that let's ensure that everything is working fine on this component so it is looking okay now let's uh create duplicate of it to see [Music] it all right so for you guys who did not have the monad phone already cashed into the application what you need to do is you need to come to the app component and the first thing you need to do you need to import install a package that is um the Expo font Library which I will leave a link to to the command for installing it in the description uh so once you have that Library installed you just need to say f uh font loaded equal to use Font I going to import the use Font the library from here all right um now we going to set the give it the the font name so say I will give it the value which is uh the location of the font we use so you inside the font directory we have are going to import it now to prevent the app from showing warnings if the font is not loaded what you need to do is you need to come here you're going to say if not font loaded just return now this is going to prevent you from receiving warning warnings each time the font is not loaded into the application so let solve that problem for you we're going to come back now into our card list component so we already have everything set up so the next thing you need to do you need to PR the data from of users from the random user API so we will come here and we create a folder a file called API to make the request to the server not inside inside the rout to create a folder API we're going to create a folder called uh request I'm just going to copy the function and I'll paste it in here um so so this is a function that just makes a request to the random user API as you can see it is this is the request says fetch random users with only 20 results and then it's going to check if the status is okay that means the response is a 200 response and if it is it's just going to wait for the Json and then it will return the Json else you just return this error saying the request has failed so to give you a feel of what this request this response will look like let me I'll open it here in thund client by thund C is an extension you can get in vs code uh extensions you just go there you search for tund client now create a new request it's going to be a get request to this employ now send [Music] it so yes this is how the API response should look like so you have the result object way inside here you have a bunch of users you have a list of users so inside this user you have everything you may need about the user the gender the name the location uh the city the time zone uh the email and everything else that you may need so for this tutorial you only need the name and the location because that's what we be rering here so that's how our response looks like I'm going to I'm going to come back to the card list here and and I'm going to consum the function so first I'll create a use effect C here so see use effect I import it from use effect [Music] and in here I'll just call the function users remove the third [Music] parameter this is going to be an async function since we're making a request from a server so you want that to run asynchronously we use async away instead of instead of using the the D keyword which is a not ID so we wrap everything in a try block so a try in here we say the response is equal to a wait uh this we're not going to call this function here so whatever you name this function and this should get you the list of all the users so import that and once we have the response let's just log the response to see if we're getting the correct data as well we say log this and here we say catch any exceptions or any errors and then we'll just say also do one the error so uh let us check the console to see if we have everything working so as you can see this is the response from the server it has all this data inside which is what we wanted I mean which is what we wanted I'm just going to come I'm going to come back to the card list and I create a state to save all the data so I'll just say you state and quality card I'm going to set it to be initially an empty array then down here I'll say once the response is gotten I'll just say set the card set the card to be the response the result this is because inside here we only want this um result in order to prevent this too much nesting we only want the results which is uh the content and the response so we'll save that it says H State doesn't exist so yes let's import use St from from react now down here we're going to replace this uh card item with a flat list view this is because we want to render all the users inside there so this is where the scrolling your scroll Behavior comes in so we're going to create a flat list import that it's going to import that from react native so inside the flat list we're going to say the data should be equal to the card yeah this card is uh [Music] St then we have uh the key extractor the key extractor is a unique value inside all the list item so you need to pass in a unique item to identify each item in the list so in here will just say for each item it should set the item uh coming to this response um what I did I just assumed this uh cell phone number is a unique though you can actually reach out and grab this uu ID or this sh values which I also believe they can be unique just grab this cell phone [Music] number so next you're going to pass in the number of columns you want the the list to have so this one just it to [Music] one then the render item we are going to say that is going to get in the item and then will now return the card item in [Music] here oh we forgot to close this [Music] so okay so here we have our 20 our 20 list of users but we don't have the speed going down so we're just going to come here and then we say for each card you should pass in the [Music] item and then back to the card item component we going to get that card that we passed in and in here we'll just replace this uh static name value with the card let me show you we're going to grab this uh title first name and last name so we'll come here we say C name do title copy this here we have the first name and the last name okay and for this one I going to replace the static value as well with the car do location do City and also going to grab the country so the location that [Music] country and uh there we have it so the final thing we're going to do we going to try to replace we going to replace this uh placeholder profile images with the actual images from react native so we'll come here and we [Music] say we import the image Library so I'm going to import it from react native we set the source property The Source attribute to be a URI since um images are from an API you'll be card the picture large because we're trying to grab the large [Music] images I close this here uh so we're trying to grab this uh large images from from here these side pictures we have a large medium and thumbnail so I can't the smarton so coming back here we now style it we say the sty to be start image and down here we say for image we are just going to set the WID to be [Music] 100% set the height to be [Music] 100% I save that here we have the image so inside this profile we will set an overflow property to Hidden to prevent it from going outside the circle so yeah we have the full image card list so there some people with count is coming from right but we're not going to wor about that so uh there you have it guys so this is how you get a random user API and you R them on card um Al you can also you could also come here and change the number of responses that you need and I can change this to say get me 100 users when I save it it's going to get me 100 users in the card and itm you may also notice that you have this scroll this a scroll bar very close here so if you want to resolve that what you do is you come to this card and you're going to give it the style property so you see the style should be styles do um just going to call it scroll view inside here we will just give it one attribute which is um just going to give it the ping horizontal and we set it to 10 we remove this padding horizontal property here and save it and now you have the scroll bar very close to the edge as you see on apps and my app this pading by the side [Music] soon as you can see I'm fing 100 more users so we have a lot of data here so uh think that's that's how you create it now um have any questions um please leave leave them in the comment section and I will do well to answer all the questions we also have a Discord server which is Link in my bio so feel free to join in and ask your questions there and I do and I do reply to all comments so thank you for watching to the end and see you next time

Channel: Rising tide

Views: 317

Keywords: flatlist, scrollview, scrollview android studio, scrollview in react native, scrolling, card design, flatlist react native, flatlist animation react native, github, mobile, expo-fonts, expo, expo-font, expo font, fetch, fetch api, react native api, react native tutorial, react native for beginners, card, contact list, app contact, app, play store, random user, random user api, random user api javascript, john doe, mobile app, react native

Id: wiMD77bb3ME

Length: 25min 17sec (1517 seconds)

Published: Tue Jan 30 2024