LIVE coding: Instagram Clone in React Native from scratch

yeah i think we are uh live so hello guys hello welcome back to uh to another live we i didn't do it for a long time and um this is something new for me today we're gonna try to to do something interesting so yeah welcome back let's uh let's wait a bit for so people can join uh sorry first of all for the delay a bit of technical problems but i hope everything is uh is good so yes what um what are we gonna do today uh i'm gonna try to clone instagram in rec native uh first of all i'm not a front-end developer so that's gonna be a challenge for me as well that's why i brought here today with us lucas hi lucas hello hello guys yes you'll be on your stream yeah lucas will help me we'll do kind of uh pair programming um and yeah lucas uh is helping me uh we're working together at the startup i'm mostly on the back and and architecture and everything like that and lucas is mostly on the front end so i think he has a bit more knowledge than me on uh front-end stuff and he'll be here to to help me when i get stuck because i will get stuck i can say that but that's the fun part of programming like you live you learn you google you stuck you're stuck you're frustrated and then you find the solution and everything seems good so uh yeah as i said we're gonna try to build instagram clone uh here let's uh let's have a look into our plan like what we're gonna do um yeah in this stream uh what i'll try to do is build the the feed like the home page of instagram uh including like the stories of people um the feed with posts the design of a post and uh if we if there will be time i'll i'll try to to keep this stream short and if we'll have time we'll also get into the navigation like how to display this um this header with navigation and with uh bottom top navigator but that's all that's advanced we'll start with um with the smaller components so yeah um as you may already know like if you have a bit of experience with react in react everything is made out of components uh you take smaller piece and build from them like bigger things so before getting in uh into development we should understand like uh from what components is instagram build because instagram is actually building react native so we'll try to reverse engineer where their structure uh so first of all we we see uh the header on the top uh which displays the logo and some action buttons this will open the camera i think and this will go to the messages uh the next one uh is our stories component uh the red box this is like a scrollable horizontally scrollable um list of of people's story uh and this component uh includes smaller components which is the actual story so this green green box then we have um our post component which is included in the field the red thing is the whole post uh but post is we see is quite uh big and if we build it into the same component it's gonna be a long code and harder to manage that's why uh we'll split the post into three more components the header part which display the logo of a name and this icon uh the image itself and then the footer and probably the footer will also be split into more components but we can we can see if having only one component for the footer will um will be a long file and and see if we can refactor it and the last thing is the bottom tab navigator which helps us navigate through up to the discovery to notifications profile and so on uh so we'll probably start from uh stories and we'll start building um from smallest component and then include that component to build larger component and in this case we'll start with just a story which displays a profile avatar and then the name but before that we should set up everything we're gonna start from scratch we're gonna show you how to to start the react native project how to set up everything uh and mostly will give you like resources where to find these things uh of on the in the documentation like how to start a project how to to navigate everything so yeah let's get started yeah first of all um let's um wait a second no probably will um i want to show people like how to find things because uh i can do them by um by memory like the commands how to build up how to start a project but i think it's important for people not to memorize these things but rather know where to find them react native so we go to the react native website into the documentation and here we go to the environment setup and we're gonna uh we're not gonna use expo we're gonna use react native cli with uh i have everything set up on my uh laptop for example the xcode and node and watchman but if you don't like go follow these instructions and install on your pc on your pc it's very easy to follow and um hopefully you'll you'll manage to do that so we go to the creating a new application we just need to write npx rack native uh init and the project name that's what we're gonna do we open a terminal uh waiting for it to load so let's first of all go to youtube one second keeping you to be structured um and yeah running this np extract native init and we'll call our project instagram clone not preparing yeah this will go and bootstrap our fresh project so until then we we wait how did you decided to do this since the ground clone i don't know like um i was brainstorming some ideas like um like what to do in life like life coding because i really enjoyed the experience doing live coding for coding game contest uh where you have to be like uh bots and stuff ai um but that's like only twice a year and probably i will do them because i really enjoyed them but until then i was thinking like what what to do in live streams so basically doing something in the back and or things like i'm that i'm doing uh every day is not that visual and probably not that interesting i don't know guys let me know maybe i'm wrong maybe you'd like to know some how to develop some apis and i was thinking like let's do something visual that people can see people can learn and yeah as we develop our fitting application and rock native and i really enjoyed i decided like why not let's um let's do something in rock native and maybe this way i'll also like learn more like front end um yeah because i'm working every day with rack native but um not like with designing things like mostly like with data connecting and structuring things like that yeah i think that's a really interesting project yeah like practicing some skills seeing what's new and that's also something interesting because um when you're working on a project like you are so deep into that project because and you lose track of what are the new technologies what are the new things what are the new versions and stuff like that and by doing these spat projects that maybe takes you one day or you're working on them for some time but from scratch you can try and experiment with new technologies and this way you you keep learning and and testing new things that might actually end up in your main project that you're working on yeah exactly so yep whether i hear a very loud echoes of myself like is it okay for the livestream i mean do they hear it okay you hear a heck of yourself of myself when i'm talking i don't know maybe someone can confirm how how is the sound in comments so uh yeah rock native downloaded the template uh processed it and now installing the dependencies uh what can we do meanwhile wait uh so i think we could and you could introduce or maybe you can introduce it by step but what kind of uh for example for design what are you planning to use uh so if i'm not mistaken you said um okay so for example for yeah styling the whole for example first of all navigation so will you start working on it right away or um i i don't think we'll get into the navigation right away because the navigation is like a bit more technical and um yeah yeah let's we'll we're leaving out the head bar and the bottom navigation because that's a bit technical and not that interesting probably and it might take us a lot a lot of time like to set up a navigation uh just for displaying one screen and i think we are not yeah we we can start with like the stories and posts i think it will be really interesting to see actually the bottom navigation because in our project it's implemented a bit interesting in a really interesting way i'm gonna be honest so maybe you will learn something new here and why is it why is it interesting because we i remember we were trying like to have them custom when we were implementing the little like uh plus on the bottom oh yeah yeah yeah so yeah the project has bootstrapped and created let's now open our ide uh waiting for it to open and we can open and start working into in the id um yeah it opened a different project but we're gonna open the project that i just created yeah i think it's really nice as well that you are like uh doing it completely from scratch not like you see most of the i don't know streams that i watch at least it starts already like okay we have everything already set up and let's start working yeah i think this this part is like a bit boring and um like not interesting but it's required if you want to to do it so i've always hate like installing things i always wanted like everything to be set up i just want to code like i don't want to to deal with anything with that so uh our project is set up let's um run with a local server using yarn start um yeah we see a react native starting uh this server like we'll build the javascript and we'll send it to to our emulator and meanwhile let's open another terminal and do yarn ios this not iod come on ios so this should open a ios emulator and run our application there yeah it's launching by phone emulator yeah well my pc handle everything like emulator obs hangout [Music] let's hope i think i think it should everything like you have a pretty yeah the stream quality might be not the best but we are working what with what we have we'll see yeah like it's it's the first stream um in my new kind of office here in moldova and um yeah as every new stream stars like there might be some problems things but we're gonna fix them each stream i'm actually planning to do like side streams every saturday so people can put a mark in their calendar if if they enjoy watching it yeah consistency is really important when you release things definitely okay our emulator launched web is still building we see here in terminal the server is already running we see the nice react logo and we are waiting so yeah uh the first thing that we see uh in the empty project is an android folder this contains the android project we can actually go and open this project in android studio and we can run it from there however it's not required we see the ios thing the ios folder that's the project for ios which we can open in xcode sometimes running an application from terminal gives some errors and from terminal it's hard to find like where is this error and in that case i just opened the ios folder in xcode i try to run and xcode shows me the error is very user friendly the node models with all the models installed for react um and the most important thing is our objects this is the entry point of our application we're gonna see pretty shortly how it looks okay i see maybe i think when it finishes building it should work yeah let's uh let's wait yeah so until then uh let's uh set up like the project structure uh so first of all i'd like in my projects to have like a source folder where i keep all the source files uh let's call it src uh in the source folder we'll have like another folder called screens or models which will hold all the screens that we have in the application uh as well components where we will store all the separate components um probably assets here we'll store all the images phones and uh things like that invested actually we can create another folder images uh in screens we can create already the directory for the home screen this will be the screen that will develop today and i'm not gonna rush let's see it running yeah and it's really important to keep the structure like correctly especially when you have a big project and then the new like state developers come in and then they have to like figure out where is what and if it's messy then oh my god they have a challenge to figure everything out then come on why it takes so long to be yeah that's exactly what i wanted to say right now like it's taking very long for some reason yeah i don't know like while waiting we can actually um start writing some code in the home screen for the home screen let's create the index file and here like let's import react um we'll dix we'll declare our home screen component as a functional component home screen soon yeah we left as well like uh you could if you want by that time explain why are we using functional rather than uh class components as well because i think this is this was one of the things that was like bugging me when i just started for example coding in react native i didn't know which one to use when yeah like previously uh previously in uh react native and then react jazz as well uh like you were using functional components only like for dumb components and these are compo the dump components are called components that doesn't have like a state because first of all you cannot use you you weren't able to use state into a functional component and if you needed state you have to use class component it brings like more complexity into it however react recently introduced hooks which are a very powerful uh thing so yeah maybe go check them out for more details but what they allow they allow to use state inside functional components with with a simple hook and this allowed us to create [Music] stateful components use using functions and that's very powerful and right now we are probably moving everything in our application into functional components and it decreases like our code amount like drastically and everything looks so clean and i really enjoy um yeah that's true that was a really good in like uh i don't know addition to react native hooks really really powerful yeah so wow it's still building i don't know so in the home screen we'll just return a simple text saying like hello world that's how you start every project exactly come on come on why why it takes so long also youtube is not receiving enough video to maintain smooth streaming oh my god so yeah and as well like we're talking that doesn't help for sure do you receive any like feedback from viewers or comments about the sound or video quality no no especially the sound from me not yet we'll see we'll we'll listen to it after it and we'll see how it goes so it's still building hmm yeah that's very interesting i wonder if everything is is all right but actually when was the last time you built a project from fresh um today probably yeah yeah today because for me it's quite a long time ago to be honest let's try to open it with xcode i hope my pc will not blow up now come on when we see such things it it means that it's almost something good is happening [Music] exactly no like why missing home operator yeah let's let's from some libraries inside it yep okay so that's that's already starting very well you already have to like solve problems which is like very nice if somebody else starts building it and it appears now you will solve them for i don't know let's try to control c here and let's stop that um xcode is indexing initializing and let's try to build it for iphone 11 i think yeah it was for iphone 11 so here we'll see if there are any problems but that's only like the first build because after that like it starts building faster i brought here some water but i can't find it yeah i don't have any water or anything around me so that might be a problem yeah here we see at least some progress yeah and as you mentioned before like now you're showing how you can okay if something is bad happening in webstorm something you can open on xcode or on android studio and check it yeah yeah but that's true i was thinking i was thinking to start it in expo because in expo it's a bit easier but yeah as as we are mostly working with react native cli like decided let's do it with this one yeah because expo is nice but it has some limitations uh for we we used it for for one of our clients project yeah and it worked really well when you don't have like uh to deal with a lot of um things related to native like for example camera location and like some native libraries or things like that like expo is very good yeah true it's like probably for smaller projects maybe yeah like for projects that you only like display data or it's a good thing okay so we're close fast yeah let's come on come on yeah i think during this time maybe i should grab some water yeah maybe that's a good idea because later there will i don't think there will be a lot of time wait a bit a second then i am going and then i'll come back you know okay now it's getting interesting i'll wait yeah launching okay we i already saw it okay yeah here is the splash screen of uh react native and it should soon redirect us to the home page uh the default one that is built from react native and in the server here we probably will see something now we don't see anything but hello what's that oh it's but will it redirect you to that yeah yeah it should it should this is just the splash screen okay yeah right now i reloaded it you can reload it just by double pressing the r button and it reloads and now it uh downloads the javascript to render application yeah but um that's already good to see yep so we can already close this okay i now have something some cola it's not as good as water but it will work i've just finished my big coffee awesome you're up for okay that's good that's very important before starting to go to drink some coffee but it's also important to stay hydrated as you're saying in your videos and now we don't have uh exactly where is my water no i definitely i definitely took and yeah all right it didn't even take us half an hour to to set up the project but yeah that's what it takes and probably if i wasn't running like a lot of stuff on my pc it wouldn't it would be faster but yeah here it is we see some welcome screen for from react native um first of all we don't need any of that we go to objess and we start cleaning so we'll uh remove everything from the safe area uh we'll remove the styles um we'll leave a exporting default we don't need anything from here anything from here we leave a exporting default we don't need anything from here anything from here and the only thing that we need will be the our home screen and we import it home like this from our location like src screens and home screen and we include it in our jsx we save and we see a refreshing and already an error and define a nail and enable to resolve model src home screens i think uh we need to to rerun it but before that i would like to move that up js also investors um here and it will run yeah we see the hello world we see it out of the screen because um for that we need i think the safe area from react native yeah yeah from react native but to actually like in the future when we are implementing react navigation so it is better to use save area from them okay because if you're using animations access like animations in your application then this safe area from react native might have some problems okay that's interesting yeah that's interesting i didn't know it so yeah just by wrapping around our home screen into the safe area view uh ensures that we display the hello world not on top where it's hard to see but after the notch like uh yeah let's think about safer review so we have our home screen we have everything set up and we can start developing our components so let's go in here and as we say we'll probably start by the smallest component which will be like a story component but even that component will be built from from a separate like profile image component because as we see we use the same image here and we use the same image here so we can reuse the same component in two places so in the components let's just create a directory for it and it will be called profile picture basically like building a label from smallest pieces possible yeah that's what actually you told me a few years ago okay we uh create the index file we import as well here react from react and we'll declare our functional component profile picture like this probably will just return and we export default profile picture so our profile picture will first of all be composed of one image and the image we can take it from react native react native image and i think it has just a source which we need to specify a uri a link for it and i actually prepared some links hopefully they will work uh let's take this one we didn't saw anything yeah i i copied it from another screen and put it here we'll we'll refactor it and take it from props but right now let's just see if it renders and we can safely close them up for now and in the home screen component let's import this profile picture and try to render it profile picture and it auto completed it with everything so we need to return only one compo uh only one component like we cannot return like two components that's why we need to wrap around an empty [Music] an empty tag profile picture or you could wrap it in react dot fragment as well okay yeah i think it doesn't render because it needs some styles so for that i'm going to create a separate file like styles.js and here we say const style sequel to i think it's style yeah it's a style sheet and the style sheet is from react native style it will react native and it's called style like this dot create or how is it called yeah we can have a look at it why i don't have here um from tab like so so uh we just search our native style shed and we see the best practice of uh of using it yeah stylesheet.create i already saw it but let's double check yeah it's really nice yeah stylesheet.create and then we we declare our object create and inside it we declare our object and we export default tiles so the first styles will be for uh image let's say like the height will be 80 pixels and the width as well 80. we imported the in the index of a profile picture tiles from and we assign it to all the style here that image right yep okay we see our lucas boy here okay the image is displayed uh right now we need to make it round so for that we need to um say border riders right yep which is uh usually half of the width and the height like 40. and if we say that we already see the image like that so another thing that i want to do is to wrap it around a view to add some paddings around it so we'll wrap it around the view like this no no wait and for that view we'll declare uh yeah i have to import it from react native and for that view we'll declare some styles as well uh styles.container container and for the container i'll put it before that because we use it before the image will say like i don't know like padding um 10 10 pixels yeah it already has like some padding around it okay another thing uh the next thing is the where is the keynote uh you have a circle around it so for that we for the image we can declare a border um width and color as well with which is let's try with two pixels and border color and we'll take i don't know um some some a color that is um close to the instagram like we have like a nice gradient but i'm not gonna spend time on the gradient we can take like a a nice purple i don't know which one this one perfect lighter a bit lighter like that yeah i think it's perfect so border color will be this one and yeah we can see it there we can make the border with a bit bigger like this and one more thing that i'd like to try is if you can see here like this circle is not just around the image but it's it has like a white circle and like a white padding after the image and it's not touching the image and that's something that actually yeah that's that's something that i wanted to implement in uh vitinu so i'm not sure i'm not pretty sure how to do it but i think that we will uh we will declare this border uh for the container and for the image we'll declare just uh the color white so i don't know if it will work let's just try with declare for the image like a white color um [Music] here we declare height 80. with 80. oh we don't need margin we need we need nothing putting we need margins actually uh and maybe not 80 but i don't know like 80 86 because we have like border with three here i'm like yeah something like that yeah that's that's actually really close you should yeah yeah make it smaller one and that means that here uh height is 82 no why oh because of this border width and it should be 86 but if we don't declare here height and weight will it take the full container no i don't think so it will disappear yeah so for image it's important to have i think that's close enough to what we need that's very close yeah that's basically the same only the colors yeah okay okay with the styles it was easy enough i can call myself already front-end developer no i think i think if i will ever manage to align something in the middle that's without googling that's when i can call myself uh yeah i think that's impossible well it is possible but okay the next thing that i want to do is uh to have this uri dynamic like not to to have it hard coded into the component but rather to pass it through props so the component that uses it will be able to send whichever image it wants and it will just display it so here here we receive props and we can uh we can uh take take the uri from the props like props dot uri but i will do like some eslin es6 magic and destructure it here like the uri and we can delete the whole link here so again um we need to pass to the source like a uri and we need we want to pass it uh the array that comes from from the props but whenever like the value and the key is the same in es6 you can simplify it by just passing it like this and our image disappeared because in the home screen we need to pass it for props like like this you're right and here we will uh paste it from where i have it ctrl c and actually we can um no let me control z uh duplicate it three times paste it here and let's take some other photos as well lucas can you guess whose photo will be next no alex why no no no okay we have we have one come on i lost now i'm really interested which one is gonna be the third one um we have four oh gosh but don't and the fourth one is the person who first uh [Music] not first second who joined with our stream so yeah we we see our profile pictures here uh they are in in uh in different roles we should be in the same uh in the same row but that's probably what we're gonna do uh in the next component because uh as we discussed here we developed our story component now we need to develop this the stories component the one that will hold everything this the red box so that's a separate component and home component shouldn't uh care about like shouldn't handle this low level thing for that we'll going to create a separate component here it's going to be stories but understood right now but we don't have a story component so for the story we're gonna create a new component like a story here file index because this is just the profile picture but we need also to display underneath the name so a story will ha will have to import react my dogs are barking there you will need to import the profile picture a component that we just implemented and what else we'll see cons story i'm wondering how far are you planning to go with this like load off so will you be able uh will you start like doing some back end as well i don't know it's i think it's pretty early to to discuss about that but we'll see like if if there will be interesting interested interest interest okay i can't talk interest in this uh i can go far with it or i can take another option so here uh we'll receive from props what we'll receive from props the image uri and also the name of a person so we return a view which will be our story here we return a profile picture and we send a uri that we receive from the prop and we display the name into a simple text with um like this name we need to import them the view and text view and text from re react native um what else let's go into the home screen and instead of profile pictures let's already display the stories separately but you know what i will actually develop the stories here the stories component like not to do them in the home but straight there so we have our index gs index gs [Music] react um stories export default stories uh let's declare here just a simple uh like um an array with data const uh data and this will hold like um uh an array of of objects with images and names and that we can send it to each story individually so the first one will be [Music] image uri will be like this and name and we can take it and duplicate a couple of times even do like that okay let me quickly populate it with values so first one uh lucas try to spell my last name no i can't uh [Music] and the last one okay we have our data now we can import our story import story component from worry and here we can display them in a view like story it will need the image array and the name we can duplicate it a couple of times and we take like data advanced zero dot image uri data name and actually we can duplicate it like this and just change these values one three one two and three okay we need to import view here from react native and in the homes in the home screen instead of displaying profile pictures we will display the stories we take it from stories let's delete this profile pictures and call the stories and will it crash now we see already uh good things happening yeah yeah i messed up uh some things so uh profile picture i think is done we can close it to keep it everything clean home screen will not work on it will work mostly on stories and the story so um probably for users that doesn't matter a lot but for me it does like this yeah okay um in the story the first thing that i want to do is to display this name in the center oh god that's gonna be a challenge native on styles equal to stylesheet so for a story we need uh so help me oh yeah so for a lighting text it should be you actually only need to add a pasta style text align and do center and it will center in the middle of the component uh to the styles yeah like you should like for example you create something like name and then text align next the line center yeah and it should choose styles dot name and i didn't import it okay my mistake i import files from files so it's okay so it's in the middle of the component that means yeah your component my component my component is that big right yeah yeah and that's about the story the story component so i need to pass something to the view yeah and first of all as well like when you have when you will have them like uh components and aligning horizontally that means there will have like less space already so first of all yeah you could probably take a story story is the image right with all the the image with the name yeah so okay so yeah we should pass in the view yeah and we should pass styles container and uh to have like a wave to have like waveforms yeah you should probably you will otherwise uh the other solution would be like when you have them in horizontally you could for example do it with like justify content and then you would do a space between yeah so probably we should like align them and make them horizontal yeah that's probably in the stories here um you know what i wouldn't go into that because they are right now still in a view i would actually go and implement the flat list that will be like scrollable and and things like that because that might solve a lot of problems so actually it's very very easy to make it horizontally with flat list you just pass like one prop and then it's horizontal so we import the flat list the flat list will be like our scrollable think of data so instead of a view we'll declare here the flat list and the flat list will be closed just here so we don't even need this this one because we'll pass everything to the flat list so the data will be datum render item probably i should open the documentation um that would be good to see for uh as well everybody else but if you want i can tell you what to so uh we need to pass like which data and we need to pass like a render item like what should what component should i return for each element in this array so for each element we'll return a story but also this render item uh gives us the item like this and this will represent like one specific item so for the story we can say image uri is item not item dot image uri and for the name will be item dot name [Music] yeah uh okay so for the key instructor is like for optimization right right extractor uh and we and here is also like an arrow function with we receive an item or and yeah item element it doesn't and we destructively usually do it with ids probably yeah but in this case we can do it with uh the name will be like our uh key for each individual one uh what else like um so you could optimize it like very very much but i'm not sure if it's like very needed so you could say like max render to pepper badge as well like yeah right now we're not going to go into that many details um orientation or how is it called [Music] yeah let's do react native that list to see their documentation oh you only press horizontal true and that's it yep so just say horizontal and intentionally hurry all right and we see them uh scrollable the same way as we seen in instagram so just for the purpose of demonstrating you i will double this array the names are in the middle you see two problems with one and it says that encountered children with like the same key but that's because like we have the same name like we can say here another name here like this so we see our flat list with stories the same way as there in instagram is there maybe a possibility to hide this uh scrollable yeah i think there is but because i think i was looking for it but for this we will definitely the look you know you know what i think it's time to remove a hello world what do you think it's time very much i think it was time half an hour ago no you really like so okay uh we don't need the text here voila um so let's uh let's compare it with this one are we the proper size i think they're a bit too big smaller because they can fit like one two three four four and a half we can only fit four so yeah let's uh let's do let's do them a bit smaller and profile picture uh i don't know 76 yeah i think that that's gonna be good meantime i can check whether it's possible to remove that i would go even even smaller or there is no no no no i will go 70 but a bit less space between them what do you say not 10 but five okay i think that's a bit better yeah something like that yeah perfect that's almost the same as they think all right so then yeah so it's very easy actually to hide that line yeah so yeah okay so it's the list item but uh i think it should be okay so basically you just passed no border as a prop to true no border like this wait to let me check yeah but i see that doesn't work because it's for a list item but let's see i think it's not a big problem for now i think the the stories are done uh so we can move on with the posts but before that let's take a very small break to bring some water what do you say yeah okay see you in two minutes guys stay here we'll be back like in two minutes okay i am back lucas are you here guys are you i don't know what how how is the stream going and what's the health of it hopefully it's good so yeah we finished the story they're looking pretty well uh let's see what's next um the next is our post component hello hello yeah so i was saying like we finished the stories and right now is the post component yep so let's get into it let's do it okay let's uh let's go so let's uh close everything uh we'll declare [Music] post component and inside because i want to split the post into different uh smaller components i usually tend to create a separate directory components because uh for like the header footer and like the image because that's uh these components will be used only in the post and i don't want to put them inside the whole components like the components folder so here we need to print the directories that's going to be a header that's going to be [Music] image or body let's call it body and let's gonna call uh directory yeah footer so someone asks us which library is good to show videos uh yeah that's a good question because we uh that we are working at like vitinu it's mostly based on videos and we are using a react native video library i think uh that's how it's called it's one of the most popular and previously it used to be buggy but right now it's uh it's it's quite good and it renders videos pretty well uh yeah react native community video you can have a look at it it has yeah i think it's this one yeah hope that that answered your question so uh we have body footer header let's declare an index file for each of them and i'll probably copy paste it uh everyone import know what is thinking is there like a bootstrapping for components like i don't know it would be nice i remember in laravel you could bootstrap components pretty pretty pretty fast like uh and they had like the simple structure just by using a command because most of the time it's cop pasting the same thing like in portrait [Music] actually i think i found how to remove the horizontal line really explore default uh body yeah you're welcome uh and let's copy it into the footer as well we just rename it to water what to use for video caching um what yeah that's uh that's an interesting question like it depends like where you want to cache them we use like um um cloud for uh cloud front from amazon and that's like a cdn for videos and for content for images for everything and that's how we cache them closer to the user location but if you mean like caching on user's device uh that's something different and i don't know you you just download it and i don't know any specific library for that recognitive video i think does sound caching if i'm not mistaken and for the header i don't know if that answered your question are you building an application with videos so we have all of them and we need to declare the uh actual post component and we'll declare it here as index we import react from react we'll import uh header from components header the same with body and with the footer we declare the post component and here we can display them inside the view like this header body and footer uh yeah let's first of all export the default post and import view from react native and for each uh each of the components i just want to display simple text so we can see that they work they are connected um from react native and we display like uh body let's all right for a footer we copy this import statement from here text and the same thing for the header next header all right we have them here and i want to include them into our home screen so in home screen import post from components post and let's just render it here okay that's a very nice post thanks for watching guys with close enough to what instagram is doing so let's uh let me check something uh in device in the device yeah for that i can tell you from the top of my head there probably are some some solutions because that's a usual thing like to do but if you if you have like only some videos you might include them into the source project like uh i don't know like displaying one or two videos that that are static are not changed and not coming from the users maybe that's what you want to do uh and in that case like you just include them into the project yeah it's gonna be the that will increase the up size if the videos are large but that's also a solution i'm currently using the react native video but it does not cache the video in the device yeah probably doesn't by default every time it loads the entire video from cloudfront consumes so much internet yeah it depends like on uh on your application um if your videos are produced by users like i don't know there is not much around it besides using cloudfront but you said like you're using it because you couldn't cache all the videos for example if instagram cached all the videos on the device that will uh grow it could cache like the most recent ones and yeah that's uh that's an interesting topic right now we are not caching on the device in our application we are only like using cloudfront okay let's uh let's move uh header let's go you can move that horizontal line on your scroll actually i found out stories here how [Music] indicator [Music] yeah i think it's uh i don't know i can i can check it in um in here so it don't provide it i found it on a stack overflow and it should work because yeah like it worked but it's not mentioned in the official documentation as a pro maybe you've written it wrong try to check on the hangouts and copy paste let's do that because you'll you'll not be able to hand out i don't know where is my hangout okay it's here yeah uh show messages let's try to do that one shows oh it shows not show okay yeah yes yes is it better yeah now i can live now i can continue okay so let's start with the header uh so what we have here in the header let's have a look uh we have like a profile picture name and uh then like these icons so for the header we can um probably import the profile picture but one thing is that our height and width for the profile picture is uh stat static there so we'll see import profile picture from there we'll need a view so first thing is profile profile picture with uri we will take it from the props here image you alright right we will display the name as text here and we take it as well from props name and we have to display that icon with icons that might be a challenge so let's first of all sent to the header like the image uri and the name which we will receive from uh here but we'll probably receive as um like user because user posted that and here we'll have like user image uri user dot name and we need to pass the user where we use the post where is the post in the home here post will be i don't know let's uh send just a post and have it here we'll change it later const post will be first of all it will have a user the user will have a image uri we can copy it from stories i like her picture no homo like this and it will have also a name looks so we'll come back here and continue adding more more data to the post as we develop and as we need them but for now we only need the user to display it in the header we send it as post and that's why in in the post index we will receive as post we can hear the structure of a user from the pro post like that okay we see lucas here header let's go back to our header and we'll need to send the size there and to see how to adjust the profile picture based on the size uh we have them here in styles what would you say to do for that yeah what is the problem yeah we need to send like different sizes for a profile picture or we can uh just take it easy and just duplicate this component and make like profiles yeah yeah yeah let's let's uh let's do that and uh here we'll have like size and let's define a default value with the value that we have here like 70 right and that's 70 and we will not do height and width here and we will but rather we'll say here styles is the styles container and we'll define here the width will be size plus six is it like this or we need that object here and height will be size plus six as well and we do the same for the image here we declare them in an array that's how we pass like two we combine two styles one that is coming from the styles which is static and one which will depend uh from the props which is width and height and here we declare the same thing but without a plus six for the image and we should take them out of here something like that which means that profile picture we can send a different size and overwrite them that we can do in the post header and we can say size equal to i don't know 40 and let's see how it looks yeah it was pretty easy to do so if we don't send any size it will be like the default size of uh 70 but if we send um a different size it will be smaller or bigger depends on yeah so regarding the name uh we need for review to declare it as flexbox style yep styles.container we will declare these styles first of all tiles.js from react native and we should export them so we need the styles for container but first of all let's import it here because i can't stand that right there or there import styles from here right now yeah it works better so for the container will say flex direction uh horizontal or something like that do you remember horizontal no roll okay and align or justify lucas arrow here lucas i need your help i'm lost no okay so what's the problem yeah i want to display this um yeah the name the label lucas in the middle here because i think it's a middle so yeah in the styles here are the styles right yeah can you show me the name here and the styles you are trying to style the container so yeah okay go to there and um i think it should be justify content i try justify content but it's like bad justified item actually i think it would be the easiest uh no there's no just there's a line items basically but i think to go like add a style to the text mm-hmm [Music] and it will be horizontal center or middle center and it will be horizontal let's see yeah let's we'll see if it kind of it horizontally if no control save i think it didn't work delete justify content yeah yeah but you shouldn't sell the actual like content of it because uh we should actually give the styles to the name itself so but we we need this flex roll to display them like side by side and then i try to add for yeah this one align align self center align self enter okay okay and we donate that one and we can make them bold because i think it's bold here uh wait something like that [Music] okay but maybe not that black that's very dangerous to say sorry and let's first of all declare some aaa we will see this one here and we can adjust it like this something like that does it look similar probably uh probably yeah i think so but now it doesn't look like it's full but yeah that's the idea okay so are we doing that icons right now or we can do them a bit later because i i think for that icons we need to install um over called like vector icons library uh yeah let's do it a bit later and let's move with the body and the body will just display like a big image for now but in future like we know instagram has like scrollable images and things like that um here we can say image uri we will receive it from props we will display it here image source uri will be image uri uh like this we will have to style it style style let's first of all create these styles [Music] styles.js image and also let's import i'll exactly so uh our image will have like um with with will be using the dimensions or i think that's at 100 percent then we will add the padding 100 i think we don't need any padding there i'm not sure regarding the height let's first of all declare it as static i don't know like 500 and after that we'll we'll see and we pass it here to that image style so let's import styles from and style dot image jasonville 500 um like as a string number like this yeah you you know either presses the numbers okay so uh let's we need to in the home here we need to declare like um image urine that's for the content like for for repo for the actual post and it will be i also have something prepared there like this and in the post component we need to send it to the body image uri will be post okay we will need to change a bit here to have access to the post will be a pretty nice thing image you are right is that okay okay something is looking nice so uh we wanted to try without height and what's gonna happen now i think you need to pass the height is more important so but if you don't pass the width in instagram it's forward right yeah yeah in instagram it's full width with a whiff i think we are sad uh we've had to think like for now it's also good because in the beginning instagram started it like this because all images were square so to make them square we we will need to import dimensions and sound like uh to the width and height like dimension.width we can do that and have them square uh i think dimensions are from here right dimensions and for the width dimensions dot get with no no no it's like get any brackets yeah in here window in parentheses not in parentheses okay and that will make our image square if we send the same um width and height should probably not be assigned to height no should probably be assigned okay because we want to have like a square image and we we can see it here uh also for the image i think we should set like uh like the cover style like contain or something like that uh how is it called like uh cover or exactly sure what you're trying to do for this image it looks nice but for our images i'm not sure how it will look but yeah if there will be a problem we can come back so that's it with uh body uh now let's okay here we'll probably need to install them icons but i want to get there lastly because i had a problem with installing icons when trying to prepare for this stream and i don't want to get into that right now but we can display like number of likes of um uh username and also um a caption so for that we will go into the footer i would say firstly let's declare this data into the in in here so we have user name we need a caption for the post caption we can say which city is this beautiful city hashtag instagram uh huh what caption and also [Music] um to display the when it oh number of likes uh likes found will be one two three four of course because it's our instagram we can do whatever we want uh what else and when it was posted uh posted at we can declare uh it for now as a simple string like how's it says like six minutes ago six minutes and go uh all right what later to you yeah and it's not hard to change it later to use the yeah to use moment jazz that's a pretty nice library for okay um let's go to where post component first of all let's close everything to clean footer and in footer what we're gonna have uh we're gonna have like three rows right a view with three rows first row will be uh for likes second one for the caption and the next one for um yeah when it was posted so we're gonna have a view here view we need to import it then the first one is a number of likes let's declare it as text number of likes we take it from here i think i call them likes count right we display them and we say likes okay that's the first thing uh the next one will be the text with the caption [Music] we again take it from props caption and the last thing will be text with uh posted that posted how do they call them posted at we're gonna send all this information here we're gonna see how it displays and then we're gonna come back and style them properly so uh from the post components which is uh the index file here to the footer we need to send first of all likes count which will be post dot likes uh caption but let's uh we have more uh props here so let's structure them better post dot caption uh and posted at which will be post. it at so we see here okay likes count i i misspelled it yeah we see here all the information yeah it's it's looking okay right now but let's go and style them so for the footer we'll need to create a style file we start with importing as usual style style just let you know that we can see the footer of emulator okay let's thank you for just saying that if i'll do it like that will be better but now it's isn't it very small too small i think i can do it like this yeah probably that's gonna look better uh style okay balanced styles thanks alexandra yeah that's very good great did i type it wrong yeah redlining what you're reporting is from where oh redline what i react native okay we'll gonna have a style for google for that i'm speaking to him for the likes count right likes it's gonna be ball like font weight bold uh we'll see what else there we're gonna need the styles for um caption caption is as well but no it's not bold or is it bold and post it and uh for reposting that i know that uh the color is very gray again we're gonna declare a simple color and from this speaker we're going to pick like a very light gray so let's apply these styles here and then play around with them and get as close as possible to what's there so import styles like pound i'll is it ice count or just likes i think it's just likes yeah likes okay that's one that's what happens when you're not consistent with names style that posted at yeah something is looking better here there should be more space yeah more space between them how can we do them let's add margin how much free and do that for all the texts now when you add to all of them i think it's good no yeah actually it's pretty good when you and also let's add some styles here style dot container and i'll i want to add some um margins for for it as well maybe only to the left because they're too close to the border but i might add like for all the margins it looks better so it looks already something close to instagram right let me just check instagram how it looks and exactly yeah can you open that photo i think there should be a bit more space between the first post and the uh between stories yeah here i think we can add it to the stories here yeah between story and flatly let's add here i'm so tempted to add it just in line there but i don't want to give bad example to people so const no i think they still can't see your photo they can't see i think they yeah i think they can i think it's good from react native much better styles export like this and here we say container bottom only uh 10 15. let's do let's try 15 and see how it looks and here let's import it delete it but i think you'll need a view now can't we just add it to the flat list yeah now it looks a bit better yeah before getting into the icons let's just go and uh introduce this post into a flat list that will be scrollable as well so we can see it how it looks better for that let's create those all let's create a different component which will be called feed no folder feed index.js and here import react from react speed support default so here as well we'll have an arraylist with data and we can take the data right now from from the home screen and we can copy it from here because we will not need it here we will render it from our flat list inside the feed and instead of displaying the post here we will display the actual feed like this look how simple is this component um okay we are not returning anything right now but that's good let's add two more posts i will quickly take some different photos and it's really interesting to see what photos he selected i did that like five minutes before getting into the rice so i didn't have a lot of choice so let's import the flat list in the same way as we did for stories displaying them into a flat list and it's from reaction native and here we will return the flat list we'll give data which is our object data for the render item we will display a post here post can actually delete those curly braces around the item really this one yeah but we need to destructure it because we we we get item we get the index and so on import post so will you render uh no because i didn't i have an error here is it like this refreshing okay look at this look at this oh but what happened with the names oh here yeah that's true i didn't even saw that is it because of what let's check the maybe styling wasn't there i don't think it was there before you added this margin no it's not from this one uh story hey what happened to you okay that's really interesting if i i think it uh with uh with a feed it introduced it let's go into the home screen and revert here to the post that we were using yeah what what oh you know what uh we can do a bit differently um including the stories into the feed you because there is a property like uh for the flat list like header component oh but instagram when you scroll the story scrolls with a feed so we need to include the the stories yeah in as a header of the feed so we don't need stories here we will copy it from here and we go to the feed we import it now let's uh i think it will import and here there is uh header why don't have autocomplete uh i think it's header component and there it's i think it's going to be something like a list header component list oh no i'm looking at the style sheet let's list flat at least and here we will find header list header component like this and we pass the stories which we will import like this right now yeah right now we see the stories here and the same thing as instagram does when you scroll the feed the story scrolls with them as well so we see our feed we see our stories probably i will not go into vikans right now and we will let the icons and navigations for the next video because it's almost two hours the stream is going so i don't want to to keep going for for longer so uh we managed to build our uh stories component our story component that is included in this uh flat list which is scrollable we managed to develop the post component built out of three simple components header image body and footer we display them in a nice flat list which you can scroll um i think we i we did a pretty good job i didn't expect to get that far and we didn't have a lot of problems besides setting up besides waiting for um for the up to build and even there like we didn't have any problems yep yeah i think that was really really good and fluent so in the next the next time we're we're gonna probably do all the bottom navigation the top navigation all the icons likes button and and things like that something like that we can call it a day thank you very much everyone for for joining us thanks lucas for helping me i think i wouldn't do it without you with all the alignment and things like that and thank you for having me okay um guys thanks again for watching and see you next saturday at the same time we're gonna pro we're gonna continue developing this application for at least one more uh one more week and then we'll decide based on your feedback what we're gonna do next so bye bye guys have a nice week weekend and as always as always lucas they hydrated yeah right clean code and we are out

Channel: notJust․dev

Views: 63,600

Keywords: coding, programming, live coding, developer, javascript, how to code, speedcoding, developers life, react native, react native clone, instagram in react native, instagram clone react native, typescript, react native tutorial, react native how it works, react native install, react native live coding, ui ux design, front end development, vadim savin, coding challenge, mobile development 2020, instagram clone android, react native layout, instagram ui clone, instagram clone

Id: r7f03VJ8bDE

Length: 119min 56sec (7196 seconds)

Published: Sat Jul 25 2020