LIVE coding: Instagram Clone in React Native from scratch [Part 3]

trying some some new stuff i'm trying to to stream both on twitch and on youtube hopefully everything is working um yep yep yep so guys welcome back uh today today we're gonna uh continue working on our um instagram clone in rack native so let me bring that presentation up so i can give you an intro if you are new here okay so um yeah in this series i am building the instagram clone in react native from scratch um and before [Music] getting into details i'd like to say that i'm building specifically the home page um i'm not gonna go into details into all the pages but if you're interested i might continue this series and go into more specific uh pages however i started with a home feed and in order to start programming iraq native you need to first of all plan and think about like what component you will have uh because in react native and in react gs everything is made up from smaller components uh so if you break down uh your application into small uh reusable components that are easy to maintain uh then it's very easy to work with react native and to maintain your applications it's much easier to to improve it because you know everything where it is located and it's yeah every update is it comes much easier so uh in our application we we can see the first component is the header then we have a stories component that displays user stories and this this big red component which displays all the stories contain smaller components which is one story component so that's like the building blocks from which it um it is made then our feed is composed of post components and we see that the post component is quite big and um we can farther um divide the b component into smaller smaller granular component for example here i divided it into a post header post image and post footer it has the like buttons and stuff like that and the last one is the bottom tab navigator which helps us navigate for different screens in the application so where are we right now uh let's quickly run the application and i'll let you know what we have managed to build during the previous two series if you missed them by the way you can go check them out i think they're pretty interesting not being biased at all okay let's uh i think it build and it runs so what we have managed to build we managed to build uh first of all the stories component which is a scroll horizontally scrollable list uh you can scroll through them you can see all your friends then we have managed to build the feed with the post components included a couple of them here and also we implemented the logic behind liking and we can see that uh number of likes increased and if we dislike it decreases uh also like all the icons are are there and the last thing is the navigation first of all the top header navigation which displays the current page uh the logo instagram and two icons they are not you can't navigate them right now but they're there so the bottom navigation displays all the pages that we have and it actually works i didn't implement the pages but you can see that we can switch around them but i can changes its color and we can also uh yeah see all of them so what i want to do today i want something interesting i want to get into the stories component because i feel that they are more technical and more interesting to build it's not just ui they're there is like some logic behind it like how to navigate them uh there is also like this automatic navigation when you view a story like after 10 seconds uh you will see the next one and so on so i think it's pretty interesting and challenging so yeah stay tuned till the end and hopefully we can build it uh till in in this video uh yeah let's check if everything is running smoothly yeah i hope so uh okay guys uh i think we can get started so let's go ahead just a second yeah let's go ahead and in the screens create a new screen because our like story screen like where we will view the stories will be a separate screen so we can create a new directory here like story screen let's create here the index file of this screen okay let's first of all import react from react then import probably we will just display a text right now and we'll we'll set up everything and we'll come back later to to continue developing the design from react native then the component itself story screen and a narrow function that returns right away a text component story it will be an awesome story not just a story of course i mistyped it and we should not forget to export the component story screen all right now let's go into our router and our storage component will be in our home routes because so our index uh route has all these pages like home discovery create post notification and profile however our stories component will be inside home so for that reason we have this the first screen which is the home screen displaying the feed and we need to declare a new screen with the name story let's structure it better and for the component we should uh import our cr newly created story screen from screens.story screen and pass it down here component story screen okay it's there however we don't have any logic behind um how to navigate and get to that screen and the logic will be whenever we press on uh this quarry component uh which now i understand that it has a bad name and story you shouldn't rename it to user story or user story preview or story preview something like that okay let's name it user story preview just to be sure that oh i didn't um user story preview so in the stories component user stories preview and here yeah we import it properly i think i just have to yeah it works uh properly so let's go to the user story preview into the index and we should make [Music] this story store user story preview component we should make it clickable so whenever the user will click on it uh it will be redirected to the newly created page hi borja i just saw your message maybe you wrote it previously but hello thanks for watching so as i was saying uh we should uh change from just a view into something that can detect user clicks and that is our uh touchables and there are a couple of them uh so from react native we can import touchable and we see various touchable opacity touchable highlight touchable without feedback and always the difference between this component is just um the feedback given to the user when we press it so in the touchable opacity when we press it the opacity of the component decreases in the highlight the component highlights so probably will go to with i don't know like highlight and instead of a view we will say touchable highlight now we don't need this view and what uh it allows us it allows us to send a one click listener but before that let's um define this function of one click and if we have more state more statements in our component we should transform from um yeah like simple braces to curly braces and then other return statement that is some um like shorthand in es6 so uh we'll declare our arrow function like on uh press and here let's first of all console log and see uh user story pressed and we can actually even say like uh who's story uh instead of user will say like name come on and let's add it here come on what happened okay uh on press will be uh this function so right children will expect to receive a single react element i feel that that it just should be updated um come on what are we waiting let's run yarn ios again hey i have some people watching on twitch hello guys welcome and welcome to this stream how did you find uh real children only expects to receive a single react element child okay but um touchable highlight do you think it's a touchable highlight only expects one element i know that uh like a component should return only one element so here we are returning only one i don't understand why is it complaining let's see will this work yeah apparently a touchable highlight expects only one element inside it but i tried with touchable opacity and it wasn't the case okay i don't like that touchable highlight when we press on it [Music] it looks quite strange so i will go with touchable opacity instead and if i'm not mistaken in touchable opacity we don't need so we can include like multiple elements okay yeah and if we open the debug tools but i don't know how to do that on my on ios it's command d yeah yeah it says the debugging if we open here yeah the dim story is pressed um the new story pressed yeah we can see that it works all right the pressing works now uh when we press we need to redirect the user to our newly created page for that we will need an um we will need to access the navigation because the navigation uh gives us this possibility so for that there is a specific hook i use navigation that returns an instance of the navigation uh which we can use to further navigate to other screens it contains the state of the current screen like which screen is active like what screens are behind it and so on so use navigation and we import it from uh import use navigation from react native no react navigation slash native and the add sign and instead of consoling console logging we can do navigation dot navigate to the story screen let's check if it works yeah awesome story we can go back we can see another story and it works however uh during preparation i found a weird bug that like this part is not clickable like whenever i press here nothing happens like pressing here it's okay so it's like i didn't understand why that is happening and i then saw that it's not the problem with uh the stories component because if i scroll down here you see that nothing is clickable nothing is working then i understood that it's a problem with uh the image in the header because the image is too big and it somehow blocks the interaction here so we cannot do any interactions in order to solve that we can go to the components no no to the router home routes and here for the header title image we can set height of around 50 pixels and right now we see that this already is clickable and it's not blocking anything all right we fixed that one as well um yeah let's check what's up with our uh whatson story component let's go there um so the first thing that uh we can see is that we have a header title to this screen which in instagram it's not there so we need to to hide this screen we in order to do that we go into the home route and to our story screen we send the option um object and here header shown shown will be false and we can see that already the header is hidden and our text awesome story is there because we didn't include it into a safe area view but that's probably how uh we expect it to work let me just check one more time in instagram uh some stories no actually um it's inside the safe area in on my phone it's the the story doesn't go all the way up it's until the safe area like until here so we know already how to fix that we go into the screens story screen let's include a safe area view here and put our text into a safe area view component this will make sure that the text is displayed in the area which the user can see is and it's not hidden by anything and also we don't need them you know what hmm yeah now i'm thinking that um in this screen we don't even need the bottom navigation so that actually means that uh our component maybe shouldn't be inside this whole navigation but should be into the root navigator so for that reason i would say that uh we move this tab navigator into a separate file which will be called like bottom tab navigator yeah let's do that right now bottom home navigator dot routes.js we can move everything there let's just rename it bottom tab navigator no tab but home navigator which is top navigator yeah maybe not the best naming there but it's okay okay and in the index um our index will be a stack navigator which will include our bottom tab navigator stack create tech navigator uh root stack this will be the root stack create stack navigator root stack and the first screen roots rootstec dot screen will be our home bottom or we can call it home component will be import bottom home navigator from the file that we just created so will this still work let's why i press command d and it's not always working like i have to from source router dot index dot route like this reload check the method render of router yeah uh not rootstech but through stack dot navigator and i feel that it's not properly indented and this one like this and we messed okay i think here for this navigator we need to hide the home uh name options uh header shown false and it will display the instagram name from our home routes okay so we need to take out the story component from here into the root stack because in that component we don't need to display the header bar and nor the bottom navigation that's why it should be in the root um root stack will be story and if we click right now yeah we see that um we don't see the bottom tab navigator because it's another completely another stack it's in the root okay that's that's probably clear hi adorno hello how are you doing hmm so uh yeah we created a simple navigation to um our stories component now we can start displaying these stories but before doing that i would like to to do some refactoring and define the data for it i don't usually work with hard-coded data and it's sometimes hard for me to structure it well because i always use the data from a server but i don't want to over complicate this project right now so let's uh i don't know let's create a directory data where we will store all the data and here let's create a file called stories.js [Music] and here we will export default an array of stories and we can take them from our user story preview here like this because we will need to share this object from multiple in multiple places and that's why i want to to put it into a different file now let's import it into our user stories preview for for this component we will do import stories stories data from data store one more folder up data yep stories come on stories fine i saw the other two videos very interesting thank you thank you thank you for watching and yeah i hope you enjoy and you find them um educational or at least entertaining if not very educational so here is the stories data we can give it to our flat list and we can see them back here however we will um change a bit the structure of this data into in our file because here the stories will be like uh an object for each user so this is actually the user and it will have an array of stories so i would like to do something like okay we can leave actually this image orion name here however i would prefer to put into into a object like this user and i will copy paste it real quick to everything that's why i don't like to work with hard coded data and then we will put this one here can i do that nope all right a little bit more and yeah we are done um that each user each uh yeah story will contain like a user who published them and also will contain a array of stories and for each story each story will be a object which will have like a image uri and i actually prepared a couple of vertical images so we have it here and what what else will a story have let me just quickly check instagram it has probably like when it was posted so like one hour ago and things like that um yeah i don't see any other thing so for that we will create like a posted [Music] posting posted time let's say like 25 minutes we will keep it a string not to bother with real dates uh if you're interested in that there is like a useful library to use which is called moment moment.js and based on one one date uh because usually in our database you will keep like a timestamp or a date but in a front-end in order to uh display like 20 minutes ago or seven minutes ago or two days ago uh there is useful things in moment you just say like the date and then difference from now and stuff like that and it shows like in a human readable way but i'm not gonna complicate it uh just now okay let's create a new one here another image here and let's do probably one more for this user okay and something for the next user we have one more okay let's uh just give it to this as well but here we can keep only one story not to to have like long data because we will it will be enough for us to test if not we can come back and add more stories stories let's actually delete these two because it's enough for our demonstration purposes so we can see that uh our new format um uh with the new data format our uh displays uh is not displaying properly commanded like govern your word okay sorry because we sent here an array of data which expects an array of like username and um and image uri and name so for that reason let's think how to yeah we will go into our story component which is here and we receive um story object that story object is like this object it has a user and it has a bunch of stories in it so we can destructure from it um user which has image uri and also has a name we destructure it from our story so imagery often defined let's do console log story and see what we receive here imagery and define name undefined uh why just tell me why uh okay because we send them separately here so instead of that let's just say like story will be equal to item so we our new uh props will be called story um props props and here we can first destructure the story and from the story we take the user and from the user we take imagery and name uh story is not defined okay it's here yeah like probably we don't need it now yeah right now we see that it renders properly uh another thing that i want to do is give each user an id which will be probably a string um in order to know which yeah to have a unique identifier for each users so whenever we press on it on our application we can send just an id to to that screen so we know like which story to display four five and six right yeah i think all users have a unique identifier you alright right now right now when we navigate we need to send data to this story because we know that we open a story but we don't know of which user like is it the first user the second user and so on so in order to do that we will pass another object here with the props like user id will be the id from here from the user that we receive from props it will be here so uh here we are sending it let's now go to our story screen and see if we receive this id we receive this id in the route in the route and to do that uh we need to the same way get access to the route as we did for the navigation and we will use the same like a useful hook that will give us a reference to the current route and all its state and information for that we can say like const route is equal to use route we need to import it let's see if it gives not from core but from native spacing here uh i don't like my web webstorm puts like double codes okay route so let's uh go ahead and console log what is our route here so whenever we go here let's go ahead and check what is displayed but before doing that yeah our route has a key which is like story and some identifier has a name story and has an object params in that object we can see that uh there is like a user id tool and that's specifically that um user id that we press like second user if we go to to the fourth one we should see params user id4 i think that's clear so we can take um user id from route dot params dot user id is it used already in yeah user id so we need to take from uh to import the data with all the stories like import stories data from our uh date data dot stories and from these stories we should find uh these specific user stories so we will need to to look through all the stories find the specific one and start displaying it there so we'll do like user stories is equal to stories data dot stories data is an array we do find story data and we will check for each story data if storydata.user.id is equal to the user id from the state and then we can say like console.log user story and let's also console.log a string like user story okay let's open up our development tools go to alex story we can see that uh user is free it's alex and all the stories are here it's only one um yeah yeah it's all right it's only one story there so we now have a data user story now we need to start displaying it so let's think probably we will need to to keep like this like user stories in the in our state in the internal story state of a story screen um let me just think about that for for a second okay let's uh use the state and keep our user stories in the state because we will need to be able to uh transition from one story to another story so it will be much easier to do that yeah if we have them in state so [Music] user stories and set user stories this will be equal to use state and initially it will be null we need to import the u state from react um what else should we do we need to keep track of the index like which specific story is on the screen right now because each user will have like multiple stories um and for that let's probably um active story index and set active story index use state will be probably zero like the first one so in we will also need like uh to do something in the first when the component mounts and in class components there is a life cycle method like uh on componentdid mount in functional components we use hook use effect which is called every time the component mounts if we send an empty array as the dependencies so we also import it from react and here we will move our this logic so we take our user stories and we can set it in state set user stories to use our stories and probably that's it let's do actually one more state like active story because it will be easier i think and will be known everything in initially will be null uh when we set user stories we set the active story index to 1 to 0 to be the first one and we will define a specific use effect and we will set the dependencies to the active story index and whenever active story in the index changes we this hook will be run so we can set here like set active story story without index the user stories uh like this dot stories like user stories dot stories which is again an array add active story index not sure if that's clear enough if that makes sense to anyone but hopefully it does okay we now have an active story object which is has this structure it has like a image and a posted time so first of all let's start by displaying the the image we'll display the image using the background image component we display like a background image background which is similar to the image but it displays like as a background and that's probably what we want to do and the source will be like uri will be active story dot uh image uri will it work let's see country property image uri of null um okay let's see okay let's say if there is no active story which that means that our component didn't load yet let's return in that case um like a safe area with with a loading indicator i think there is such a component here indirect native however i don't remember how it's called loading activity activity indicator i think activity indicator and we want to display it here if there is no active story yet activity indicator like that let's check country property stories of new stories user stories okay let's uh console.log user stories here but probably it didn't find uh well let's check our logs so if we press user stories and user country property stories of null we can so log here okay let's check here if e first of all user stories and user stories dot stories dot length is more than than story index -1 um then set it entry property with of undefined and in that case do we need this check probably we do because in the beginning it's loading image background styles with do we need to send styles to the image background let's quickly search image background here so image background style style image resize mode justify content yeah i think uh we didn't define the styles properly that's why it's crashing so let's define the styles of styles styles.js import style from react native styles stylesheet create and we have our uh image i think we copied it it will be like displayed as flex resize mode cover to cover the whole screen and justify content center so we can go to our index file import the styles i import styles from styles and we send the styles here styles dot image right country property with off undefined with of safe area actually set a weave here with yeah like 100 percent so let's see where oh yeah export default styles okay thank you someone wrote in comments to export it first that was hopefully the solution okay something uh is happening i feel that um the image is just too big and it's it's loading but i might be wrong maybe we don't need the width [Music] let's put a different image first because i'm not sure or let's even put like the user's image because we know it loads so we'll take it from here put it right here and that was for lucas it doesn't do anything maybe i need to for the image background i need to uh include something like i don't know like a text here because it has like width and height 0 probably and that's why it doesn't display let's just go with a text hello please work with 100 height 100 come on uh background color for the win background color red nothing is there maybe this place this one console log active story yeah i didn't think about that maybe even is not displaying it but no i think it should come on where is my active story image uri it should work let's just check if the image is loading here yep should i try it with just an image image and here we definitely don't need anything because of safe hair review a container let's try to set background color here to see if it actually renders it renders there uh hi let's maybe here we need to define the height okay yeah yeah yeah our save area view didn't have any height so that's why it was not displaying properly if we set the height then it works so it will work with image background as well and we don't need the image here and here we can revert to our story okay if we go here we see one story okay we don't need the background red right now it's good with white as well so if we go to different people we see different stories uh what should be our next step i think before displaying like the user and everything on top of the ui we can implement like navigating between stories so whenever i press here it will go to the next story [Music] let's first of all close everything and story screen open this one because we will work here so um we need to detect somehow whenever we press on the right side uh and for that we need to detect like which part of the screen was pressed i didn't do anything like that before probably and did react native detect click position or we can display like two big buttons that will be um transparent get coordinate of my touch event on press event vs i think there is like we can easily get the location using the touchable opacity okay let's try that so let's rub our image background or our touchable opacity okay let's import touchable i will use touchable without feedback because we don't need any feedback like no opacity nothing but we still need to be able to detect the clicks so touchable without feedback touchable without feedback on press we will call we'll define function handle um story press or handle just press because we know that we are here and we send it here handle press we will receive here an event as we saw here and the event let's try to just console.log the event and see console.log event dot native event and see what it displays there react children only expect to receive a single react element child uh who probably touchable without opacity it needs one element what do we send there do we send the image background come on come on come on here and now let's check where we press okay location x and location y and we see like the location where we have pressed based on this location we can understand if it was on the right side of a screen on or on the left side of the screen and do the proper navigation let's go here so we saw there was a location location x let's save it into a variable uh then we will need the dimensions of uh the screen to understand if it's right or left dimensions right and const screen with will be dimensions dot get window with so we can check uh const is right equal to true in the beginning we will uh initialize this right to true and if uh x is less than screen width divided by two which mean which means if it's on the left side we say that is right equal to false and let's yeah we need from cons to let so console let's log [Music] is right and we will see if uh it actually detects properly so here should be true here should be false yeah true false based on that we will call the specific function we'll have like two more functions const handle next story and handle previous story here we don't even need like this is right or is uh not right we can say like here handle uh previous story because it's less this is left else handle next story handle next story all right handle next story here we need to uh increment the story index so we'll save set active story index active story index to active story index plus one i um recently installed like um autocomplete uh ai uh plugin which is called kodota so you saw that it autocompleted like set active story to active story plus one like let's see set active it doesn't work yeah like here it auto completes with minus one how does it understand that okay to understand like previous it should be minus -1 and in that case it autocompleted with plus one so this effect will be called every time active story index is changed and we should uh probably check here um if active story index is less than zero we can uh set active story index to zero not to go set active story index to zero yep not to go below zero and crash our application and if active story index is more than user stories dot length more than user stories dot length more or equal so we will not go overboard like more than how many stories the user has that means that set active story index to to the last one like length minus one all right i guess and here we don't need to check because or we need to check actually return let's return not to go warfare we don't need to check this one we can say if user stories so let's go to the first one stories of null if active stories then we will return okay something is happening i don't understand if it's properly working sometimes it works sometimes no um let's console log here console log active story index so here active story 1 but it doesn't update where story two three and two oh god i have some problems with that logic minus one zero minus one zero now it's okay it goes minus one and then comes back and now one but it doesn't update um why you're not updating bro come on come on set active story user story stories active story index and it doesn't update or maybe it does very weird let's try to no cancel reload it what problem each child in the list should have a unique property uh which one virtually flat list stories our stories doesn't have a a key let's go and fix that one because it bothers me uh user stories preview key extractor will be nope will be a user and then here id and we can return id here will you complain now how low now it's okay and if we go to the active story index 0 when we press it's 1 but it doesn't [Music] update it's one but it doesn't update but we say let's check console log setting the active user story so pressing now it's cold why console log re-rendering it's a state whenever a state changes it should re-render our screen but it doesn't why we press nothing happens come on oh maybe it's i think i know i think i might know our active story is an object and whenever we change it whenever we change it react doesn't understand changes uh like deep nested changes in objects sometimes hmm it will understand only let's only work with active story index because we can okay here in this effect we will just make sure that the index is in the bounds actually we will need that first if statement then const active story will be equal to uh user stories dot stories at active story index and here no if there is no user stories no actually we can you know what it's gonna be much simpler if we move this on top and if we check not active story if you if it's not there are no user stories we will show this um yeah activity indicator otherwise we don't need to check it here because it's gonna be here so we're running let's hope it actually works so it always show the activity indicator let's rerun that come on i don't understand why command r is not working from time to time yarn ios okay first one we click it changes we click it changes we click one more time cannot read property image of undefined [Music] um okay probably we will need to um to keep track to make sure we don't go over it inside here handle next story so if active story index is more than equal to minus one let me think it's it's a bit off we say return we don't do anything if it's more or equal all right but if it's if less than or equal to zero we don't need to decrease it because it's the last one i mean the first one we don't need to do anything and here as well because we handle the bounds inside this handle stories all right let's go press press press nothing happens press back press back press back nothing happens all right that's that's good enough i mean that's pretty good um okay however we know that on instagram if it's the last story it will go to the next user stories which means that here instead of returning we should say like [Music] go navigate next user navigate to next user we it will be a function and then we can return and here navigate to previous user um so let's implement these two functions uh we know the user id here yeah yeah we know the user id actually we can take it out of the effect we know the user id and we should actually it's easy because in our case uh user id users id are incremental so we can say that we'll actually need the use navigation hook to get the navigation so we can navigate i use navigation we import it from the same library use navigation and using navigation we navigate to story and for the user id we give a user id plus one actually i'm not sure how it will work and it's gonna be to string and here -1 to previous user and let's check how it works so we go to our stories use navigation is undefined i imported it wrong eduardo thank you i have to leave i will watch the recorded version and thumb it up bye goodbye thanks for sticking around and watching it um yeah see you next saturday at the same time have a nice evening but with other guys we are going um with the next implementation so let's check if it works uh press press this is still mine and the next one doesn't do anything it doesn't do anything navigate push let's try and if it works i will explain you why it works hello come on come on come on one two and three should be the next one and it's loading because maybe maybe i know why um console.log let's check what yeah i think it just appended one to the existing string and it's gonna be like zero one or one one something like that and that's why it doesn't find and it's loading um we can open our yeah it's one one actually uh okay parse int user id let's go back so click click click yeah it's i remember this is the story of a next user so it navigated perfectly to the next user and here we can say the same like parse int yeah why push now let's actually go to navigate because we don't want to push a new stack on top of the same stack we need just to change the parameters because our story is already in the state of the navigation and let me just check if it will work okay one two three should be the next one now without push actually doesn't work because the navigate will check if that screen is already in the state so if we already navigated to that it goes back to it however push creates a new navigation even by the same screen it pushes on top with the new parameters so in this specific case we will need push push push me yep it goes to the next one next one and so on what should we do now should we display the user it's a lot of things here we can go back and refactor it a bit later so we can actually display the profile picture and just start displaying the the things on top so profile picture did we import it uri and size u ri is active story dot user dot image uri property image of undefined active story let's check it here on the console log active story so here uh active story no no no no no no no not active story because active story is the story itself but our user effective story is like this object itself but we need to access the top object like user stories so it's going to be like user stories dot user dot image uri like this yeah we see it here we will style a bit later uh let's just put all the information that we have so there will be uh the name which will be a text component and for the name we can say user stories dot user dot name text strings not text like this capital text we go here yeah we see the name there so what's next there after that there is uh another view underneath which will be like the the input where you send a message to the creator not from reanimated from here view and this one will also be a view we will define some styles for its styles dot user info [Music] and for the user info it will be uh we need to display them side by side so flex direction will be roll yes and center items no align items line items will be center yes for them yeah here is the name style will be styles dot user name the color will be white the font weight will be bold the font size a bit bigger 14. not string just 14 uh 16. actually the image is too big so for the profile picture will sound like size of 50. yeah i think that's much better and the name is let's give not ball but 600 what will be 800 yeah yeah 500 no 6 is okay can decide 500 right and the font 18. the thing is that it's a different font we have a different font but it's pretty pretty okay now uh image justify content uh space around no space between we need it on top uh user info will have some margin top like 10 that's pretty good i still think 600 is okay we have a username and on the bottom we will have probably we have a button a input and an icon so let's define like icon we can take that i can it's a camera icon so we can take it from the router actually let's take it from home routes where we have like this camera icon did it imported it correctly okay it's there the color should be white and we'll play around with the size of it then it's going to be an input component input text input text input is it visible there i don't under i don't see it let's create the next icon which we can take from again from top from the router which is paper plane outline this one and then we can figure out with the text input okay it's here which means that style not user info but bottom container again we want to to display them side by side for that we need flex direction roll text strings must be rendered okay let's check the documentation of the text input text input text input max length editable so what are we not giving it what properties we are missing there because our text input does not display um like a wave something like that i don't know let's add it inside the view style will be a text input and we can give it um some kind of a width to see if that's the reason it doesn't display will be let's say like 300. yeah we can see there so for the text input let's uh add a border width of one border color of white probably it will be two and some border right just to make them um of 50 for example to make them round yeah and the height height will be i don't know it's pretty high like i don't know 70 no 50. something like that to be honest text input container because we will probably need to adjust the style of the input itself text input container so what we need to we need to properly adjust the width to say that the first and the last one will have a standard width and the input itself in the middle will adjust based on the screen size so let's do that view add them into a view style camera on camera button it's not yet a button but probably in future it will be and this icon will be the message or send button so for the camera button we will say that the is 50 or the message button again the width is 50. the width is 50 and here the wave shouldn't be 300 it should be like 100 percent of the size it has no how to say it should take the whole space yeah flex one and [Music] center right align items center and justify content again here center to align the vicon in the middle like that the same thing for this one maybe we can share the same styles um [Music] so we have the bottom container we will need some spacing underneath so margin margin bottom will be 10 maybe even more like 20 something like that i also want to increase the size of um of icons 30 maybe even 40 no 35 and here 35 let me check my instagram and see how it looks yeah probably the text input will need some text input container will need some margins on the left and the right um margin or horizontal like then yeah more spacing like that and another thing that i see in instagram is that the camera the camera icon has an outline around it so for the camera button we can do something similar to this one camera button border radius and we see that the icon size is too big like 30 yeah probably it's already better let me check yeah something like that uh the text input will have like a placeholder what does it say here send message send me page and placeholder should be white for that probably we will need to send some styles there text input style placeholder style does it have something like that i don't see if place folder placeholder text color okay let's split it into multiple lines to be easier to read and it will be white however it's too small there style let's try to set text input thank you rakovitz alexey for subscribing uh height will be 100 percent yep um let's add some horizontal margin margin horizontal or no it's better to adhere to the container some padding adding horizontal yeah like that and let's see how to change also the color of the text color border underline keyboard placeholder text color in the text box that is a color the background will change to that okay red yeah that one i understand should it be just from the styles uh text input color white yeah it's from here and on size let's do a 14 at least something 16. yeah that looks good here we see the stories of different people we see for example my story we can navigate through it the different stories when we go to the next user stories uh i would add some spacing here uh text input container um no bottom container margin bottle let's add margin horizontal will be 10. yeah already better i would decrease the camera button the border width here to one like this and let me check how it is for them and also for the send message as well it's it's probably a one there where is it border with one like this yep oh and what what i missed i missed to display the near the name we need to display the date on which the story was posted i mean the time so near the username we need to display here a new text with active story uh and the active story has where is the data has this posted time posted time and for the styles i need to copy paste the styles for the username and uh instead of a white it will be a lighter gray like let's first declare a color and using the color picker here put it to a light gray probably no font weight and the size will be like 14 and margin left will be 10. actually for the font size we can leave as it was let me check there how we're doing and also they are doing the same font wait for the name and yeah something similar to this one maybe the above the name and this one is a bit smaller even like this so we have our stories component working we can navigate through them we can see other people's stories we can go back we can go directly to someone's stories for example to the news stories if we go back we can go to alex story we can uh yeah navigate start writing a message yeah right now it doesn't work but maybe in future we will implement so it will be workable uh yeah we have all the designs the only thing that uh it's left will be to work on the automatic navigation through the stories so um how instagram is doing like it displays the stories for for example uh 15 seconds and we see it loading here and after 15 seconds it automatically navigates to the next one and so on so i think that's what we're gonna do the next week because uh it's already two hours today and i'm a bit tired um yeah that's it for today guys thanks a lot for watching if you enjoyed this video please consider subscribing to the channel write down below what you enjoy and what would you be interested in seeing in the next streams because i'm thinking uh whether i should go deeper into the instagram clone where you're more interested in something new so for example in each stream i take an application i do the ui design or maybe even the back end if you're interested um and like in each video we do something new and something interesting something excited or you would like to do something more in-depth like to to have a series with more videos where i develop more and more features of the same application until we get to to something bigger with in size and in scope so yeah that's what i'm thinking right now and i would need your help to decide on that so yeah

Channel: notJust․dev

Views: 10,178

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: NkwMT3O4NE0

Length: 121min 0sec (7260 seconds)

Published: Sun Aug 09 2020