Build a Twitter Clone in React Native for Beginners 🔴 Live 🔴

um let's just yep yeah hello everyone guys welcome back to the stream sorry for interrupted and for technical difficulties um but i hope that the quality now is much better and yeah one second oh what did they do so yeah welcome my name is vadim i'm from noja's development and today i'm joined by lucas hi lucas hello guys um i think your camera is not moving technical problems yeah i see yeah to and we started uh this stream right now and the quality was bad and i had to change some settings so i will go through the introduction one more time and uh real quickly so you can understand what we're gonna do today so yeah today we're gonna create a twitter clone in drag native from scratch um and what technologies we're gonna use so for the front end we're gonna use react native uh with expo and if you don't know about expo expo is um some tools on top of react native that makes it much easier to write through to get started with react native and to create a new project and if you have a expo project after that if you need a bayer react native you can easily eject from expo uh that's why i recom i highly reco recommend everyone to start with expo their projects and whenever they need the native code of react native then they can switch to react native we're gonna use typescript today which is javascript with types probably everyone knows uh for the back end we're gonna use aws amplify uh with cognito for authentication and for users uh and also aws up sync with graphql for our api which will be a graphql api yeah so i highly recommend guys you follow along and try to to build it with us because we're gonna start from scratch we're gonna show you where you can find information if you're stuck uh we're gonna show you all the steps like what you need to install what you need to everything like from from beginning to end and that's a great opportunity for you to ex experiment and gain more experience with react native uh and also to add a new project to your portfolio because uh that's gonna help you get a new job or whatever plans you have in future so let me just check why lucas screen is stuck yep yeah right now is better oh okay i don't have to close it i understood my problem so one second and we are starting okay here we are so let's see what's the plan for today's live stream and here is the plan summary we're gonna start with setting up the project in expo then we're gonna set up the bottom navigation that you see here on the screen with red here we'll have different tabs for home for search page notification and messages uh then we're gonna set up the home header with a profile image with a twitter logo and another icon here um yeah in if you have experience with react or react native you already know that uh in react we split everything into components into smaller components that are used in the application uh so that's why whenever we start a new project we think about everything in components and that will help us understand like what we will need to develop um yeah during during the the project uh yeah so what components here we can see we can definitely see a tweet component which will display a single tweet from a user it will display the user profile picture name handle time content and the footer with all the buttons like for likes retweets and comments and so on using this tweet component we're gonna create a bigger component which will be called feed component uh and it will display a list of multiple uh tweet multiple tweets okay after that we're gonna good subscriber what new subscriber yeah thank you gabrielle thanks a lot uh so after that we're gonna create a new post uh using uh first of all we'll create this floating button that will display on top of the feed and whenever we press it we will open a new page for writing a new post okay let's get started and the first thing is setting up a project we already did that let me just remind where you can find everything you go to expo dot io and you press on uh get started and here you see uh all the steps that you need to take first of all you'll need to install expo cli globally uh to have access to the yeah to back suppose s cli then you're gonna write expo you need and the name of a project after that it will ask you to choose one template and we chose the template with tabs in typescript so let's have a look at what it generated here is the project it this is the bare minimum project that expo cli generated for us and it's a good getting started for us because everything is set up the structure is set up and we just have to start developing our screens and components so yeah let's run yarn start so to start the development server and this will um yep start a web page from where we can run and see the logs of our app run it on a device on emulator and so on for us let's try to run it on ios simulator it will try to open a simulator and take some time actually it was yeah it's already starting yeah so let me put it was a long time ago that i used expo actually uh i think almost a year and a half yeah we used it in um one client project and it was actually a success because it's it's so much easier you don't have to actually test it on android and ios because most of the things will look the same yeah that's also true for rack native but there are some things that are more specific to each platform and for every project that doesn't require a lot of uh native code for example i don't know like access to camera like or some some complicated stuff like that i suggest using expo yeah so yeah let's our javascript is already building uh someone is asking how lost will i be watching this with only knowing basic javascript and no react it's definitely going to be interesting for you uh you're not gonna be lost in my opinion because we'll gonna try to explain everything uh for beginners for you to understand for everyone to understand um yeah there are definitely some concept that we don't have time to uh to explain in depth uh because we are limited by time uh but you can easily follow along with um with what we are doing and um you can even try it yourself i think this this is the best way to learn a new framework a new programming language a new technology and that's how i learned everything because you start with these tutorials and you get bored like you don't see anything like that you can build right away so i think i i always we're like we're starting like doing some projects some pet projects with bad technology and that's how i always learn a new thing so yeah try to follow along after this stream uh and create it yourself and i i'm pretty sure that you'll grasp the idea of react and react native yeah yeah i totally agree so yeah here the application is already running we can see that it has two tabs tab one with a header and tab two uh yep it's running on our simulator it you can also run it on your device by just downloading the expo application and then scanning with it this qr code and i can also make it so you can run it on your device but maybe a bit later when we will have something here so uh what is our next steps because if we go here we set up the project the next step is the bottom navigation and specifically the top navigator here so the top navigator has four tabs uh in twitter home search um notifications and messages and that's what we're gonna do uh however one thing uh that i want to do before getting into that uh is changing this accent color because it kind of looks like twitter's accent color but it's not exactly it so i'm perfect perfectionist yeah i can't speak so let's go to the constants colors and for the tint color um yeah for this one tint color i'm gonna write have it here for d nine f e see your homework yeah i did my homework yeah this one so if you refresh uh it changed this is the twitter's color maybe you don't see any differences but for my ocd so let's go to our navigation folder and here we see bottom tab navigation navigator we open this file and um yeah um here we see our bottom tab navigator which has two screens tab one and tab two and each separate screen is defined lower here with which is another stack which contains one screen so basically uh this is a best practice to have uh the tabs to contain a stack navigator into in them because that's that's how we have this title inside the tab navigator this is the title as you see here so what do we have to do yeah first of all let's say not tab1 but home because that's the whole screen component let's leave it tab one navigator um at the moment then we can adjust it for the tab icon uh i already have the names of icons that we will need but for you if if you need to find a new icon you can go to let me show you where you can go so it's called vector icons directory and the first page here and on this page you can find all the vector icons the the name of their type and the name of their like icon it will load shortly and there are a lot of icons for probably every need unless you need like some very specific icons but for most of the time like you will find here i can so yeah here you can see all all the icons there are hundreds or thousands yeah we're not gonna spend time finding them because i already did so for the home it's called md oh uh let's save and we can see that the home um icon is already displayed um okay we can see in uh twitter design that there is no label underneath the icon so how can we accomplish that uh is using a option in the options object or this tab navigator and it's called show display label shown yeah no show label yeah show label and we say false if we save we see that there is no label already here the next thing that we see is a red red thing here and it says that there is no type uh home for the top navigator and we define these types for the navigator in types bottom tab program list yeah here we see tab one tab two and we'll we're gonna change it to home search um notifications and messages now this yeah this arrow disappeared because there is already such a type and we can say that the initial route of this navigator will be oh okay the second one is search for the component we can leave tab to navigator we will change it later and for the icon name it's going to be ios search then let's add two more uh tabs one is gonna be notifications and another one messages for notification icon it's going to be ios notifications outline and for the messages it's going to be ios email fail probe type name of vali ios email not email but mail yeah now it's better so here are all the tabs uh for for all the pages of twitter i think we are pretty close to what they have here yeah vikings are not exactly the same but you get the idea so that's it that's how you set up the top navigator with different icons the same way as twitter does very clean and easy yep okay so let's have a look we completed the tab navigator the next step is the home header the header of a page that will display them the current user profile picture the twitter logo and the via this icon so let's go ahead and start implementing implementing this uh it's gonna be also in this bottom tab navigator and if we go at the top one navigator let's rename it to home navigator because we rename them the name of the screen home screen and then let's yeah do some changes here we need to rename the the navigator here because we change the name and say home navigator what else is tab1 screen okay the same thing in types tab one param list that's going to be home navigator around list and it's going to have a home screen that's not very important to define because it will still work but that's uh that's good to define these types in order for typescript to be able to to check the types and save if there are any m errors so there is one more yeah here will be all navigator all this one and we need to send this type to the createstack navigator and it will know like what screens it can contain let's try to save and go to home and now we see that the header is home but we changed here okay what's the first thing that we need to do is let's try to add that twitter icon in the middle so for that in this tab screen we can send different options uh to customize the tab the header so the option that we need is editor title um it's just header title yeah i just had their title but i don't know why it doesn't um autocomplete for me adder title yeah like this and it's a function that will return um a component in in our case this component will be icon we [Music] that also from vector icons and it we're gonna import it from um yeah the same thing as we did for the bottom uh icons we're gonna use the ionic ones and the name of icon is uh i think it's logo twitter yeah i think we we need to delete this one because yeah header title is here it displays well uh the only thing is that we need to send yeah the color of it uh to send the color to the icon we send a property name color and we're gonna use color from our constants file which will be color colors light and tint color and yep it's already blue um yeah that's that's it for the header title the next thing is the right icon uh and we do it as well sending an option which is header uh right header right just the right yeah yeah it's as well uh arrow function that returns um an icon the icon i found it from someone commented but i don't know where not on the stream yeah so this icon i found from material community icons so if you find it in another group we need to import it from a different um to do a different import and from material community icons this one and let's use it the name is gonna be uh four star no four star i'm really interested what that icon does in real twitter where it go let's guess probably some kind of discovery page uh size 30 colors as well colors.light.tint and that's it let's save yeah we see it here however it displays too close to the to the margin and in order to adjust that we're gonna send uh i think it's header uh yeah left container style but we need header right container style you can find all these options on the in the documentation of um of react navigation on their website uh and here we need margin right um i don't know 15. yeah it's already uh displayed well maybe maybe more yeah i think even less maybe no i thought like 10 but now maybe they have a lot there okay let's go with a lot of different all right so uh yeah give me just one second um i'm gonna do something interesting let's see i want to paste in the url of this stream to the previous one because we had some technical problems and uh let me see yeah and also austin if you're still watching i see you said i appreciate your responses so you can always ask questions if you have at least on the live stream also you can comment on the video and i'm pretty sure the team will reply very fast to your questions what as well so yeah definitely if you are stuck um write in the comments and i'll try to to help you guys so that's like a free online teacher you should take the opportunity think of opportunity until um as long as we are small because now it's time to we're gonna help everyone we're gonna manage to help everyone yeah so yeah that's done um [Music] what's the next step the next step would be to display the user uh profile pictures here uh and for that i'm gonna create a new component because why lucas because it's gonna be reused in a lot of places in a lot of places yeah and on this page we already see that it's going to be used like in two places so whenever we have this we don't re uh copy paste code we create components and we reuse them so for components uh i prefer to have a separate directory for each component let's call it profile profile picture here we will create an index file let's import react from react as usual um we're gonna have prob types using typescript uh [Music] profile picture props and uh what props we will have for the profile pictures so first of all uh we're gonna have the image uri itself image which will be a string and we're gonna have uh size because we we we saw that the size of uh profile picture is different where we are using it and the size will be optional because we we can have like a default value for it and it's going to be a number um so let's declare our uh component lucas is this prop validation different from uh from javascript because in our project we're using vanilla javascript yeah this one is i think quite a bit better i think it's uh easier probably it's less code yeah definitely less code than pro pro using prop types and here we say that we will take the image and size and here we will default the size to let's say 50 now but we'll see later what we need and we say that the type of props is profile picture props [Music] we are returning a image come on and we should import this image from react native and for the image we need to send the source with a uri if it's a not a local image and we're going to send image we will also send um a style component we're going to do it in line because it's quite a small component so for the weave we're going to gonna use size for the height we're gonna use size and for the border radius to make it uh round we're gonna use size as well so let's do some yep be more readable um the last one closing tag should be from a new line as well yeah yeah yeah yeah like that and the last thing we need to do is to explore profile picture export default now in our bottom top navigator first of all let's import it we're gonna import it here import profile picture from components no components profile picture and we're going to use it in our header left component for our home header uh yeah profile picture and we need to send here a image um let's take some image that we used for instagram clone uh let's see if we have anything here it is which one do you want your picture let's do yours nah so um what does it complain because here we need yeah these braces not curly braces saving and nothing happens nothing happens we need to pass our sizes is different size is def has a default value but let's try 100 doesn't work doesn't work did you call that image there as well the prop yeah yeah let's try a different image maybe this one is not loading and yeah yeah this one loads uh i don't know why that one is not loading oh maybe yeah but i was just copying from facebook and maybe that link already expired you know [Music] so yeah let's go with um with this image now and then we can later change it okay um we have our profile picture it looks i think good with the size 50 or maybe we need to think it should be a bit lower no yeah i think size um i don't know 45 40. yeah 40 i think it's good yeah and we need to add as well here uh to the left some uh margin and we're gonna do it the same way uh as previously header left container style margin left 10 pixels let's save and yeah it displays uh perfectly so let's have a look here i think it's pretty good or maybe more space i think on the bottom yeah it needs probably more space on the left as well let's go with 15 and 15. yeah that one actually is better okay that's good we set up our home header and we can move forward the next one is our tweet component yeah here we're getting into more interesting stuff uh so as i told you previously uh in react everything is components uh which are built of smaller components so now we're gonna build the tweet component which is this red box but in order to split up the code and to make it more manageable we're going to split it into multiple smaller components so the green one on the left is going to be like the left um yeah like the left container and here is the main container the green one and the left container has like three lines the first one contains the name with the handle then the content and after that the the footer with all the buttons uh so yeah let's let's get started with them and we'll see how it works uh but before that let's quickly uh invest screens rename it from tab one screen to home screen yep home screen and let's open it and see yeah let's go to a bottom tab navigator because i think it didn't import well so here uh home screen from screens invest home screen file yeah now it works that's better so for the components let's create a new folder uh for the tweet component here is a new directory and we're gonna call it tweet um and the tweet will have an index file where we will import again like react from react we're gonna have export [Music] type tweet props we're gonna define the props a bit later and here let's define the component const with export default to it so what we're gonna have here in the tweet um or probably a view so that's basically a default template for all of the screens components and etc yeah basically import react then create a const of like say your name you name the tweet and then export it also tweet props yeah that's the boiler plate and that's the minimum that we need uh and here let's uh add some comments uh so the first thing that we will have here is gonna be the uh left um like like left bar or left how is it called lucas give it a name uh for for naming and another one which will be the main container and where are we getting this uh we will create them here we will create them in the tweet file uh component as sub components so left container then another directory for the main container and here index file let's copy the default from here change only them left container so the left container will contain only the profile picture profile ima picture and we will come back and um and work on it a bit later let's also copy paste the index file into the main container which you could probably do to structure it even more in tweet have like components directory which will hold left container yeah we could do that as well but until it's there are not a lot of nasty uh components i think it's good this way so here will be the main container main container same as here main container so what our main container will have which will be this um yeah this green box it will have three lines the first one the username let's say like username or header then the content and then the the tweet footer something like that okay and now in the index of our tweet we can already uncomment this [Music] yeah this the components components yeah yeah and let's import them from import left container from left container and main container from main container perfect perfect almost perfect [Music] before starting working on that let's go into our home screen now let's um delete everything from here and let's include them that with component import to it from components add to it and we can import it here probably you can clean up those styles a bit as well yeah maybe maybe like this okay nothing is rendered but in the tweet index we can let's no let's do it in the i don't know main container let's display some text here so we can be sure that everything is working hello world and find variable text because we didn't import we imported from react native yeah it's here hello world i'm not sure if the [Music] the styles from home screen will um it will not mess up our thing but we'll see we'll see to display the in the middle our uh tweet container so probably we you can delete the line items center and justify content uh but yeah and then we can define our styles later as we need them we'll see we'll see if that's going to be a problem to be honest i need some water because my fault is hurting so let's start um yeah let's now start probably defining the data for this tweet that is gonna be uh displayed so where can we define this data let's uh create a separate directory for this because right now we will hard code all the data uh but later on we will receive this data from from the backend so from the data let's see [Music] uh folder with dot es and here we're gonna have like a const with which will be an array of tweets export default tweets so here is the data for one tweet let's think what the tweet will have it will definitely have an id which will be a string usually uh by this or string in the amplify [Music] someone is asking no css module no we are going with plain like style sheets from react native i think it's uh faster for for this purpose uh yeah yeah it will have yeah a user for that let's just look here so what it will have a user which the user has profile picture name uh the handle which is like a username and yeah probably that's it so for that we'll define a nested object user it will also have like an id let's do like u1 and here tweet one um it will have username which will be [Music] this one follow follow it on twitter don't forget uh it will have a name and it will have a profile pic a image right yeah and for the image let's i don't know quickly take it from somewhere because i lost that link of the image come on let's see if it will work with this one okay that's it for our user then the tweet what else it will have it will have um um let's go here and see it will have a posted date like when it was posted yeah it will have a content uh and all the data for the footer so for that it will have like a created created ad which will be a timestamp in uh eso format so it's 20 the year 2020 month 0 8 what it is today 27 uh t for the time i don't know let's say 12 uh zero zero zero zero dot zero zero zero four milliseconds and z advance the content which will be lorem ipsum for now image image is optional but yeah let's go with some image that we had for our instagram clone what else it will have it will have number of comments right probably i don't know do they decide [Music] comments yeah they do it will have yeah i forgot that semicolon here number of retweets uh and number probably like likes yep and i think that's it what it has okay this is about data we'll probably not need it right now let's go to our home and here we need to import the data import with from data tweets and for the tweet [Music] is gonna be the tweets at position zero so the first width from that array now let's go to our tweet here tweet in the components with index on from the props we receive that weight let's define the type of it with is gonna be a tweet type so for that we need to declare another type here so but it will have id string user free and again add string will have content string image string command number number of comments and number and it's probably gonna be optional because we can default it to zero the image as well is gonna be optional the number of retweets optional number and what else number of likes number of likes this is gonna be number uh that's it yeah but you know what i'm gonna take this one because it's not related to this component it's related to a general tweet type and i'm gonna put it into the types here so export typed with type because i also want to export type user type and this user will have as well id which will be a string name string um username yep username and also image ring the image might be optional yeah and because in the tweet type we need to say that it's posted by a user so user user type type okay now in our tweet index we need to import this type import from [Music] types tweet type like this okay a lot of uh like boilerplate but um yeah that's it for the beginning like um now it validates and it's it sees that the types is are correct because i'm not sure if it will work right now but let's go into our data and save it for example the tweet doesn't have an id and if we go here we see that typescript already defines that property id is missing on the type so that's um yeah that's a safer way to code because in javascript you don't have this this error messages okay so we give it the tweet in the tweet index for the left container um you only need a user value actually only an image yeah but let's send the user to be sure like maybe we need by diver or something like that um tweet.user so for the left container we go to components tweet left container let's close others we go to the left container index and we say that the props will be user which will be a type of user type imported from the types file user type from types right user type we can destructure it right away here user and we can but no it's okay only user trailing comma after user type and let's import the profile picture component that we created earlier to display it in the left component profile picture from uh one second yeah profile picture from here yeah let's uncomment it here and it says that it needs a image a image prop we will give it a image from user dot image like this uh string undefined is not okay it says that profile picture um if we go to profile picture we see that the image is mandatory uh let's create it here optional as well and we'll decide what to do if we don't receive any images okay we see that it displays the image and now what's next lucas i think in the left component that's everything we need right yeah yeah uh i would suggest to go into uh the right component and display all the data without any styles and see that it displays and after that we can go and style and position everything where it's supposed to be definitely agree so let's go our left left uh oh i think it needs to be bigger uh profile pictures let's give it a size of 75. maybe yeah that's around that yeah well you can always increase it later yep so left container is ready we we can come back and style it if we need later profile pictures we don't need it so in the main container um let's send the tweet as well as we receive it because we will need both user and all the data for the tweet in our main component so let's just tweet now let's go into our main container index and here we say that we will receive a tweet which is a tweet type yeah we see that it automatically imported but we typed from the types file and let's destructure it here right away tweet yeah this autocomplete sometimes mess it up okay in our tweet component the first thing is to display the name handle that's what we are going to display but this is as we see another view we can split it into a different container but let's try let's start it in the same co component as a separate view and we will style it a bit later and it will contain a text for the tweet dot user dot name another text for tweet tweet.user.username why it autocompletes this way and another text for the tweet dot um the time the time um it's posted that but we will need um i think it's you named it differently created ad here but we will need some processing in order to display it properly right now it's okay we are just displaying it um okay the next thing is we display the content in a separate view view tweet dot content with all the text that the tweet contains inside it we display the image if it exists this tweet doesn't have an image but here we go image source and we need to send uri to it dot image but because uh the image because the image is um is optional let's do a conditional display of it saying that if the tweet image is not null basically if it exists then display it we didn't import the image here yeah so this basically means like if tweet.image is true a true truthful value then display this image if not like go farther yeah then the bottom thing will be our footer but we we we can go come back and display the footer a bit later i think it's time what i thought you'll leave hello world still yeah until then so let's start to arrange them a bit with styles yep yeah the first thing that i want to go is to the tweet component here and make them the left container and main container display side by side because right now they're displayed one on top of each other so lucas how can we accomplish that with flex direction instead yeah first of all create styles then const style sequel to tile create and we need to import it right um react native style come on help me auto complete help me what did i like this yeah style worksheet great and here we're gonna have uh styles for the container and what we need to do flex direction yeah no it's yeah it's with capital like direction row row because yeah that's how you right now they're displayed in column the default value is column yeah and we need to change flex direction to roll will we need anything else we'll see well we'll see index let's import tiles from dot styles not the css did you exported them i didn't know no i didn't that's why we do pair programming styles and then else i would stay like half an hour like why the styles are not applied so for review we say styles equal to styles.container we save and we see that we added an extra all right voila they're displayed correctly now the only thing is that we need to display them full width i think we just need to say flex one no right now it's like that because you have in the main feed uh justify content center so it will always keep the whole text like centered but we need to sell to the tweet container the way for 100 percent nonetheless yeah yeah it should be like the full width of the screen right yeah but it will like it would either way be like that if you said delete the justify content from there uh yeah so for example if we need to display vikon on the right we need it to be like full width like the container yeah yeah yeah so yeah um what else we need to add some paddings margins for a tweet yeah that would be good yeah let's add some uh margins uh 10 is going to be enough so too little why didn't work oh okay we're gonna add padding because our wife is 100 percent uh 10 is enough 15 yeah maybe 15 yeah at least maybe even 20. but i think it's good i think it's good okay so um anything else that twitter has that i don't have in this screen let me just check uh for the twitter component um i think it has like um the separation between tweets it has like a line so we can accomplish that using um borders and let's let's try to add the border bottom uh one pixel solid will it work no it should be uh yeah just delete both them yeah and don't make it solid just one yeah and the border color will be like a gray maybe you can make it 0.5 the width can you do very yeah really oh yeah right now it's better oh it's still okay 0.5 yeah i think that's better i didn't know about that i thought that you need to provide like whole numbers that's good you live will learn now that has like a border on the bottom and it will um have a separation between like two tweets so that's it with the styles of the tweet component probably for now let me see well we probably will still have to come back here but uh maybe here we need to to to make some space between the left container and main container or or better to add padding in the main container i think that here it would be better because then you can style it for example profile picture if you add it there the margins then it's not that reusable let's say i think it would make more sense to style it but no no no not in profile pictures like in left container maybe but yeah let's um now first of all let's go to our main container index and here let's create our styles file files dot yes again import style from react native uh const styles equal to stylesheet create export default styles so we're gonna need um styles for uh for this view for this blue one on top that displays the name handle and yeah but the date and also why can i forget about vikon we'll add it a bit later so um with header uh container let's call it like this and the first thing that we need to do is to display it um in as well in raw so yeah flex direction uh the default is column but we need raw oh with oh uh not raw uh and in the main container index let's import the styles import tiles from files no css uh actually now that i think yeah it makes more sense to probably add styles here and those margins yeah we'll see we'll see so and for this view that contains the you the name user uncreated created at we will send styles dot with adder container now we're displayed in line uh for created that i will display here um at some text because we're gonna come back and install and use moment so let's say i don't know how does it say like 15 s like 15 seconds like this um yeah right now we're gonna need um styles for all the text so styles so yeah you can either add those margins or you can have justify content space between and then yeah but probably here it makes more sense to add load just like putting margin to a view here but yeah i think it's it needs more it needs margins and also like we need to to manage the color the wii for them so we will need them so styles name then for this one uh user name and for this one styles don't um create it at so let's now go into our styles and define the name for the styles for the name for the user name yes but for the people watching so for example if you need the equal spaces between some views or text the the with flexbox it's very easy to achieve it like just using with justify content and space between so it will make the spaces between the text or views equal and as well you can do that in a row or columns yeah but we're gonna use horizontal margins here uh five pixels maybe and let's add it for all of them now we can see that there is space between them um so for the name we need to display it bold uh lucas they know how it's done font weight and bond weight bold yeah yeah it's displayed and uh this is black the handle is displayed as gray so for the username let's uh say color i don't know gray will it be yeah i think it's good and you need to add at yeah that's what i was watching and something is missing here so let's add uh here at yeah like that um and the same thing for the time here styles gray uh yeah here i think that's good enough what do you say yep that looks that looks good okay the next thing that we need to display here would be the the the icon the icon this icon so i found it somewhere let me just find where it was uh oh your ionic guns uh let's import ionicons from vector icons expo vector icons and use it here and the name of it is i'm not gonna try to pronounce it chevron down save it and i may start it why did i say i don't know the name maybe maybe it's not from maybe it's not from this one the import is interesting check how did you imported this ionix in navigation no the import is the same no it's from it's uh it's from this one yeah let's just go into google home and see run down and it's in yonicons it's here but maybe expo vector icons maybe it's not here let's filter only ionicons and no it's not there yeah let's um from in typo let's import it from a typo and because yeah that's probably not in that library yeah it's there and give it a big bigger size size uh 24 so much yeah definitely too much 18 even 16 pro is gonna be enough and probably uh gray it should be like yeah second then color equal to gray like this right yeah and it should be on the right side um how do we do that um so it's either flex end or yeah uh self-align align self yeah there are like probably try yeah this one flex end yeah no with the yeah but yeah i'm not sure so it also can be just fight content flex end justify content yeah but then you need to make it on the view yeah the easiest way we can do is to create like two views here yeah put the names into this view and into a tweet header uh yeah i'll tiles tweet other names for the tweet header names we also display them into the raw into a row but for the tweet header container we yeah let's save and see for the tweet header container we also specify justify justify content space between and it will add space between these two views like the first wheel and icon hopefully it will work why it doesn't maybe it's uh create it put that in the view as well do you think so and typo icon i don't think so i think that uh the wave is not 100 here let's uh display the background color and see um yeah you see so the wave if we set to 100 percent yeah and now uh maybe not 100 maybe here we need to say flags one flex one and what the hell it's happening um okay this one can it be because of its margins no no uh go to the your main container and add to yeah where main container here yeah uh this is flex one more icon with header for this more i can have if we add flex one here and four yeah yeah delete flex and because it aligns it on the bottom yep yep yep yep so we don't you can delete the styles here delete the background red color i'm not sure why hi and they think it's the same now no like the height of it like look of the whole tweet header container oh because you made it flex one so it takes yeah wait but why it's not that delete yeah because you're making a header container so that's the header container has more but if you make it tweet header name flex one and it will be yeah make it on here i don't think so no no no no no [Music] yeah that's interesting yeah this one is um still go to your okay main container as we thought and yeah these styles shouldn't be here and now try adding this in a view right now this one because it's yeah it doesn't have the container uh and now you have their flex uh data justify content right yeah on header container we have justify content but this is not 100 can you for example uh make the background of red of the view itself the above view the above yeah yeah um is it 100 uh oh yeah maybe this one is not one yeah yeah background color blue yeah yeah yeah so that's uh i don't know like styles container [Music] styles let's add container here and this one we should say it's flex one right yeah or with one hundred triflex one and 100 color blue let's set here yeah yep yep and but now the width is going it's too big yeah that's what she said yep but now it's perfect now it's perfect because here is the margins from the tweet component yeah now we can yeah everything is working and i think we don't need to delete that view yeah because it will also work okay uh it's good now now let's do a three minutes break i'm gonna go to you know where and come back so yeah see you in three minutes guys don't don't go away let's put here something hey i'm back let's wait a bit lucas to see where he he went and then we can continue working okay lucas come back we need you [Music] lucas and i'm back as well you're also back can you um turn on your own it's not these headsets yeah am i making making myself your camera yeah yeah wait i'm making myself comfortable okay so uh let's see where we are at so we displayed the header we displayed them the content but i would like to move the paddings from the tweet header container to the container itself because it will need to have also the content some padding some margins yeah so margin uh five and four that means that the name will only have like margin right to be from the same line let's give it like 10. and only margin horizontal probably because we need we don't need vertical margin um is it good i would give margin right all of them here yeah i think this is better we are here right okay so for the content uh let's grab some bigger text to to be able to see and work with so whenever we need some text we go to lorem ipsum and we copy some text from here come on come on oh come on why and let's go to our data and yeah here let's paste it okay now it looks better so for let's give the content some styles style content and define it here so what do we see that we need a bigger font size or is is it the same name it's the same but i think it's bigger overall like our even your name is pretty small i think maybe it's only an emulator maybe yeah because maybe like if you look at this this way oh yeah yeah yeah that looks bigger you should know how to present it what said that yeah exactly so uh i think it's only like more um like the line height it's more space between lines oh yeah definitely for sure and also i think there should be more margin 20 18. we voted yeah there is a difference 20 2 yeah maybe a little bit smaller it looks strange with 20 19. perfect yeah that's yeah perfect but 19 it doesn't look good for front-end developer yeah for anyone 19 doesn't look let's go with 18 bro the software's engineer is trying to find the perfect pixel size especially one back-end developer i don't think there needs any more spacing because if we look it closer i think it's quite good you don't think it needs more height margin top i mean no i think it's very close let's give it margin top five like this that's already like you see that okay oh this is the name and this is content okay okay let's go for it hey guys if you can manage to to do better styles than than us please uh do a screenshot and tag us on instagram saying that we're losers we're not gonna be offended i'm gonna reshare it so okay the content is good uh everything till here is good the last thing is the container with likes and the footer uh you know what i i would like to create a separate container for that separate component here probably that makes a footer and here let's create a index dot psx i will copy paste everything from here and delete only what we don't need for example this one we will need this styles and in the footer we're gonna need uh icons so i will leave them there we're gonna need text and we will not need image uh tweet types yeah we're gonna need it from there and in styles let's import the stylesheet zero from react native and create our styles i'll should create first one container not sure what it will have but we're gonna define it later export default styles okay now it works text hello and what is missing is the import into the main container probably change the names import oh i didn't change the names yeah let's import it first of all and then footer from footer and include it here we're gonna send the tweet there and yeah in footer changing actually we should check how the image looks in a tweet as well because i think right now it's going to be interesting yeah without any styles i forgot about the image indeed no footer okay you know what yeah let's check how the image will looking at to it uh do we display it with image so let's check our data if it has a image i think it does yeah it does and it doesn't oh because it doesn't have height and width so yeah indeed let's go to our main container index give our image some style and let's define the styles for the image so what it needs with uh 100 yeah probably and the height i don't know let's try some like 300 pixels and we'll see how it looks to see if yeah it displays and cover how is it called also forget display mode or mode resize mode yeah cover right or contain i'm wondering how does it look on the actual twitter application how it looks on twitter application um can you i think you had it scroll one oh no it's only text i'm not sure if i have an image here on my screen oh i have yeah it's rounded corners rounded corners um and it's more like wider rather than it's not um it's definitely cover um and i don't know 200 pixels yeah i think that one looks really nice and to make the corner round what do we do boiler radius 15 will be enough i think so yeah and also on ios this won't be enough so you need to do overflow hidden as well in order to make it work on is what was the phone change i don't know what's the problem there but it just sported radius just is not enough okay good to know but this is expo so it worked this is ios um oh yeah that's true so maybe on expo it works but no i remember changing this on expo as well so we need also some uh vertical margins um to make more room between the content and the image 10 will be enough i think so how it does look there on your image yeah probably more or less yeah i think it's good so so but can we can we do height auto no there is a separate uh component like for auto height uh images but let's not get into it right now so uh what's next for our phone yeah we see that it included correctly hello then we will need to display all the icons [Music] and we'll display them in views because uh it has like icon a digit i can digit i can digit and so on so um [Music] for the first one do i have them prepared i think i do yeah the replies will gonna import them from one either that's how it progresses feather never ever name no the name will be message circle size uh we'll try 20 we'll see how it looks after that and we need the gray color there like this and text with style dot number uh i don't know oh tweet dot number of comments comments and find variable styles and in styles let's define the styles for the number number and let's only display the color gray we'll see later okay we'll we'll define the styles for um to display them better a bit later right now let's uh here's what i found on the web no thank you i don't need you okay um yeah let's display the next one for retweets and i found it from evil icons and its name is retweet and number of retweet retweets okay the next one for us is likes and i found it from ant design and design and it's hard dash or for outline or just hurt all i think it's hard oh number of likes and the last one is the share without any text let's copy it and i found it from all seven icons share google i think it's called google come on yeah here are all the icons the sizes are the size are not consistent like yeah this is actually really annoying in our project as well i noticed that if you remember yeah it was a few weeks ago but let's work with what we have uh for reviews we're gonna also have some styles uh called styles dot um icon container something icon yeah icon container and let's paste it for all the views yeah now let's go to our styles define this icon container style so for the container what do we need to display them in row lucas flex direction exactly are we in row it's not follow it probably so we need flex one as well to the container yeah and combo would be good as well where are they uh how did you define them there background color uh red no very good can you show the footer in there yeah are they all that's interesting yeah they're all siblings yeah let's see let's first okay that's this one is really interesting uh and uh flex uh justify content justify content space between yeah yeah oh now okay and here we use that space between it's okay probably container needs some don't you think some margins on the right and left um might be should i check yeah yeah first of all let's display also the vicon container which contains bike and the number i need to display them in line so as well flex direction roll and that's it yeah maybe some space between them no yep yep yep yep for example number can have uh i think here they look pretty okay yeah um so let's tell them the number uh marge margin uh left five pixels will be enough the numbers are we bigger than the no they're the same size as the text are they in the middle though i don't think so vertically oh no they are they are it's easy to test things so you can try to text the line no they're not in the middle you see yeah um there's the size of an icon how do you try to text text align center will it center vertically it should but like i think it's here like a line um no no no look at the content like i i can make it bigger and you'll see like 60 you uh 80. they're like but do the for example vertically not the line okay uh do they on icon container the leave it 60 and then background color a knife icon container yeah you want to see they are not indeed i think on viking container we need to say um align items or align content how is it there are both of those yeah you have line items and a light content yeah like this yeah now it's better so let's work with these sizes separately like this one needs bigger like 26 probably even more 30 even more no i think yeah that's around and the share is like 28. yeah seriously too big no no i don't think you think share is good okay and here as well 28 yeah something like that right yeah i think it looks pretty good i think it actually looks almost the same only the share button has more space there but i think it's okay i i we we can we can do that but it's gonna be like a little hack it's the code will be much cleaner if we don't do spacing here yeah so yeah uh okay that's everything we need for the tweet component with i think so let's see but i don't see that dividing line as you said in twitter yeah like in their app don't you see oh really there is no i don't see it on my screen it's very very thin like oh no okay right now i do see yeah it's there so uh maybe we should make it light gray as well because our really like takes a lot of that that i can agree with you uh in the tweet styles uh border color light gray like this with t well and gray like this and i think you don't need a dash light grey yeah yeah like that that's a lot better i agree yep uh so so so what's next let's uh check our you know what's um what's still necessary to to be done yeah momentum moment and to display that date properly so moment is a little library that helps us display date in human readable way it's called moment.js like not uh in our database usually we we store the date like as either timestamps or in a is is all format like this one is iso so we will not want to display this in our application we need to display it in human readable way so there is this moment.js um let's add it like yarn add moment yarn add moment and let's check how to display it [Music] um in a human readable way yeah i think it's from now yeah i think it's from now and also what i noticed that it has a little dot in the middle oh i saw that one but i don't want to do it no it's probably i think it should it's too little like ah i think it we're good you can yeah i think you had an icon of a dot i can in a very small size with icon with a dot yeah yeah uh so that's in the index created at here so what we're going to do first of all we are going to import moment word moment from moment then we need to create a moment variable uh with the tweet dot created that and say from now something like this i'm not sure if it will work but we can try refreshing something is not good yeah oh no it's good three hours ago perfect i think it's really nice yeah it would be can you do not hours but only age check moment i think you should be known from now let we should check the documentation of from now like dogs thinking from now you can specify yeah like what style oh what i'm doing from time from now yeah i think it's [Music] here no i'm not sure if it's possible i mean it might be strings well it's not that important all right the breakdown of which string is displayed for each level okay yeah i think it probably can but yeah you definitely can just check them you have a documentation yeah formative thing here format yeah we're not gonna do it now because it displaced three hours ago and i think it's it's pretty good so uh that's everything for the tweet post yep yep probably yeah okay um next one is the feed component right the fit component will be uh one component that will display a list of off tweets and we already develop our tweet component and this feed component will be very simple let's go ahead and create it not a file but a directory for feed then we will need a index and here import react from react as usual we will need we will need a view a flat list and what else probably that's it from react native and here is our component let's also export default feed we will in this feed component we will need data for it so let's import tweets from data dot oh it's not here probably it's data tweets um and what we need to do is to render a flat list and the fleet leads needs these two required parameters data and render item data is an array with all the data that we want to display in there in the flat list and render item is a function that will be called for each item in this list that will define how we should display each item in our flat list so for the data we will send the tweets and for render item can you guess what we will send we will send a tweet component that we just developed from with it's going to be an arrow function and here we will receive an item and we will gonna render a tweet with with which is an item probably key extractor would be good to include as well this is the minimum things that we will need for the flat list to work however we will set also a property key extractor and what what it does it will define how we should know the unique uh identifier of of a specific item in this array and it will all like a function for it which will be item and we're gonna return item dot id because by d is our unique identifier of each tweet so let's go in our data first of all let's go in our data and creates a bit more tweets so it needs a unique id tweet tool then let's do one without image a yeah let's do more tweets to be able to see a3 hello world and let's do one more oh it's gonna be enough e for [Music] right yeah and now we need in our home screen instead of rendering a tweet we need to render feed so from the components.feed we will import the feed and we will display it here and we don't need to send anything there because it knows where to take the tweets from let's save and hope for the best okay that's interesting uh so to say the least what to say the least interesting uh let's add it into a view and add some styles to it style will you allow me to add inline styles here with do flex 1 maybe next one yeah next one background color we always start with background color red that's how you debug and i think we need a 100 wave here and here we can see our list we feed with uh tweets that's that's crazy it's beautiful pretty similar with with what twitter has uh yeah i don't see any differences do you know basic a week of development and you can have a twitter completely cloned you know what i don't see is spacing between um the footer yeah and the content why is that uh tweet because we only added margin top for the footer or for the yeah for the content and footer doesn't have anything at all i think verbal content we added margin top content margin let's do margin vertical now that there will be more margin between uh photo and uh content image i mean uh very marginalized and should we add it to the uh footer yeah butter styles container a margin top which will be probably five five ten five something like that i think five is good yeah i think it's uh it's good enough so yeah we see that it displays everything um then we will be able to uh fetch this data from the backend and feed it to this flat list and it will display an infinite scroll view uh where it will call like fetch more data when it uh goes to the end of the list and that's how we will display like the whole feed with tweets right now it's horizontally scrollable everything looks great um i think we are done with uh the tweet and the feed the feed component and the last thing that uh it requires from the front-end side is uh the create new post page because in the next video we're gonna connect it to all to the back end so we need to to develop the front end of it so everything will be ready for implementing the back end and creating new tweets and i think in the next video everyone will be able to join our twitter and post their tweets that will be so dope right yeah so the first thing we need to develop this floating button let's close everything and let's create a new component for it [Music] which will be called a new tweet button yep let's um create the index import react from react um const new with button and export default view uh what do we we will need here we will need a touchable opacity in order to be able to detect clicks because whenever the user clicks we need to open in a new page so let's import from react native touchable opacity and let's return here our touchable opacity and inside it we need to display an icon and for this one i think i didn't search for vikon so you guys will help me um i don't think we will find exactly this icon but at least we can try so now let's be original let's do something different uh tweet i don't know um and sell something like this do something like a feather maybe lucas your your god this one from material icons let's see how that one looks on twitter i think any typo looks oh but now theirs is more like the material icons for sure yeah uh material community icons fever okay let's import my tier real community community icons um it's whatever it's 30 let's try and color it's going to be white okay for the touchable opacity let's add some style let's create it might contain multiple styles so styles dot color styles styles yeah indeed i import that was a test for you lucas okay so best that's good yeah styles i just wanted to make sure that you're not sleeping okay so export default styles and here we're gonna have as for the button background color will be colors dot light let's import it we need the tint color but we have it in in our constants colors from constants is it here colors i think it no it's here yeah dot light dot tint like this and we can assign it here styles dot don't and here but we should probably add it somewhere to see the how it looks like right now in the field oh we didn't add anything there okay on let's just add on press um yeah just console log on press let's define the function here yeah console once on press let's console word to see it in the application yep open new tweet okay now let's add and let's add the new tweet button and then we still need to style it but to see it in our home screen do you think i think it should be in the home screen not in feed uh i i didn't use twitter i'm not sure i mean like logically oh yeah yeah yeah um tweet button and let's add it here new tweet button okay it added it somewhere there so what we need to do is first of all to display it uh to set the position absolute because it will always be on the screen um absolute like this yep are you sure about that uh then um bottom like 50 pixel from the bottom uh 50 pixel from the right here yeah i think it's perfect position and border radius to this one border rise will it work on detachable opacity or it's on the view oh it's on a view no no no no no no it might it might need to be on a view but i'm not sure let's see i'm not sure about this one either like 50 yeah it works and we need some width and height with 50 50. and how to center icon it's gonna be maybe with flags like um align content enter uh there's so many like alignment items items yeah center and vertically justify content yeah center add the comma i am actually proud because i centered some a thing without any help so yeah let's see uh should it be bigger maybe not maybe um not that much space it's on the bottom yeah like i think on the bottom there should be less as well maybe even no but maybe no maybe no 20 i think something like that and it's i think it should be bigger as well no yeah might be well but maybe it looks like that on the emulator only let's give it 60. i think it's perfect yeah did you work with shadows in rock native well a little bit yeah for the widgets if you remember shadow but how i do it i just go to react native shadow generator on google and pick how i like it and then it generates okay not that important for now so if we press on it it console warns open new tweet so we see it there that's good uh another thing that we can send to the retouchable opacity is um color something touchable opacity or active oh yeah active opacity which will be 0.8 yeah you see right now it's not that um the opacity because yeah when we um when we press however without this it was too wide like look so yeah adding active opacity will display how much opacity it should have when the button is active okay next step would be to create the page of a new tweet and uh here we have it let's uh go and create it right now yeah that's going to be a new screen let's just copy paste the home screen and call it a new with screen a new tweet screen and here yeah new with screen okay what else okay we will not need this one so what do we have here we have a view with the tweet button and the x icon but first of all let's display simple text see that we is displayed hello world uh add it to the navigation because the screen should be in the navigation and it's gonna be in the [Music] i think it's gonna be in the index navigator not in the bottom tab navigator not even in the home navigator but in the index because in the root navigator so [Music] let's add it here as a stack screen name new tweet component new tweet a screen will it import it automatically no we didn't ah the import statement and then we should fix the types to include the new tweet here new sweet yeah now it works and uh [Music] i also want to say that right now where we are working uh right now that we are working i would say that we should set the default screen to to the new tweet screen to be able to to see it always but no no no no no we don't need it because we have like fast refresh so we can navigate there and it will always refresh so what do we need to do uh in the new tweet screen no no not in the button components new tweet button uh we need the navigation and we need here one press to navigate to our new tweet screen and to use navigation we will use a hook uh called use navigation and we will import it from react navigation native from from here let's add it here now we have access to the navigation object and we can easily navigate here using navigation.navigate to the screen called new tweet screen no or no i think the name is called how did you name that i don't remember index here yeah [Music] this name we need this name yeah uh and if we press hello world it goes here perfect i think this tutorial was perfect like it touches every yeah like basic navigation flat list displaying using components yeah styling everything and it will also in the next video we will do how to connect all everything to the back end so i think yeah so that's the next step so that's very very nice yeah so okay new to it button is done now we go to the new tweet screen uh for it we will need uh on top a view with accent with button let's do that we will need come on a view of you uh x icon we will take from uh cross we can take it from and typo there is something like close because this cross looks so evil like it looks thinner and design i think or evil icons yeah yeah so let's import it import evil icons from here i will icons name what is the name close something now close oh no maybe like close oh i just closed close uh size will be 30 let's try 30 and see how it looks um and color will be colors dot let's import these colors from constant colors here light dot tint yeah it's blue the same way as here i think we can take something uh from my design because this one is too thin yeah yeah let's try and design yeah this one is yeah this one is better and then the next one is this button so for the button we will use the touchable opacity tiles tiles dot button on press new tweet but now on press on post with or on submit yeah something like that let's declare this function here for now it will i am messing up some parentheses right yeah because oh because you don't have a closing tag for touchable opacity closing yeah yeah like this yeah style dot button can't find variable touchable opacity because we didn't import from react native uh but yeah we need some text inside it and the text will be tweet yep tweet why doesn't like style not styles style yeah yeah so button uh background color we need the tint color um or the text okay let's add the spacing here button text for the button text we need padding um i don't know 10 yeah but we need putting different horizontal and different padding vertical because horizontal will be probably 20 and vertical 10 only vertical then something like that the color will be white the font width weight will be bold what else the border right does but for the button will be [Music] 10. no more yeah more 30 yeah that looks i think that's good enough yeah this font is probably different than maybe bigger but bigger font uh font size let's say 16. that thing that's it i think yeah didn't they mess with color don't you think i hope not well for me it's hard to see or like yeah but i don't think so um okay so so right now we need for this view some styles sales dot adder container and why do we need header container to make it in a row how i already forgot oh really reflects direction flex direction row and we need a comma here either in our in row then uh justify content space between and um our container who is not full with what how do you think this one is full width header container is not legs one oh boy um no no no no no no it's going to be with 100 like this and some horizontal padding fighting horizontal or not even horizontal like adding i don't know 15. yeah probably padding in overall yeah okay that's the first thing here um for the container i think we need to save that um flex begin but i'm not sure for which one to display the buttons on top like start but i you can just delete the justify content sir start i think yeah and it goes okay it goes there so what do we need for in order uh to know this save someone is saying hello in chad hello guys hello hello welcome welcome to the stream so we need the savior from react native yeah save area view anything now something yeah safety review and should we give styles to it or to yeah yeah i think you can give it to it right right away oh it's very white no i mean it's there i would put here the safe area view and put everything inside it and then make it flex one the safe yeah and i think you will need to change the background color of safe area because it makes it gray like grayish oh so that means that we need to put it here and just change the color of it yeah you can do that uh background color white yeah yeah like that so uh we have a close button we have a tweet now we need our profile picture into a separate view profile picture um image let's import it first of all add import tag from components and for the image um [Music] let's just send some hard-coded image so let's copy it from here and let's send it here yeah we see it there and the next thing will be input next text input next input and what does it need there that's uh i think it needs a placeholder yeah it definitely can take place holder uh let's see what twitter is saying for the placeholder enter your textbook no oh what's happening [Music] what's happening yeah we see it here and now probably we just need um we we need one more text input for the for the image because we're gonna use like a text input with the image url to be able to save the image so image url optional for the styles let's say style tweet input this one will be image input and you know what we were gonna need to add them into a view because we will display the image on the left and the view on the right with the two inputs so the view will have a style input container and this one will be styles a new tweet container something like that so let's start with a new tweet container why did you start to put styles in the same file uh it was here from the template and i will move them just after i finish because it's on the same page so new twitter con new tweet container then let's add also this input container and then we will define the styles for it and with input and image input right and image input yeah this component is getting a bigger and we could uh structure it in smaller components but i think it's still manageable so new tweet container uh flex roll or flex direction row first one save we see that the image and the text are um yeah on different rows um you know what why didn't we add the padding not on the header but on the container itself like this good question because because because because why because margin looks bad okay okay that means that we will add the same padding for the new tweet container okay it happened and for the input container we will say margin left then in order to have some space between image and the input yeah it's there for the text width for the text tweet um i think it should be multi-line and it should be handled here text input uh lines number of lines uh let's add three item maybe and why does not much changes white how to complete it with disadvantages text input number of lines number of lines uh max height okay i think it needs uh max all right 300 why it's complaining about oh i think it's for the styles here marks right a hundred but also the height should be not not high oh i'm setting it for input container not with input so if we change height yeah we need to set a height here well of 100 and we need also to align the text on top this one is yeah i think it should be done easier um i'm not sure why the keyboard is not there showing maybe a real device uh it's not showing because uh on is simulators the default is that it won't show and i think to make it show you should go to either tools go yeah it's i o maybe yeah no keyboard keyboard use this um yeah does it have a multi-line uh multi-line equal throw yeah right now we can write on multiple lines nice yeah that's good should it be a bit bigger yeah probably yeah uh input point size 18. why doesn't it think you should text the input has itself like oh let's see a prop to make it bigger um [Music] let's clean up what we don't need here so what else do we need we need to um to keep the values of the tweet and the image into a state because we will need them yeah i think uh it worked like this you see i just needed to delete it and so we need um to keep these values in state because on p post tweet we will need to send these values from state to the back end so to you to do that we will also use a hook and the first hook will be for the tweet and here set tweet which will be a use state and the default value will be empty string um for view state we import it from uh react i think react and then use state that's oh it's better to do it in one line um that's for the tweet and the same way for the image url set image url so um text input we need to send uh the value of the text input should be the value of the state so for that we will say value equal to tweet wait so right now if we set the initial state here to hello world we will see that the value of the input is hello world however if we type something it returns to hello world so what do we need to do we need to set a function for on input and whenever the input changes we will call set uh it on input change no not only input change one input right i think it should be on j on text change or something like that one text input no overload value unchanged text maybe try on change just don't change now there's nothing for unchanged text uh sam won't change or unchange the text it should be one of those yeah let's try this one uh value argument of type native oh this is the event but the value itself is um this is event and the value is event dot target.value so now if we write something we set it to the state and we display it back here now we can set the default state with empty string i don't know why it says property value doesn't exist on type number but yeah that's that's how it works dead sad wow what autocorrect no i don't know what's happening so let's do the same thing for the image value will be image and on change we call the setter from the state set image url with the target.value now in onpost with let's uh console these values console log [Music] posting that tweet and here let's say tweet from the new line image image image url so let's right now um did we yeah we said hello world with and let's check the where is it here in the expo page here now here let's clear everything let's rerun it because i'm not sure if it reload reload let's go to the post tweet hello world here let's say image url tweet is the debugger here or i don't remember to be honest once i mean neither oh here it is image and define post with undefined uh that's good maybe it's not either target so let's have a look what this e e dot value yeah but you should be able to only call unchanged text like i said on change text right and it yeah and then it returns only the text next and it returns by values here right yeah yeah like this hello make it on change text as well yeah yeah don't change text yeah yeah i messed up there sorry now it's gonna work most likely no let's uh let's let's reload it okay let's go here again hello world image url wait that's more like your hello work hello world where is it where is it where here uh yeah posting tweet hello work image url yeah that's it the page is done um so i think everything from the front end that we many we plan to do is uh created i'm at the end of a presentation here we did we set up a project we did the bottom top navigator with the home header the tweet component feed component and also creating a post yeah that's that's really amazing like how much we managed to do let's put it here um in just uh two and a half hours we managed to to completely clone the homepage of twitter ui yeah we understand that it's not all the features of twitter and we um we understand how much effort they put in making it and it's by far close to what we have in their application uh but yeah for for the ui purpose and for for the purpose that we are doing here to to learn and experiment with react native i think that's that's more than enough and it really looks um very close to twitter and yeah we have also creating a new tweet page and in um next week also on uh thursday at 4 00 p.m our time which is uh what time lucas villas oh yeah you you'll see uh you'll see the shuttle of um of a stream at the same time we we're gonna continue working on twitter clone and we're gonna um connect it with a backend using aws so make sure to to come there and join us live and uh yeah see you next week uh thanks a lot lucas for joining me and helping me yeah because aligning things in the middle it's thank you for having me thanks guys a lot for joining and yeah spending time with us i hope that you liked it and you'll learn something new from it i highly encourage you to to follow along this stream and create it yourself as you will be able to add it to your portfolio and it will help you get your next job if you are looking for one so as always guys take care thank you

Channel: notJust․dev

Views: 35,456

Keywords: vadim savin, not just development, notjust.dev, twitter clone, build a twitter clone, how to build a twitter clone, twitter clone tutorial, twitter clone react native, react-native tutorial, react native ui design, build a twitter clone javascript, build a twitter clone app with javascript, react expo, react native live coding, react native clone, live coding, how to build twitter in react native, react native aws amplify auth, react native aws amplify, react native auth

Id: Fdi6FRCT1uY

Length: 168min 40sec (10120 seconds)

Published: Thu Aug 27 2020