🔴 Let's build an app with REACT NATIVE! (Qazi & Sonny)

mikaze and i'm here with your boy papariak what's up guys yo let's go guys i'm so excited to be here welcome to an amazing amazing day but we're gonna be talking about react native that's it react native react native guys you know we all love react people come to love reacting to the channel but we want to take it a step further and show you guys if you want to build an ios app and android app we're going to show you how to do that today and the fun part is is that we haven't prepared so it's going to be very unscripted and we're very you know we're going to keep it real with you guys we're going to be going through this together exploring this together building this app out together it's gonna be fun dude it's gonna be super fun and for this one i'm actually really really excited because not gonna lie for some of the other ones that are over prepared sometimes it's boring going through those because we kind of already know what's going to happen the interaction part is fun but uh interacting with everybody but like this is personally exciting for me sunny because i get to learn in this and i actually want to learn react native exactly dude exactly and the thing is i coded react native quite heavily about two years ago so even i'm a bit rusty with it but i built some crazy stuff with react native so i'm excited to jump back into that i'm excited to go ahead and get kazzy involved in this stuff and just get stronger in this so we can all go ahead and build some crazy apps together but um yeah this is the start of a huge series were you doing um when you said you were building stuff with it were you doing stuff with tipple no so tipple it wasn't it wasn't for tip wheels for a company i worked at um i had never could have react native before i was a full stack developer at the time so i just done react and it was in the deep end i hadn't done redux either so it was redux and react native in one so i just had to like just thrown in the deep end just catch a wave as it was running so but um yeah if if i could do it in that situation guys we're gonna break it down to a point where you don't have to know how to put back pretty much code gonna make it super easy for you guys to go ahead and understand that oh first donation yo what's up bro we're up to 456 concurrent viewers and actually my stream deck is telling me we're at 531 concurrent viewers let's get it guys let's go man thank you for the donations that are coming in guys if you want this video to go out and you want us to do a lot more of these there's only one thing you need to do to make that happen it doesn't cost you anything what is it sonny all you have to do is you see that little shiny button right now which isn't it's not at 500 yet you gotta go and smash that thumbs up button guys and get that number up so this video goes out to as many people we can help more people reach this amazing content on the channel that's all we need you to do guys that's right i i messed up my um stream deck for a second so i freaked out but we just broke 600 600 concurrent viewers guys that is amazing um if you want this type of content and you want to learn react native and you want to go on a journey with two bros trying to learn react native making mistakes up having fun then subscribe to this channel so you can be on this journey with us exactly guys we're just going to be going through this together you're going to see all the moments where we get stuck we want to punch the keyboard we want to throw our out of the window we're going to get all of that keep it real for you guys oh dude coming in hot look at the the super chat that just let's go we're back that cooler you are amazing dude he says kazzy and sonny you guys are the best thank you for firing me up all the time and actually making coding exciting love you guys man i want to join your courses soon damn yo dude sonny we got to do this a lot more often man did you forget how this felt yeah man god it's like a you know it's fun dude we're gonna be back guys do you guys miss this duo me and qazi miss this we miss this it's fun for us we're gonna be back with this though people are like kazzy speak in hindi we should start doing that all right guys let's go all right so where do we get started sonny should i click get started is that the first step yeah let's just do it together dude so let's click on get started all right and i've done a bit of uh like a run through roughly earlier so because there are things like uh one thing to know is if you're using a mac it's a lot easier you're going to probably need a mac when you're doing this everything's easier with mac and also download uh xcode right yeah so download xcodes xcode's for free it's in the app store all you need to do is go ahead and download that you're going to need the developer tools that get installed when you set up xcode so that's pretty much that um you might also see this thing called expo so like this little coding box has like expo on the top right yeah now we're going to cover that at another point but we're going to be doing it all through the sort of the raw installation way but we're going to go through export on another day and show you how you can actually get up and running really quickly with expo cause that's really cool dude expo i would say that anybody who is gonna have trouble installing stuff if you wanna follow us along you can even follow us along and do stuff right here on expo that way you can't possibly up like your installation is not going to especially if you're on windows or something like that's going to matter yeah because you know when i was coding before they didn't uh when i was doing it they didn't have expo so a lot of people who are hitting windows were getting kind of hit or miss but that's true dude so anyone who who can't install it or runs into any issues go ahead and try it out with experts bro we're we're at 620 bro that's what i'm talking about dude over 500 likes that's it guys all right awesome dope so what's happening here now what's our next step so next step is let's go ahead and find you can put on your music by the way sonny what's up you can put on your music by the way oh does it come through like if i do this hell yeah nice dude hey let me quickly find the the next step because um where is it going react let's go ahead and do react native installation so development environments hang up development environment okay here we go so i'm just waiting oh i just changed the text bro i just typed in yo here all right let's see what's happening so uh looks like a react component type of thing so it looks very reactive and then yeah i got my justify i had a really good tutorial starting with it's all good bro take your time i'm learning here learning i'm gonna actually uh make this bigger so everybody else can see it yeah oh damn nice victor atencio what happened hold on check that out dude hold on let's see here oh yeah yay yo let's go victor just dropped a 25 donation that is absolutely insane where are my air horns when i need them here we go and he goes i've been waiting for this content let's get it yo sonny you're right man people were waiting on the react native content you had your finger on the trigger right there all right yeah waiting for this exactly um okay let me check expo right now all right dude i'm gonna drop you a link no i'll send this i got my styling in one place all right i'm looking at it nice there we go uh facebook guy says um sonny and kazi you guys are super exceptional i'm currently on the amazon clone with react.js and getting it complete well with me as a complete beginner on the web development space okay i will be finishing soon and proceed to the netflix and others i'm martin from ghana yo that is epic brother hello what's up mine that's awesome man i love the fact that so many of you now have gone through the amazon clone so like it really really awesome to see that and i see so many little tweaks and changes that each like each of you have made really really cool to see um all right so here i opened it up right so so if you go down so there's two options when you use a react material about right so firstly any of you who don't know what react native is it's basically using react so you have html css javascript react is like a imagine reactive there's a big circle around those three things allows us to build really powerful apps right then react native once you know how to code and react so if you've done anything in react before every single piece of knowledge that you know from react is applicable here right so you can pretty much go ahead and take that knowledge to react native and then you can pretty much build ios and android apps so if we go down to uh click on react native cli quick start all right and then i'm just signifying that react is pretty much like applies all react knowledge applies to react native my face is hiding exactly so let me move my face and back all right here we go every bit of knowledge that you know from react is actually all transferable over assassin react hooks all that fun stuff pretty much take it all over with you um so now what we want to do is if let's go down to the base so you see where it says it says xcode and um you're on the right page right getting started page right that's the one you sent me or yeah this one yeah so if you go down to installing dependencies um okay installing depend i literally i'm command i think i sent you one um oh you gotta click on you see where it says react native cli quick stop yeah that's the one you go click on that there we go then scroll down right so now what we need to do is we need to install a few things so the first thing is is you have to install something called homebrew okay so if you don't already have homebrew there's a little link you can click on that and it will show you how to install homebrew but what we can do next once we have homebrew installed you'd have to do brew install node and that's going to install something called node.js on your machine and then brew install watchman so we need should i do node or do i already have node um you should already have node if this isn't a new computer right i have no idea when was the last time i used this computer it was a while ago okay so to test it uh firstly make it super big your your terminal so we cannot we can all see that okay so come on one plus yeah there we go because i'm on an tv it's actually like massive now for me in person like tournament like literally bigger than my face it's like bigger than my chest and my head oh no oh nice i've got a reference over here yeah i can see that nice so now what we're going to do is type in node dash dash v let me try i think there's no dash dash v uh no no dash v yeah no dash v i have node bro i just typed in node and it showed me whatever you have no right that's perfect we don't need to install node but what you might need to do is type in brew install watchman dude i watched this clip on dr manhattan from watchmen yeah on youtube and it's have you ever watched uh watchmen the movie ages ago i can't remember it but i remember it was a decent film the blue dude is like he's like a god or something right yeah pretty sick so dude i got my cup of coffee man i'm i'm feeling good bro exactly dude that's it i'm gonna get back into this all right so we once it does so homebrew can sometimes take a while to set everything up and do its thing but if we go down to you know where it says xcode and cocoapods so xcode is is basically how you would build an ios app right so if you're writing oh my god damn holy bro what is happening nawazuddin air horn for him and he goes just in time like a compiler for what i needed and wanted to do buddy sonny and kazzy you all are an inspiration make that code available somewhere later please all right brother you got it you go i did yo we already crossed almost 100 in donation that's kind of pretty awesome that's insane dude that is crazy holy crap that is awesome man i'm excited i know man and there's almost there's nearly this nearly 700 people concurrently watching this right now bro we gotta make uh the the profit the app that i was talking about where students can log their freelancing income yeah and then we can have a dashboard view of it we should make that with the react native yeah we should 100 and then we can actually put it in the app store or whatever and let students go there and give it a like we can actually publish an app with react native in ios and android yeah that'll be sick man and it will show everyone it's actually real you know what we're doing also kazi go ahead here new hit a new tab quickly go to reactmav.com i want to show everyone something which is insane like um so on that home screen that we were on when we started off so react native uh you'll see they've actually got if you scroll down to the bottom i didn't even know that it is not this one um yo samit's in the house thank you dude for the five dollar donation you guys good to see you guys together again i love that thing so me actually landed a job uh with a company called mathworks crazy salary dude oh yeah you talked about that yeah with the reaction native you landed the job um i think it was i think it was react but submit if it was react native let us know in the comments um but yeah killed it man really awesome um he's always watching these streams as well so scroll to the bottom of react this this page uh-huh and you'll see check this out right at the bottom oh okay give it a try just run this a little bit up a little bit more up there we go look how many look at these apps they're using react native oh yeah i was looking at it earlier actually yeah that's insane we've got tesla ubereats instagram coinbase discord shopify facebook crazy man devin gray hey he goes you stole my project idea 5 donation jk keep up the great content i'm here for more yeah yo devin what's up you better have read that book bro what the bro oh holy crap dude wow another donation oh my god i didn't say jesus so he says um read this what is happening here add to broadcast my computer can't keep up for zod coming in hot with a 100 donation thank you so much and he says i'm a full stack dev at a fortune 100 company i've learned more from your vids than any other boot camp or online tutorial i've completed very much looking forward to the react native series keep up the great work you know i'm screenshotting this and um i am um yeah just smile at the camera sonny there we go hey all right and i'm sending this out insane oh my god that's insane thank you so much fazad that's like that's incredible dude full stack dev fortune 100 company says these are more than from our video from our videos than any online boot camp or any online tutorial so that's insane right so react native coming your way dude so if you're interested and you're already excited then that that is awesome man another massive donation by joseph chu as well five dollars you guys are so awesome do your man builds have crud functionality i mean you can you can take what we've shown you in bordeaux with crowd that's right guys smash the like button if you're enjoying this so far and having a great time i know that we are we're up to 700 viewers oh we're back in business baby i'm excited about this holy crap oh man literally across facebook as well nearly 800 concurrent dude me drinking water is that reminding you to drink water too yeah you know i was just sitting here thinking usually this is why i used to bring three bows of wall when i was at kazzy live man insane all right dope let's go bro let's go dude okay so what's next what are we up to just firstly another thank you to brian kim 5 donation new education system right here thank you for the education ps coffee is always necessary all right sunny nice you're gonna just smile we're gonna look at the camera these are great these are so great i'm gonna start collecting all of these yeah dude awesome the pastor says is this recorded 100 dude everything that we do and shoot it goes straight up on the channel afterwards so you can pretty much go ahead and watch it whenever you want oh my god susanna cruz oh man we can't even continue this stream i love it susanna says um whoa where did suzanna go hold on my bad my bad guys so this is if i had known about your community i would have saved so much time and money spent in college i love y'all's passion i'm grateful for how much motivation you give me as a developer let's get it awesome thank you susannah man i'm just having fun man this is exciting crazy hey david's in the house joseph david in the house let's go dr mert uh joseph goes i've actually applied your react slash bem to my older projects and i've elevated them to a higher level dope dope i love that i remember when we first i got him with batman did you read this comment yeah talk to man in the house hey all right guys cool this is like a donation live stream yeah dude that's exciting man i we gotta get on twitch bro we gotta get on twitch oh twitch oh man guys you have no idea what we have in mind for the live streams and upgrading so yeah gonna get fun all right my hands are itching sonny let's start building some bro let's do it so let's go back to the previous tab all right previous tab i'm there bro right so previous tab and then now we are going to go ahead go down to the bottom where it says xcode and cocoapods xcode and cocoapods got it yeah so this is where you would have to go ahead and install like xcode so just basically the easy way around this is download xcode setup and you should be good to go right the next one is if you go down a little bit lower so sudo gem install cocoapods so you're gonna have to do this one now guys the this the reason why there's a lot of setup here is because you set things up once properly and then you pretty much can build apps and just and and build that ship across ios and android so it does take a little bit more setup because you're actually building full-on apps right so you're going to build fully functional apps which can go on the app store the android play store all that stuff so you're going to need to set things up once and for all to get that up and running um okay so and the chances are there's a lot more sort of like teething issues that you do face with react native so you just have to have a little bit of patience when it comes to that stuff but again it should be all good and uh and once you guys get used to that and trust me the trade-off is so small like imagine coding an entire app in ios and then you have to do the same thing in android make sure it's consistent like the trade-off is is nothing when you do react native you write code once and it's good to go so for those of you on windows that can't do this use something called expo um yeah so i saw some comments coming in yeah expo you will not be go you will not go wrong you will still build actual apps and you will be fine and then on the back keep working on the process to actually install on your computer and get it working but i wouldn't like i wouldn't put the process of installation over your skill of learning react native so if it's getting literally getting in your way then just go and start learning it using expo yeah and i would even say like even if you did set up react native like expo is actually a very good tool like it's a very quick tool you can use you can quickly get started with it so there is no harm in using escrow and thank you nitish kumar for another donation appreciate that dude thank you all right i love coding with your videos and never get bored you guys help me a lot okay dope nice the next step is creating a new application so um oh we're still installing yeah so this this stuff takes a while for the initial installation but once we've done that what we're going to do so previously we did something called create react app right create react app used to kind of get that little spinny react icon up and running and everything sort of pretty much started from that point with with this we use mpx react native and then it has a command called init and then you pretty much give whatever you want to give it now there are templates right so so you can you can use like the the sort of the quick start guide so cause you just go on to that tab and scroll a little bit down so they can see what they're they can see what i'm i'm talking about as we do it oh there we go all right go to this tab here yeah so go down no to the the tab that you were just on previously and let's go down to uh creating a new app but let's just go yeah there we go that's good so you can see the top the top command is the one that we're gonna run once everything's installed that's gonna pretty much set up our starter point so that's our starter template which gets like an app ready it's going to go ahead and when we run npm run ios it's going to start up an iphone simulator get everything running on on that app but you can also use a template right so if you if any of you have watched the videos on the channel where we do redux and things like that we're using create react app but we're using a template and we're using the redox template in this case they show you a demonstration of a typescript template um that you can go ahead and get started with but in this case we're pretty much just going to be doing the bare bones we're not going to be doing typescript and stuff today i'm just going to go ahead and show you um yeah so show you how we get started but because we want this installed all we need to do is run that command mpx react native init and then we call it a name whatever we need all right there we go so let's um yep all right and what i will do is i will make one for react native command k by the way shortcut for wiping oh oh yeah yeah somebody said kotlin is better no dude i mean um what do you think about flutter and then swift and then react native how do you think about those three so so firstly kotlin isn't isn't bad i i cutlin is really good but um so flutter flutter is actually very promising um it's very promising it's quite on it's coming up quite a lot it's very performant the only thing is is it's kind of it has much more like much less fuel so like less less support than things like react native things that have been out for a lot longer um there are some awesome tutorials out there for flower and things like that but i found running intellect when you get into bespoke situations and there's not a lot of community behind it you're kind of on your own so if you get stuck in something completely new territory uh you're you're really in the dirt by yourself which is why it's very tricky when you start getting into very powerful sort of performant apps surface level apps lotto is very powerful at the moment unless you get very very good at using things like dot the dart programming language um swift is very powerful but the benefit guys is if you code in react native it compiles down to swift so you get swift codes and so you pretty much conclude in javascript but you your compiled code ends up becoming swift so that's very good um and then the last one you said what was that so you had fl flutter so there was flutter then there was swift and then there was react native yeah so react native yeah like i am a big fan of react native reason being guys you can code react for web apps react native or ios android you can even use a a different variant of react native for uh building desks because you don't have to go into a whole new world right like i i would much rather go from react to react native than react to flutter yeah because that's a whole new ecosystem and i was learning flutter and i was actually having a lot of fun but it's a whole new ecosystem that i had to pick up and i'd much rather stay within a similar ecosystem and that way i could just keep building on the expertise i have rather than keep unlearning and relearning things exactly and in case of the time that you're putting towards things like if you put what time towards improving javascript now you're gonna get better and react in electron and react native and all these other areas whereas if you can prove your code in flutter you're you're very limited to just flutter like that how much time did a developer spend to do this dude i always wonder i'm like some guy you know come online i know why this happens this is probably like somebody who was procrastinating from doing actual work on the yeah the actual library firebase that's a cool one as well they have a cool one when they do it damn no it starts glowing up with 5a stuff yeah okay it's down so the template now yeah that one's going to download the template everything's up um it has a v so let's explain kind of a breakdown as to like reactive and how it works so there's a so many similarities with react native and react so if we go back to the first tab while this installs we can actually go ahead and show them some of that code in an expo and we kind of play around with that code sure um while we wait yeah i wanna actually keep playing on expo that sounds fun because i was yeah i was even doing some of the flutter stuff i mean one thing annoying about these online ids is like there's some stuff that's supposed to work that just stops working for no reason that kind of starts getting really annoying yeah like isn't they they do so many things well and then they're just really some stuff and the the stuff they're bad at they're just really shy so it makes you not want to use it yeah because you wanted to just be consistent and have a similar feel all the time like when you're coding you don't want it to be like the same exact thing that you did that got you a result now it isn't working and it's their fault on their end it's frustrating exactly so okay i like that it's so here's a cool thing i like about expo you can actually scan this and then see it on your on your phone yeah and it's really good for prototyping like imagine guys you were you were sort of you brought a quick sort of like uh a demonstration for a client or like somebody like for a job interview now imagine you were like yeah i built the app and also why don't you go ahead and test it out on your phone they'll be like oh like this guy actually went ahead and and built this thing and i can actually play with it and when people can play with something and not just click around but actually swipe through your app and mess around on it that's pretty cool like that and this is what you can do with expo yeah let me hit tab to play what is this device tab to play whoa data 45 finance oh donation would love an example using finance charts in react native like candlesticks etc yeah that's actually i did i have done a stock trading app uh build for a client once in react i was using i think it's called d3 for number crunching damn that's sick yeah d3 right yeah so i did it for it was for like a a trading sort of app that he wanted to get like collect loads of stuff in real time and i paired that with firebase and he did a bunch of cool um but yeah i mean we could definitely go ahead and have a look at that yeah all right here we go we got yo what is happening whoa whoa whoa whoa there we go so oh it's interesting it doesn't even need to be a string yeah it's kind of so those so that doesn't need to actually be a string that one yeah because it's actually putting the quotes i see yeah because okay it's adding the quotes itself yeah yeah yeah i understand sure yeah so now um so the way to think about it is there's slight differences where the react may even react right one is there's some core components that you need to think about and that's like views scrollable um i think they're called i can't remember off the top of my head but we'll get into it and all that stuff but there's like uh safe scrolling zones so that way you don't hit the the little notch on special iphones or androids and all that stuff there's um but the main thing is you have these different views so you can see like here rather than a div think of a div as a view that's the only thing you're switching in react right so rather than a div you now have view and then you import the view from react native and now what that does is on the web div is just stands for container right so it just stands for container um but in the in in this case a view goes ahead and when you open this up on ios app the code it compiles down to is is the native component for a ios phone so like so whatever a view is on an ios phone it's going to pretty much go ahead and compare to that wherever it is on an android phone you'll compare to that the same thing applies to text so on a website that your text would be a h1 h2 h2h3 ptag and things like that on this it would just be text and then you pretty much style it up style it as you want you can change the fonts and things like that and there are really clean nice ways that you can go ahead and modify all this stuff but we'll get into that afterwards um yeah but let's quickly see so is that uh is that installation done oh yeah most likely wait okay so it says failed to install cocoapods which is required okay so yeah so try and grab that so this happened to me as well actually um cocoapods are basically the ios dependencies so in this case it's failed to install the ios part of the app uh it's a bit of a pain in the ass like sometimes all of this stuff but it's all good so now saying missing script is too old warning let's have a look iphones right so kazi you want to go ahead and open up xcode so let's go ahead and open up xcode and then it might need to actually go ahead and say okay so it has installed what we needed um interesting okay so we already did pod install what was that error it came up so it said compile account create just go ahead and and copy that and send it to me on the slack and then i'll read that but in the meantime what we can do is we can cd out of that after you send that nice so you can see uh and let's just go ahead and actually open up the code so we can start having a look at the code as well so you want to go ahead and do dot dot to get back from this so let's open item dot dot and then inside the project that they created you want to do code space so you know that little sort of trick that we do to go ahead and open up vs code yeah okay so you haven't got the the code command so in that case open up vs code and do command shift p and then type in um shell so s-h-e-l-l and then you see where it says install code inside this command from from path yeah just go ahead and install that yeah so that'll be handy for for the future but um and now what you do is you write code dash insiders and then space inside that directory yeah okay let's see here and what um so uh it's a bit hard to see one sec so yeah so now when you're inside of it yeah there we go oh that's cool that's actually pretty cool yeah that's really cool i love that and that opens up everything so it's a very good shortcut when you're coding oh that's sick because i i hate opening things up from vs code itself yeah because it's just so slow otherwise but for those of you who are not using the insider's edition we're using the beta one uh beta version of a vs code that's why it says insiders but you guys would just have code dot and you have to do that command shift p shell trick to go ahead and do that um let's go ahead and see what was the issue with other stuff so the the problem with most likely with the xcode pod stuff was that we haven't installed all of the ios dependencies um which is fine we can go ahead and do that in a sec but for now go ahead and send me a share vs live share we can pretty much jump into the same code base all right okay so dynamite maddie says i have no macbook so how can i work on this use expo so you can definitely go ahead and use expo and that will let you pretty much go ahead and move forward with that um all right here we go about to open it i'll just log into github so then i can do this share read and write and then i will get you the link in a second it's starting the collaboration session so now guys let us know in the comments how many of you guys have done like some kind of app development native ios like ios our android so before i did react native i actually touched on a lot of android stuff uh i wasn't using kotlin so i was using some other stuff so just the pure sort of back you know old-school stuff but definitely would have gone ahead and had a look at um a kotlin if i was doing android development but now you don't even have to do that i would say spend your time go ahead and do it um using this so let's see so man looks at our system fully installed yeah so yeah so the ios sdk isn't fully installed that's clear um just checking how to do that so guys remember all this stuff you don't remember off the top of your head and if somebody says they do they they don't because it's one of those things you've got to get comfortable with you'll fix it and then you'll run into the same issue a year later and then you'll fix it again and then you know you've got you've just got to get very comfortable with doing that so are you able to uh log in or i mean jump into the session that i'm in yeah let me have it let me give that a try so joining and i need to sign in yep so i'm signing in got it authorized horizontal says i created a startup using swift ui and firebase super easy to learn and great to reach a mvp dope nice sick some hey i'm in dough okay awesome i see you now let's open up a shed terminal all right give me one second here we go and also guys like if you're if you're doing this stuff i'd recommend you do what me and kazzy are doing and uh use uh vs live share to go ahead and code with someone else because it's going to help you sort of get past those times where you get stuck and stuff isn't playing with you and it's going to get past all that boring stuff you know all right there we go awesome okay so now i can see that so unless let's go ahead and do so now i'm just gonna i know it's gonna fail but this is so previously what we're used to is npm start we can do that but we're gonna do npm run ios and it should freak out and tell us that we haven't done something right because that's what we were getting before okay there we go so unable to find sim cito could not get the similar list blah blah blah okay this is because did you run pod install so now we need to go ahead and go back into let's go cd ios now we're inside of ios and we're going to do pod install now in ios you have things called pods just like in javascript you have node modules right so in javascript you have node modules in ios you have something called pods uh it's pretty much just you're just pulling in code from somewhere else into your into your app so now i can see the error here so it's unable to look up iphone ios okay so it looks like we don't have the um and a simulator installed which means we need to open up um we need to open up vs xcode um yeah xcode again oh by the way guys i do want to actually mention something really really cool this is a side note but i am super excited about this sunny and i are both excited because a lot of you guys want to actually get in touch with us and speak with us so we now have a way for you to actually be able to send us a text message directly and uh if you guys want access to being able to send us a message directly just let us know in the chat below and then we'll make sure we'll show it to you guys but uh here is one easy way to actually kind of get started on this uh go ahead and send us a text here yeah there you go go ahead and do that guys get in touch with us easiest way to get in touch with us yeah text us there garyvee style yeah seriously this is awesome i picked it up from garyvee and i'm psyched it's the easiest way for me for sonny to actually get in touch with the entire community and i'm just so gassed about this like this was not something we had before and now we have it so i want to take advantage of it exactly 100 and it's so cool guys it means it's literally this the easiest most less friction way that you guys can contact us yeah so really really nice okay where is the uh you might need to update your i o your x code because you open up app store and just that's what i was actually doing i was thinking to update my yeah it could be it could be a day this like installing stuff is one of the worst things on the planet with coding it's just never easy and it's the it's like a really frustrating thing doesn't matter how experienced of a developer you are and this is why i really like getting started with these online um online tools like these like expo and stuff and i think why they're becoming so popular all these are online ids update there we go there we go yeah we'll see how long that takes well that's what we actually have to do so i think is it oh is that saying mavericks or something um what does it say i need to be on i need to update my mac os so i think for now right okay so in that case dude we might as well do expo together and show them yeah i would just do it i mean i've never used expo but we can go ahead and learn it together i mean it's probably just easier and it probably works right out the box exactly yeah yeah so tell you what let's go back to the inside documentation and then we can actually go ahead and jump into that um the expo all right i'm gonna go learn the basics um yeah so that link i sent you uh we have to install the expo cli and things like that wait do you wanna but why can't we just use this here this url because we wanna go ahead and make sure we have everything set up first um we'll because you let's not use this one this is let's actually actually on our own computer yeah okay that was that's what i thought of i was saying actually in uh in the chat and i was thinking to go that route yeah because that'd be cool yeah we can do that and then that way you guys with windows and pretty much follow along so smash the thumbs up button if you're a windows user and this is going to help you out okay so this one it's actually the link i sent you quasi um you know the getting started link it has everything in that one we clicked last time we clicked react native cli but let's just click on the expo one inside andy says does pwj have mern projects want to join the course uh yeah we do have mum projects inside yeah and we actually go ahead and inside the coaching course we do a ton of different builds and things like that live with our students so it's it's always growing it's always dynamic we cover everything inside of the inside that course yeah hell yeah that's the answer bro so yeah and on those live calls if you have any questions we do cover anything related to learn yeah exactly you won't regret it andy just jump in jump in in that program you won't regret it and uh all of those things that you're trying to learn you'll learn them extremely well go ahead sonny yeah exactly um so now we're doing uh okay you done it yeah install dash g um also guys if you didn't know whenever you do npm install dash g it's like installing it to your computer here's here is hold on sunny this is i actually want to say this yeah we are on the official react native website right yep bro look at this even they are by default promoting the expo cli yeah that's what that's what i was really shocked about i would go with this bro i would honestly think that this is the way to go yeah because uh it is like i've never i hadn't touched it in a while and then to see that they were pushing it um i mean 100 i wouldn't resist it and plus when i was looking at expo the website they had a bunch of additional things like push notifications going to install the expo app as well bro i want to install the expo app do you think the students can um yes they might be able to do it to literally look at our app or is that like will that give away some security thing you know what i'm saying um i think we'll be good it should be good okay so guys go ahead and download expo on your phone so i'm actually gonna install it as well now so expo on the app store and let's see let's just go ahead and install that i just i just downloaded expo this should be expo expo client yeah and then yeah they can use the qr code i think yeah so that's what shriek is saying as well so everyone can pretty much go ahead and try out that would be dope man imagine that we building up and you guys can just play around with it using the expo people are messaging us on the chat that's pretty cool we got joseph choose there atharva is there steven derek johnson that is super cool i'm going to give you access to this too sonny so you can communicate with everybody this is dope gypsy i know crazy i got uh cool so i'm gonna dude what i really like about this is that i think it's gonna be running on their um sort of cloud you know like their sort of their devices um i mean i'm not sure but if they are then i think oh my god that's game because react native it the debugging in react native is so slow because you're running simulators all the time so if you can do it on expo and they're doing it and they take that slow lagging like annoyance cool thing about flutter debugging is really fast the hot reload is pretty epic with flutter yeah so they they improved it a lot with uh with react native but even after i did it today i was like i remembered the frustration and coding and react compared to react native the speed is just insanely different reacting it has got a lot of you get so much more teething issues once you get into a rhythm you're good but the initial setup is a lot more painful um yo we gotta do this every day bro gotta even even if we don't do lives every day we should just get together for 15 minutes and shoot a video on just one thing like even the questions people are asking which laptop is the best like something bro so it's a habit for us to do something because this is this is a game changer yeah literally one session back and i can already feel the energy from everyone watching almost a thousand likes already guys when shit's good shit's good man like that's yeah that's how i put it so let's try this expo init um first react native all right let's try it yeah i just have a feeling it's gonna work and if it does i'm not going to the other way of doing it bro i i just i'm down with that i hate the other way of doing it a minimal app as clean as an empty canvas uh typescript mineral but just the essentials to get you started you want to go with uh so no typescript um blank or minimal bare and minimal or essentials i mean what it's just we're just blank it's a bit hard to see once i'm going blank bro you took too long to decide all right did you do yeah what managed what's that i said uh the manage work the the first one yeah yeah i was gonna say whatever they gave us by default so i'm excited oh another one dude damn oh we should have another one antonio cortez gonna go ahead and pull down on the screen um i can't it's not showing up for me yet uh oh yo we just hit 10 000 playbacks you guys let's go dude that's what i missed man i remember that was like our milestone every video it's like we hit 10 000 20 000. gotta celebrate along the way man all right hold on come on let's see this oh thank you antonio cortez that is sick yeah he goes he says go for it you guys have changed my life thank you sunny and nas what the where's none and now i know for a fact that i can learn how to code and it's all because of grandpa python aka kazi lol damn bro this guy is all over the place with the people he's mentioning but i love it thank you tanya i appreciate it i love that all right here we go with another um photo i'm going to take a screenshot get ready sonny smile for the camera hey let's go [Music] all right hey you sound like that you know what's his name the guy that was on garyvee's last story where he's like all right all right all right oh yeah matthew mcconaughey i love that guy yeah all right all right all right here we go so we are installed okay let's do it so we've done that now and now we just cd and start bro do it dude let's see i'm actually excited to see what this does let's go all right cd awesome cd uh react oh my life what did i call it yeah it was uh first yeah all right and then npm start so we can do npm start or expose start i think i'm going to npm start because it's in line with the whole react app so thank you so much as well sam codes 5 canadian donation bro this is what we've all been waiting for just passing by nice and sam codes yeah yeah go keep going keep going my bad he says oh and yes expo does have hot reloading too amazing that got me excited bro hold on um is any of this likes i mean we don't care right we can just make a new account i don't care it's not like we have our credit card information in here no not nice it should be fun dude honestly it should be fun all right so lan i can create a tunnel as well right and on that tunnel everybody should be able to check out the app yes bro oh no but you don't need to dude you don't need to look at that qr code that's sick but i mean they can't see the qr code qr code wait no but i can see it right now yeah but you can't scan it can you yeah dude i can pull out my phone on the expo client are you serious let me try it right now oh right now let's go ahead and see this what the oh i just gotta hover over it makes it big i need to create an account for expo we'll do that in a sec um i've gone ahead and created one as well so i'm going to create an account an expo as well bro um what i need is a usb oh hold on a second sign up for expo okay let me go ahead and create a concrete thing those are people saying you can sign it use tunnel guys this is nice run the app hope it doesn't lag i think it's running on local yeah so i think it would run on local guys and then it tunnels it through so you can pretty much use everything uh as we do it so that's pretty much how we would use ngrok as well so ngrok is the alternative that we pretty much use when we do um yo what's up aaron he says oh you can plug it in here too i think nice and um yep all right bro thank you um okay i just want to see if i can set up a screen where i can um show my phone so called some iphone and um would you like to i want to try something if i scan it just by let's go ahead and try something okay open in expo open in expo opening project oh yeah you would want it on tunnel aussie all right yeah yeah yeah you'd want to untunnel okay and did you did the scan work for you so change it to tunnel i i did i did ton already it's on time guys if you don't know how to scan this literally just pull out your camera app and uh and then do it and then it'll work um it says new update available building javascript bundle dude this is pretty insane man like a holy cause when i when i used to use react native this stuff wasn't out like is it is it working or is it about yes it's building a javascript bundle yep it's five percent it's it's doing some stuff right now but we'll see how that works out okay okay so press a dude i'm actually getting so excited i know man oh i see so dude when you've got the the um apparently i was making projects with it bro a while ago on i have the expo app everything i'm like look i have an account i like was making projects so yeah yeah crazy all right um how do i go on my app and scan it i don't even know where to go so there's a few ways you can work on it right um now this is a debugger base how did this open that's like i think you must have hit a debug option or something but if you click on go back to your terminal pretty sure i didn't do anything what is happening yeah so react native has a lot of things behind the scenes so it will have a bundler which is always running right so whenever you're whenever you make a change it rebundles your app and it sort of serves it right yeah so now if we open up your um okay so it's been checked i wonder why my iphone isn't showing as a resource on ecam oh i've got it working on my on my local dovahkiin says is this the beginning of a react native series hell yeah are you what are you trying to run it on right now kazi what so we'll maybe go ahead and get them to connect to it afterwards because that'll take a while well in your one now if you go ahead and um you should have a terminal that's open right now right uh terminal that's open right now okay yeah did you have a terminal it's open right now and what you want to do on that terminal is what we're going to do guys is we're going to develop it on a like a web browser but it's building all of it for ios and android so i'll show you what i mean by that so on that so go to that that uh terminal that you're on uh-huh yep um so that one and then press so you either press i for ios a for android or w for uh web browsers press w all right attempting to open the browser in a web browser so right so now open the project and what we can do now is this gives us a really nice benefit because now we can code it with the speed of a web browser yeah that's sick yeah because now you can code it with all of the speed of a web browser but you have the it will compile to an ios and android app oh man that is nice this is actually dude like i i had no idea about this to be honest like that's insane that's actually game changer nice all right open up app js to start working on your app interesting so now if you go into your code so it's going to uh just uh send me a live share request afterwards for that one yep first react native code guys if you're enjoying this right now hit the thumbs up button and get this video out to as many people as oh it you weird it wasn't auto completing but i used that trick bro i used that trick and it worked it's good right it's amazing oh my god that whole reason i didn't dude this is that's game changer that's actually so good because it takes so long running on the simulator so now the fact you can build it on a web browser and still have oh my god it's such insane develop orgasm yes develop orgasm dude devgasm.com dude that actually would be a great website tinder yeah all the shirts exactly right so let's go to now yeah so app.js now if you change something it's hot reloading and by default so if you type in like open up one two three app.js you should see a hot reload on the right all right so let's go [Music] sunny yeah save there we go nice oh there we go oh also dude look i've got your app tunneled oh are you serious yeah so look so make a change look and you should see it right now in real time oh and yes my phone is correct guys hold on i'm gonna full screen your phone so i'm gonna change it from sunny to youtube with a fire emoji and i'm gonna hit hold on fire emoji why is my emoji alright whatever i'm just gonna hit save oh that is insane let's go save oh [Applause] [Music] that is so dumb yo people are saying it works for them yeah because everyone went ahead and scanned the code yo that is awesome how do i do it bro i want to do it huh i want to do it go to your um uh where is it how do you get does everyone know how you get that code back um okay go to where do we get that code list of available commands open expo [Music] now i got the fire emoji in there nice all right so now what i'm going to do this is so cool knowing that i'm on your guys freaking computers right in your phones right now it's sick crazy man um all right i'm gonna go and learn the basics while sonny figures that out anyone knows by the way just drop it in the in the comment section all right so hello world justify center okay i'm just flying through the tutorial so i can do some fun bro i'm going to tutorial like how i would go through it all right i'm gonna i'm gonna drop this and let's see what happens so you can go to oh i it up all right we're back baby we are back it is running at your local it should be running at your local host or 19002 um i have no idea what that means bro so go to localhost colon [Music] so open up a tab go to localhost called on get out of the debugger yeah so it could be any yes local [Music] 19002 ah okay and then should get back to you there you go but how do i oh i just go open up the camera on my phone yeah so dude you don't have to do anything literally open up the camera and it'll say open the next you're right all i had to do was just open up the camera on my phone and just look at it yeah if you ever lose that and you don't remember the um uh how to get back you just you cancel it and your npm start and it'll go ahead and build it and take you to this page by the phone save yeah oh and you've dude you've also got clickable things on the left look where it says um run in web browser running ios can you see that i'm just going to leave this i'm just going to leave this open here so anybody that wants to um do it they can just make sure make sure there's a tunnel mode dude but why does it keep forcing me to go to the debugger like i don't care about going the debugger is uh so now if you were to uh inspect the debugger you would see all the console logs from the app and the reason why the debugger is running is because we've got it running on the on um oh there we go all right so anybody if you just open up your camera and point to it on iphone and we'll bring you here i don't know if an android does it or not people are like yeah it's working james gayle dude that's so cool bro this is honestly even easier than like anything this is so cool and now you guys go ahead and play with that as we code which is so dope like they can actually play around with the app as we build it on their phones dude wow shake your phone to reload dude this is gonna be a whole nother level of like interactive coding yes this is another level of interactive coding bro like actually being able to see the app on your phone as you're with us that is insane bro i just typed in papa react made this change oh my god that is sick holy showed up on your computer oh and 9006 shows you the actual app what was that the nine 1906 shows you the actual app 1902 no 19. 1906. oh the actual yeah yeah that's the that's the actual web app right yeah nice bro now oh my god now share your um share your local host with me you're 1902 in 1906. um how do i what do you mean so on vs code liveshare if you share 1906 with me now i get your win your web how do i do that you go to share server uh-huh yeah 1906. and then yep snap son and now i can see yeah oh yeah i can see it now i'll give you 1901 as well so you have all of them yeah that is so sick man they just figured out how to do live coding with uh react native in a way that they can even go ahead and play with the app people are saying use lan instead tunnel is slow no lan is for local guys that means that you guys can't connect oh yeah okay yeah so we want it so you guys can go ahead and connect as well um okay and also if you don't have the app then it will go ahead and download uh expo for you dude xbox game changer damn i'm happy i'm really happy it kind of like didn't install reactions by the floor yes i'm super happy as soon as stuff starts like bugging out i'm like it i'm finding a different way to go about this that's like yeah back in the day dude this it wasn't available like that you know so it's more of a new thing now that we can get to this but dude this is why years ago i discovered expo like as soon as i run into any kind of difficulty i'm just installing i go crazy with researching like there's always some kind of tools that are there to make your lives easier there is now it's so popular that react native has put it on their front page years ago when i found it like nobody cared about it yeah exactly right so now we have the app on the left and we've got all right on the right dope now i'm in as well okay now let's run through some of that the sort of like layout of the code right then we can kind of like you know mess around with it a bit i just want to check at a [Music] just want to check i don't even know the default imports but we'll figure it out together yeah i'm just doing random okay give me one second i'm gonna just paste this and see what happens if everything breaks or not oh i did it bro new app oh nice um xbox oh no oh you didn't wait yeah nice you actually got a sh wait the hot reload doesn't work on your phone so you got to like shake your phone and do reload which is wait actually i don't know maybe my internet is bad or something because it's not showing up on my are you shaking your phone yeah i shook it and it says opening project this might just be lagging a bit um that's very possible dude i got square squares bro one more nice when we're live um might be the quickest way to get um you running it on lan connecting your phone and then you know how you share your screen on the phone so you so that way if you ever wanted to show what it looks like on a phone i'm trying to do that also for some reason my phone isn't being pulled up as a screen i was trying to do that for a while if you open up that terminal so open up the um i don't know if you if your ios emulator is going to be able to run actually because you haven't got the um the latest dev tools but open up that term the one that's running everything and let's go to or which one what was it i i for ios yeah it'll be i tried okay yeah and then that should try and yeah there we go no ios simulator it should work it should work but i mean oh iphone 11 pro max let's go it crashed let's go oh that is exciting that is exciting all right give me one second dude i gotta use the restroom i've been drinking too much water go for it guys let us know in the comments right now if you're if you've used expo before um so yeah so loads of people are saying too many people are connecting if most likely yeah if we're tunneling it it could be slowing things down um but let's just have a look so you see how really it's working fine without the shaking um it does guys but it might slow down when when you start to get into and um sharing across different guys um which type of man could be higher skills which is cheaper to use as a solo dev firebase or mongodb atlas okay so if you're a solo developer uh it depends what kind of project you're doing if you're doing like a freelancing gig i would tend to go with firebase firebase is sort of the one that like you can pretty much scale up very quickly with long term builds and things like that i would maybe recommend going ahead and looking at uh mongodb we've got plenty of man stack builds by the way so a lot of the builders on this channel will go ahead and teach you how to get an app up and running with firebase and then you can pretty much convert the entire app over to mongodb so that's a good way of doing things actually so that's a really sort of secure way of doing it and we still have 500 people watching guys insane guys i think we're about to break a thousand likes if i'm looking at that number it's currently at ninth day can we break a thousand likes that's gonna be insane if you do you guys enjoy me and kazi coming back together live because it's been fun and we've definitely just made a few breakthroughs already um with the very short amount of time that we're where they were here uh yeah and guys super chat is just oh my god it's insane um right so with that said let's check some things where we got the view right here dope and now look the app is actually up and running on my phone so you guys should be able to see that right now the app is over then it's actually running so it's actually got everything up and running over there and what we're going to do is can you see so i want to show you guys something right so you see right now on iphones right so on iphones and things like that you see at the top you've got this little notch and yes my phone is cracked for everyone that's done before but um i can't actually change the view right now because cars is away but what we're going to see if you guys can focus over here so you see this little safe area we call it a safe area now the reason the reason why we call it a safe area is because you need to be able to see in that area right so what i'm going to do now is go ahead and type in react native safe area i'm going to change that code so that it accommodates for the safe area okay and the way we're going to do that is i'm going to go here and import it at the top so we're going to say import from react native safe area so you can see i'm actually changing the code right now um you guys should be able to see that still and then what i'm going to do is i'm going to go over here and then to the view rather than a view i'm going to just change this to a safe area view save it and now we should see the app still works right app still looks completely the same but there we go look at that so now on the phone if you guys can see now they see that little gap right we just changed the liner code with the safer review and now you see that right there like it doesn't it it no longer crops that area so we call that the safe area so you sometimes you want to go into that safe area sometimes you don't want to go into the safe area uh in this case imagine you had a menu you don't want that to like feed into the safe area right you don't you don't want that behavior because it doesn't look the best it's not going to be be the um best experience right um so with that done now what we're going to do is maybe mess around with a few other things so let's go ahead and imagine we had um let's just create a very simple app oh also i saw this a class based component i don't want this um instead of this i'm going to go ahead and just do a let's go ahead and refactor this to be a um let's go ahead and say const let's just call it app equals boom this is a class-based component and then i'm going to say export default app and we're going to export it and then here we don't have render inside of a class-based component save it and this should still be working if we've done everything right so there we go everything still looks pretty good if i'm if i didn't break everything yeah there we go it's all pretty good everything is working in the way that we wanted um so those are people saying it's working so you can use react native for android apps or is it only for ios good question steven so uh the reason why you want to be using react native guys is because the beauty is you write one code base and it compares to ios and android so you don't actually have to write two separate code bases um so that's the whole reason we actually use it yo what's up all right so what's going on here man what's this um what's this so i refacted the code to a it was a class-based component before so i made it functional also what i did was i went ahead and you see i added this safe area view instead of a default view the reason why is because if you go ahead and open up so let's go in the simulator now and um let's actually open up the app so inside of uh we should be able to see it on the homepage now can we see expo no uh maybe just hit uh i again on the terminal how real did they make it bro do we have to go to the app store and download it if we should just go ahead and like fling it over so again this is this is most likely i think because of the um my guess is going to be because of uh expo the oh yeah no the oh the um operating system stuff because we've got an async function without a catch block and things like that go up to the top let's have a look at the top what top what top five you're cutting off an error right now with your there we go she says it says task queues go up up again so child process all right yeah so the xc runs yeah probably yeah yeah cool so that's definitely because of that most likely so um you should be able to see now because it's running a bit slow dude so if you want to go ahead and do instead of tunneling it do it on your lan and then can you share your phone view no i can't that's what i was trying to tell you earlier like for some reason it's not allowing me to share my phone video oh yeah all right okay so we still have okay cool so i was showing them before that you know like can you see my phone now so you see like on the top right it says it has like it goes into this boundary so this is what we call the safe zone boundary see that yeah yeah yeah yeah so what you want to do is in your code you see that we've got this safe area view container right yeah and what this does is it stops it from going into that dangerous boundary oh let me actually so we'll pad the top and bottom of the app yeah right so actually go ahead and pad the top and bottom of the app so now i don't know how we're gonna where we can show that in an easy way though because my my expo isn't actually pulling up in time anyway slow oh aaron said bro you beast um okay so attempting to open a point okay so we'll just carry on from this time so we've got the view let's go ahead and refactor this let's get rid of this and can you see how ozzie added this before where it's got style width high background color blue right so here let's go ahead and just make it very obvious so background color red we should see just a red square now now this is kind of how we style things inside of react native right now there is a way of doing this i'm going to quickly find the snippet for that so i'm going to check the docs and i'm just going through the react native docs i'm just trying to find the styling section so i think it's design style and then what we have is something like this right so underneath our code this is typically how you would do it you have something like this we have a style sheet right so i'm not going to kind of um we'll explain this but in a second but what we can do now is where you've got the style here you can pretty much just go ahead and say something like styles dot and then for this first view imagine we just called this one the um let's just call it first label and this is going to be i know this is a view label lesson l-a-b-e-l right you yeah and then boom get rid of this okay and then let's go ahead and so now we've got a view inside of a safe view and we're gonna have text and this text is gonna say hello world so like this hello world and then we're going to delete a lot of this we're going to keep one reference so we know how to write stuff and then we're going to say something like this so it's a first label this is the view and then guys imagine css but camel case so all the properties now rather than so imagine you had like background color and background color usually is like this right but when you do it in this fashion it's like that you just camel case instead right so in this case we could do something like background color red and let's just save this and we'll see if it works so now we go ahead save it let's see if we can we can't okay so stylesheet.create is not a function that's because we have an imported style sheet from react native so we need to go to the top import that save it and then we should um should get past that error let's see what happens now and so it says confirm to construct text okay because we didn't import text as well so import text and you will get really quick with this sort of stuff like remember even when we do the reacts there we go so now we have like hello world has popped up on our screen so because if you've got this open on your local host on your yeah um right what is the first link so this is just the view itself but i mean the actual i guess the the actual thing it should be here right it should be more like so this this kind of actually give this a bit more context so let's just say like a to-do right so it says imagine that the first view was like a to-do right so imagine this was called style let's just call this a to-do um actually no dude let's do this properly right so this is just a demo right so we're just showing you how to pull in styles and previously if you watched any of our other builds we would have like another file which would have the css inside of it right so what you can have and i've seen people do it before is people have something like app dot style oh it's right here okay okay okay i was like what the is it but okay i understand now first label first label uh this is where it's pulling its styling from okay okay cool yes exactly yeah oh so i see what you can tend to do now is actually have something called um so so let's go ahead and do command b to open up the sidebar hold on i just want to learn how to change the font size to like equivalent of an h1 oh nice is it just text space h so now you just do font size with a camera uh case up let me see what the is happening oh you didn't write it hold on one second let's save let's see what happens did that work no right uh i didn't i didn't add it um no i i added right here okay let me remove that okay so what's the right way to is there a better way to do it because i don't think that worked i'm just curious because i'm just seeing what they might actually accept a few things which might make it easier um you can have nested text you can have normal text but the way that i would do it normally is have it as this so you see here you just can work so typically in css you would do it like this font size right but in whenever you're doing this stuff you just do it like this to your font size and then here we would do something like 6 15 or 16 or something and then let's go ahead and do that save now this should um i think we might have to do is 16 pixels maybe let's go ahead and see if that that reloads let's see that does it quicker um let's make it huge hold on let me do oh so i think it's actually just i think it's just a number actually can i do title tags like that or no oh no no no no i see what's happening okay no that's good you done it right yeah you do but if we do something like so first label oh dude because we're adding the first label sorry this is right yeah so the style shouldn't be here it should be on the text oh so we've got first label and then now all right what we should actually do is we should call it title text title text and that should be better there we go so now it should be sorry there we go so and now if you change this like yeah so and there's a few things to notice right one is the naming so the font this bit changed and also now we don't say pixels i mean we just say 30 right i think you can still use pixels if you're passing quotes um but the reason being for these changes is because now we write the code this one way and it will then go ahead and change it for whatever ios supports and whatever android supports okay um um okay oh nice jason francis says no pixel in size and font weight boat yeah dope that's awesome you know so you don't have any pixels i remember there are slight changes like this but yeah it it it's really awesome once you get faster at this it really clears it up um okay oh you haven't got your rocket started um i do but for some reason it just keeps uh not working in the vs code but now it's working okay okay cool all right there we go right so what we're going to do now is we're actually going to show you how easy it is to make a component inside of react native right so let's go ahead and create a new um a new file kazi called to do dot js all right let's go and do that hey we just got a two pound donation thank you brother he goes no px in size and font weight bold nice handy little tip there for everyone all right what were you saying sunny so let's create a file um called to do.js so we're going to create a component which is going to represent a to-do do you want it to be in a folder or just here um so so we i mean this we can capitalize because yeah so because it's a component it'll be capitalized so to do.js dude apparently vs code has some kind of native thing with to do you see that tick mark show up yeah i saw that yeah let me crazy um thing one thing two maybe if you do like ah oh look you've got that little inspect button at the top right here i'm just gonna i'm just gonna delete it bro it's gone to do that js yeah so to do dot js well capital t capital t components got it yep so now we have to do.js and then we're going to do a lovely little rfc trick which is still supported inside of um react native so you see it's just essentially we're going to make an arrow function we're going to do cons to do make it very simple and then here so you see it's showing up on my phone bro it looks so juicy nice let's build a reality native app we need to change this one because the snippet here is for a dip so i think there may be an art if everyone knows the actual snippet for react native i think there is one for that um i think it's r f react native rfm see maybe let's go ahead no r f r react native f function r n f c e sorry sorry r and f apparently there we go that one so it's f yes you've got with stars oh nice with stars as well oh oh is is this our nfc holy you got a big garnish what though that's a big donation how much is that dude i think it's just i think it's 10 10 over 10 bucks almost 15 bucks thank you so much avinasha says have you been following wait have been i have been following your content since i met you qazi at vidcon last year what the hell or we talked about being a coder and traveling the world oh i know this boy even though i've been coding for 10 years i learned a lot from these bills keep teaching folks to code and make money that is awesome i met him in real life and him and his wife actually um travel and they make vlogs they were making like food vlogs at the time that were actually killing and blowing up and he was talking about how he's traveling around the world freelancing making an income uh and traveling with his wife that's dope man yeah yeah thank you for this and they're still watching oh dude super cool this is crazy i love it all right so now we have you right so we have the to do here uh and then imagine like in here so i'm just going to say i am a to do okay save it and then we're going to go back into apple we go now hype bro check this out okay these guys are ready for this here we go all right now we're going to switch here boom son hey that's it that's what you're talking about that's on your phone right now yeah buddy dude what i was going to show you is you see on your phone um oh nice it's actually it's cropping at the top though quasi hold on man hold on hold on hold on hold on man i'll fix it um damn it's actually kind of tricky to like we'll be able to see it once we go down on the app or maybe add some lines at the top wait hold on should i hit uh where's the actual app can we do backslash n does that do what we want it to do um i don't think so oh [Music] how do we add new lines will that work i think it's how do you know something hold on add new lines react native this is how i do all my coding how do i insert a line break it's okay yeah so you can do an interpolation on it so you do this thing oh you can yeah you can also do i mean we shouldn't really do that yeah yeah yeah yeah interp hold on you don't want to put a new line no because we let's just get it so that we can maybe i mean i think maybe show it as a full screen as a second scene or something and then we just go back and forth from it so we have it looking we have it like this and then when we want to show it on the phone we just go to a third scene and show it on the phone okay so phone by itself or something else yeah just by itself you know because then i think that would work yeah that's it yeah awesome cool so you see on our code right we have this safe area view if i go ahead and comment this out notice how when i hit save now it's going to jump up to the top i think so it's gonna always freaking out it's saying safe area of yours because i have to get rid of that actually let's go ahead and save that and then now we do it it's gonna go so now cause you look in that phone view um yeah it doesn't look good on the phone view right so because you've got a um iphone xs max right or iphone pro yeah i got a yeah iphone 11 pro gonna show your phone to the screen right now and show them without the safe area view show them how it's cropping into that notch all right i will give me one second let me switch this scene to the iphone scene and uh now let me try it yeah you see that it's actually cropping into the notch at the top i think that's kind of hard for them to see i'll actually show them like this yeah so show them your phone yeah look at this yeah so you guys can see like it's going into that we call that the safe area right well and it should not be in the safe area right so to prevent that the only thing we want in that safe area is sometimes you've got like a header and the color kind of goes out into that into that thing but we don't wanna we don't want that to be the case and i see people saying margin top you can do margins and things like that but the goal here is they built a component for this and the reason and the thing about this component is it only adds that padding if the phone that it's running on has that that sort of complication where it has the notch right because some galaxy android phones have a they call like a non-safe area and things like that now imagine if you had to custom code it for all of those things then you're gonna get into some headache right you're gonna have to like account for the different like it might work for an iphone pro but it might not work for other ones so if you go ahead and add that then it fixes that problem so that does it for that now we created a to-do component so let's go back to the the screen so we can see the code go back to the screen oh yeah good point all right i was like i thought we're showing the screen cool and then now what we're going to do is we're going to say import and we're going to import the to-do app but to do components sorry from our to-do uh file okay and then what we're going to do is we're going to render out a to-do here i'm just going to render out three to do's just like this is just pretty much react as we know it right reactors we know and love it so now we save this we should see um i have a to do i am a to do i meant to do right so if we go ahead and save this it's erroring out i think right now uh oh is it involved because we didn't save the to-do file i just saved it to do file now it'll be good okay yeah there we go it says i am a to-do i'm going to do awesome all right so now we can see the three to do is popped up so that's cool so everything works as we expect now we all have known that we've come to understand react and react each component can have something called props right so nothing has changed in react native we can use the same thing we can use props so in this case what we're going to do is we're going to go to our to-do.js and we're going to accept some props okay so we're going to go props and we're going to destructure the props here we're going to say it's just every to-do has a title so let's go ahead and give it a title um and then here rather than saying i am going to do we're going to have the tick mark and then we're going to say call these title we should call these like react native crash course or something yeah we should okay yeah that's cool man we should do that yeah like crash course um and then here also interesting fact uh i don't know if you saw my post on on instagram but it shows you about es6 destructuring and default values if you don't give it a value right now there's no value there right so if if we didn't give it a value you can actually give it a default fallback so you could say like let's just call it like um like if you don't give it a value then it'll by default go to take the dogs out for a walk let's just give it a random example take dogs out for a while and we say that now every single one which wasn't past the prop by default gets take dogs out for a walk i see that is the iphone simulator working now or no um it's it's a bit slow so right now it's not like uh it's not reaching over there see i'm still on that old example i see as in the tunnel the tunnel isn't working um the the simulator isn't working because of the operating system oh yeah yeah yeah yeah yeah i remember yeah so now if we go to app.js and we go back here um what we can do is just go ahead and pass in the title so for the first one we can say like let's just say take trash out so because you need to go to is you just follow me yep there we go so we're going to say take the trash out the second one we're going to say code react native tin devs and then the final one will say eat code sleep nice and now we should be able to save that and we should see that get passed through as props right so now you can see this is awesome right because now all of our react knowledge is pretty much safe to say that it's being carried across to react near right um now we haven't touched on any of the actual react native core things like you know the the header navigation things like that we're just showing you how to get up and running with the react native sort of starting template there's the sort of differences initially and what we can do is after we get this like a to-do app working we can go ahead and introduce some of that functionality um but i think about it with react native they make it so easy dude to have like tabs yeah as well as like navigation stacks so you know that when you go forward and you can hit back and swipe back and things like that dude i just got pretty quick a pretty genius idea what's up oh damn i was gonna actually screen record my iphone screen and then yeah play it as an ig reel with the time lapse so on so basically you'd be able to see the app developing from scratch to like finish of hours of work you see what i'm saying oh nice yeah an iphone we'll do that yeah we'll have it running on on yeah that was like i can't do that because i'm sharing my iphone and trying to do that so it doesn't work well we'll find a way to to capture it do i need this screen or should i just remove it because it it looks for it doesn't even look like an iphone yeah it's not that great um i'm gonna i'm i mean we can we keep it yeah we'll keep it on our screen uh you know the shad screen all right i just removed that screen yeah now i'm gonna go ahead and check on the um text input right so now what we're gonna do is we're actually gonna capture some text right and then we're gonna go ahead and have like some kind of input build and do things like that so previously what we would have done in this sort of uh situation is we would have like an input and then this input would have like an unchanged and we'd call map it to state and then we'll have an enter key and stuff like that but in this case in react native we use something called a text input component okay this text input component we need to import it and then what we do is it takes some props right and then its own little custom prop so uh here what it has is it has a style it has a value so there's two things a value and it has something called on change text so typically we're used to unchange right but in react natives on change text so you see there's just small differences guys once you know these small differences it's really not that bad also bro we just hit over a thousand likes oh that is amazing thank you guys so much for that and also we are actually at 265 and donation that is huge thank you guys so much dollars 265 donation yeah dude that is the house absolutely nuts if you guys are enjoying this so far smash that like button so this video goes out to more and more people and we just hit 17 000 views on this yeah love that dude right so now on the unchanged text so previously we would have had e dot target dot set you know target dot value with that nasty stuff but in rank native it literally just gets the text right so we go ahead and say text and then we need to map it to something so we know about hooks in react right we know how to like this we can capture state and react so what we're going to do is we're going to say const and then we're going to have a value for the input field so we're going to say um value set input so we're just wanting a react okay and then we're going to say use state so this is what we're used to right and then this would be a placeholder here so i'm just going to say um let's say we don't even need a place so we're just going to keep it blank and then what we need to do is import this from react so this goes into literally as we normally understand and no react so we can say import from react there we go and i don't need this one so that's all good and then what we can do is we can go ahead and say uh on what are we working on right now by the way i'm just adding an input field now so we're having an input then so we can type in like something to do right yeah okay so i just and let me just visualize it here so cool something like this and then we just type in things and we'll add them as a to do exactly cool exactly so we're gonna have like some stuff there and then um so forth uh one sec dude um [Music] as far as my sister said i'm just live i'll call you in a sec okay so uh text input value input on change text set value okay there we go nice and then what we do is close this out save and now what we should see is should have an input field if we didn't break something so let's see how the input looks and i think what we need to do is actually set a style for this input field so we should see if it doesn't pop up okay we do have an input field but it's very small so right now you can't actually see it but it's actually if you click under eat code sleep yup eat code click under it okay yep there we go i see it yeah so you see that right so what we're going to do is that's so cool that i can actually use it on my phone yeah man and it will pop up your your text thing right yeah i can yeah i just typed in with my phone and i hit enter and it did it but what's cool is what i'm typing there isn't showing up here yeah that's literally like a running a separate instance on your phone nice perfect so here now what we're going to say is we're going to score this style let's just say it's the um and we're going to find we're going to use some kind of convention here afterwards but um for now let's go ahead and just call this uh to do input oh we just got another donation thank you so much bushetty says sunny kazi keep up the good work you guys make it so simple to understand i love that man thank you so much dude i just got an idea for building um uh instagram reel or a tick tock what if we screen recorded our everything that we're building right and then over a 30-second period so like imagine it's called let's build tinder or let's build tick-tock from scratch in 30 seconds and then it's just a time lapse of the code and the app being built out from start to finish i think it'll be dope man i think we should always be recording the it's been streaming you mean as in time lapse and just have the entire thing in like 30 seconds in a 30 second ig reel or a 30-second like or a 59-second tick-tock i feel like those will actually blow up and get like millions of views 100 that'll be insane because the thing would just be so quick like it'll be uh three hours in 50 seconds oh man let's do it so guys i added this in so we got to do input and then we say styles dot to do input and then we added a height of 40 border color red and a border width of 1. save it we should if we didn't do anything wrong we should see yes now we got there we highlighted it right so what i'm going to do is give it a little bit of margin around it so i'm going to say margin of 20 save and we should get a tiny bit of a margin around that now and that should go ahead and get that around us there we go so now we've got a little margin and what i want now is a button underneath it right so button and again for the button stuff i'm going to go ahead and give a check and guys this is what we're doing is we're literally just checking through the code the checking through how things work uh and an example code and then we're pretty much applying this the same principle and just doing it ourselves so for buttons um they actually are a self-closing component i think you can actually have another one but here we have a button the title of the button is going to be add to do yeah and then it has a special click um yeah 100 go ahead and text us and it's not a bot yeah exactly that's one thing dude that's one thing that i would hate right you know when people say text me and i'm like yeah but i really going to get through to them guys when you text that number you are going to get through to us yeah it's literally us and you can chat with us so it's like that's what i'm always skeptical about when i do it but it's not a bar it's us yeah which is awesome um okay so i had to do and now we're going to say we've got the title and then we're going to say let's just give it a color and leave the colors now we'll just say on press so on press right and now kazi what we want right is when you type in that you're going to type in that that that's of input field yeah and then on press right so when you press the button is underneath so right now you can't see a button so i'm going to go ahead and add the button in now so it should freak out because if we haven't imported the button so let's save it so now we should see a button underneath that in any second that we should see about um expo by the way joseph what was that joseph asked long time ago react cli or expo and i was just like oh that looks like a beautiful button man and it looks amazing on the mobile device too yeah now you got that gorgeous button with the clicking and then what we want is we want it to type like on the phone so check out the app on the phone guys and if you've scanned it you should be able to actually follow along with us yeah sick and this and the cool part is that's going to be the actual native button to an android that's going to be there ubuntu and ios so you see like it will actually look native to the platform that you're on so imagine when we click this we want to do something right so we're going to go ahead and do like an on press and then here i want to trigger off a function so you see it's very similar to like i haven't coded in react native in ages but it's very like intuitive right so let's just create a function called add to do and then this function all it's going to do now is it's going to go ahead and we're going to trigger this when we for the add to do function and we're just going to go ahead and say um and this should work we should say set input no we need a list of to do's so i'm going to create another variable we're going to call this one to do's set to do's and this is just going to be an empty array okay and then afterwards what we're going to do now is we're going to say set the to-do's to be whatever the current to-do's were so we're going to keep the to-do's and then i'm going to just push whatever we're writing right what was that and then whatever we type in the input field it'll append it to that array of to-do's exactly that and the reason why i'm putting it in front is that it comes at the top without much extra coding got it i'll pre-pend it yeah and then we pre-pend it up and then we do set input and i'm going to make this blank so that way it clears the input field now to be honest like i think i think that is literally the same that should work now before we go ahead and test this what i'm going to do is i'm going to render rather than having three stack things like this i'm just going to put a little map so i'm going to say to do this.map i'm going to say map through every single to do and return a to do and i love react because this is showing me like it just shows you how powerful this is like even when you're doing it with a native um platform so then you're gonna say to do like literally pretty much a react app yeah dude it's like you see what i mean like there's minor differences but like you literally go ahead and like oh it's so cool man yeah like and this is going to allow people to go ahead and build apps which is it's just really crazy like we're going to start seeing apps on the app store yeah that people have learned to code from us it's so cool that would be yeah that would actually be dope that would be yeah like guys if you go ahead and release any app at any point in time whether you're watching this video like a few months from now and you're watching a replay and you released an app make sure you let us know like on instagram or anything hit us up on instagram and and yeah go ahead and let us know that would be insane yeah so kazi now what we're going to do let's go ahead and save this file because for some reason it's not saving on my side okay so let's save it yeah and then it should hot reload okay oh nice bro that's dope right [Music] all right let's go um work out in the morning and uh we'll put a add to do we will then um eat 150 grams of protein and then thank um so much philip jones wonder donation appreciate that dude yo this is clean clean now dude can you can you already imagine right hook this up to five days make an app deploy it even for me and you tracking our stuff day to day yeah like we could literally go ahead and do it i'm so excited yes i'm so down for this bro like i can actually see this helping out i'm i'm writing this out in the on the mobile app and it's just such a cool experience come on focus hey look at that guys you see that it is actually it's actually a native app you see the keyboards popped up everything's there that's that's awesome man looks clean dude nobody does it like this right like even all the people who show you how to make apps and never even open up their iphone like to show you what it looks like they're just always coding on the exactly you just want to see the actual you know like it's always cool to see it like yeah um on a browser but actually see on a phone it's like okay it's tangible it's wrong you know yeah it's true also there is another thing called i remember that one um okay so you can also so a button is good right we all know a button does it it's just a clickable button uh you can also have something called touchable opacity um and that's something which i i've used before so imagine you wanted a clickable image or something instead you would go ahead and use something called um you would do this you would have something like this you'd have touchable how do we give it a key or pass how do we give it a key oh good show each other yeah so these ones yeah yeah if you want to give it a key do we just say equals something yeah so here you would just say key equals like this but in this case you would want to give it so it has to be a unique value so you could use a library called uuid um to generate random keys but in this case it's not i mean we're not really going through the performance side of things but what i would recommend is using uh a package called uuidv4 i think it's called can we use that one okay cool yeah that one you can pretty much go ahead and generate random keys for this i mean if you want to do a hacky way you can get the index but that's always a terrible way you're doing it you shouldn't really it's like it's frowned upon way of doing it um okay awesome so that's that's good um dude you know i want to sort of mess around with now so we've we've got already got to do that working right yeah now hooking up firebase and stuff is literally as simple as we've done it before except in this environment so we could do that but that's not going to really be as exciting at this point in time let's try and have a look at something like a status bar or you know like something native to a phone that we can kind of get working okay so let's just have a look on just looking right now at the react native docs so if you look at react native and the core component docs and we can pretty much go ahead and check our um like for example the nice thing with react native by the way dude is if you have a list right you know before you would have to have div and overflow and stuff like that now all you do is surround it in something called um a scroll view and the entire container becomes scrollable oh really are you serious yeah so you don't have to yes you just literally how do i do it rather than i just rap i just wrap all this in scroll view so not all of it so so whether where we map out the to-do's let's wrap that in something called a scroll view right and then what we'll do is we'll drop this down we'll go ahead and cut this paste it here um and we'll tab this in and now if we go ahead and all we need to do is import this save save save save save um there you go and now what we should see oh yeah you're right the the to do's are scrollable on my phone actually yeah so now if you add them so i'm just going to try and test one so you see that yeah scrollable which is nice so now like if you had a scrollable list that's all you need to do to get scrollable functionality um which is which is awesome yeah so you can use some reasons you can use flat list uses a recycler view for better performance so yeah you could use flat lift i'm looking at that now fully cross platform a performance interface for using okay yeah so flat list is something i would okay so i'd actually go ahead and maybe use the flat list instead then um that's pretty cool bro i can't wait to start building that freaking app bro when can we start building that app because i'm freaking getting hungry which one the uh the ps or the the internal could be it could be for anybody honestly um it could be for all students but something where we can just log like uh i mean workout would be fun too i was thinking one with freelancing where people can like log in how much income they made so for example that would be you know if i type in so like for example what i imagine right now is just a very simple version of it would be like if i typed in uh 150 here whoops 150 right here we just have this like uh internal dashboard here and then we can just see oh today all our students combined like we collectively generated 150 dollars yeah you know or if like multiple students put they made 150 then maybe you'll say like oh we made 300 dollars collectively at clever programmer yeah what we should do maybe then in that case we'll make a student app right make like a student app and push you on the app store and that one pretty much will have like a very nice interface they can pretty much go ahead and log their income attach like a picture to it yeah i would want it to be like with proof so for example it needs to be approved by somebody a clever programmer it can't just be like because because otherwise people will just start putting in like 50 million dollars you know they made this week so yeah with this they they will like put a picture proof and then somebody will just click approve and then it's good to go exactly devon gray says i could make that income logging up by tonight maybe a couple nights oh dude go for it i want to see that that'll be that's awesome nice little challenge yeah yeah that would be that would be really dope because i've always like dreamed about having something like this it'd be so cool to have students in one place log their things be able to see it have clear-cut direction of what to do and see collectively that there are other students just like them making an income and you know how like venmo makes it visible to you like yeah other people paying each other you know it's like oh this guy just paid um somebody like 10 bucks you know yeah i wanted to be like that where eventually you can see the avatar of other students and it's like oh this guy just made 500 freelancing on like a upwork project or something yeah that would be awesome man like a leaderboard style like gamify so it's like it inspires you oh recent activity you know like uh this person just made 30 bucks from coding yeah you're like oh i think we should come man that'd be sick and dude you know what's so cool is that the we could have this app built in react native and then the admin app to go ahead and improve and and reject based on the the evidence as people give us yes that could be on a react app just for us oh yeah that's true yeah which we deploy using firebase i mean the whole thing can be done with the react native because i would want the students to be able to use the app to log their activity no they would but then for us as in would you say would you want us to go ahead and do it i mean it could be another we could use it fast as well yeah i mean what are you saying so like react native for the students and react native for us too right for the dashboard side so you could i'm saying you can either do react native or the benefit i would say is have a react native app for the students to log in yeah and then for us as the admin because we would want to not only be able to do it on our phone yeah but also be able to on a desktop yeah so so if you build it in react as a pwa then you can install the pwa on your phone as an app so using react oh so we would have the full we would have a full app using react students would have a react native app available in the app store yeah and you see like crazy right that would be that would be awesome dude that would be awesome benefit of that way is that okay this is something which is actually really valuable also carving commander uh commander thank you dude for care canadian ten dollar donation he says running out of words for this massive value you guys are killing it super pumped for reacting even appreciate this very much keep it going let's go thank you so much calvin always coming in strong appreciate you did thank you that is awesome brother appreciate it yeah so because this is something which uh is is really actually like a quite an important advisor whenever you make an app right so imagine we deployed an app to the app store it has an approval process which means that like you know that when you code an app in react yes you can just pretty much hit firebase deploy and the things up like and it's live yeah yeah literally in seconds i think it's live yeah but if you do an app in react native you need to remember that if you need to bundle the app get everything ready get like the sort of the thumbnail and everything ready for the the app store stuff submitted to the app store for a year yeah and then there's a process to get that version out yeah right so what you would want is you need so so for for the admin side of things you want the constant updating and then you have to increase the sort of you know the views and stuff that we can see for the students we want it to be very controlled so that they can only see and this is really important for you guys because if you're pretty much going thinking about do i need a react app or react native app things didn't like that that you have to start considering yeah so in our case if we were to build this app react native is the way for the students but a react app is the way forward for yeah like us to go ahead and review it see things approve reject yeah oh um jason just said jason is like devin to be honest i'm in the mode for a react project i'd be super down to work on it with you if you're free so they're actually thinking about teaming up on this that's sick and let me see marabon let's go beautiful girlfriend is in the house because love you you guys are smashing it honestly it's it's fun man it's fun being back on on live together yeah those dance videos are sick like i love seeing them whenever they're on like but i don't know she puts like one story in a week of the dance but more of those stories like i i love seeing those because it gets me hyped up i love when people are good at something and then they do it and it's like gets you riled up yeah she's mowing man she she pushes for it yeah um the app store isn't harsh on the approval the app store isn't harsh so jason francis this actually he says the app store isn't harsh on the approval process it took me two days to get my react native app approved rack uses niagara okay so very important thing to mention here it is pretty strict on the approval process trust me like when you get to the apps which are more complicated they can really be a pain sometimes to approve your apps it really depends what your app does so like if you have some kind of like they like it they just get a bit annoying with things so so yeah and uh maiwan says yes she goes i'll post more yeah that's it dude that's it man well positivity that's it to push for it more content for everyone um okay awesome so so okay so cool so in terms of doing that i mean i'm pretty excited to even like build really simple versions of it even if we want to start out with the like our own version of fitness or something i'm down for that too like where we can just drop notes on our workouts the day before but it's like shareable that would be cool or we can just start working on the other project which one do you want to like start with so i think we already have a really strong approach that's working for us we're tracking fitness at the moment um and for anyone who is interested in that we in qazi and rachel and our team use something called done and we track our workouts from that so it works really well for us right now so i think the one that's going to bring everyone the most value is that tracking app so what would be awesome dude is to break down the app together yeah figure out that we're going to need navigation we're going to need a database we're going to need authentication and build the entire thing out together yeah and then we build a back end bit for the admin that'd be dope that would be really cool i mean that is a project i'm really excited to work on and who knows it might take us two three weeks of continuous work but i think that will just just personally you and i that will get us excited as so yeah it'll give us something to work towards every day yeah and we would definitely like not stop until the thing was built out properly and released in the app store that's true yeah yeah so what do you say you want to get started on that yeah so sonic king says would we be able to see the process oh yeah yeah yeah oh yeah you guys will be able to see the entire process from from um scratch okay cool so uh let's maybe do something with it even if it's tiny right now if you're down let's do it dude let's actually so let's think about what we're gonna need um some kind of navigation inside of the app right so i'm just checking something quickly can we start with just this like literally can we start with just this where if you can put in 150 like 150 and i can put in like let's look at almost like a to-do list but just for numbers so it's like if i put in 150 and then i put another 150 it just gives you a 300. like it literally just sums up that i think would be a really good start let's do it okay so um right so so we want two input fields and then it would just sum it up at the bottom yeah yeah okay so we can do that very nicely actually dynamically no it should just have a one it should have just one input field and then every time you enter an amount in there and hit add amount or something or add income it keeps adding it to the total okay so let's do that so maybe maybe let's have two input fields one which says um what did you what work did you do and then and another one which is how much did you make got it okay so like a descriptive field of what you did and hum then the other one is like how much you made okay love that okay that's cool that's cool i can go with that yeah yeah so right now we don't need the to-do.js so we're going to get rid of the scroll view for now uh the view here we can keep the text input we're just going to copy this because we're going to have two text inputs now um the style we can keep for now very simple we're going to need two input fields one is going to be for the description so here we're just going to go ahead and we're going to get rid of this add to do button and then here we're going to comment out this one and we're going to go ahead and say we need to we're going to need description and we're going to do set description because that's a nice little standard that you should stick with and then we're going to copy that the next one is going to be the let's call it the um amount right and then you just set amount amount and this amount by default will be zero and then we're gonna have rather than a list of to-do's we're gonna have a um [Music] what would you call it like the list of of all the jobs yeah list of incomes list of jobs let me think like that list is going to be because it could be a task it's almost like an um income entry or something or entry yeah like an entry entries all right yeah sounds um kind of nasty but i'll keep thinking about it logs no that that sounds worse you could just do entries for now i think that's pretty good yes oh list of gigs that's cool what's up like enter your gig that's kind of cool enter your gig yeah that's actually pretty cool um i got that idea from um somebody who just wrote it down calvin calvin yeah yeah he actually donated earlier as well awesome um sons of king says let's try look at this teamwork we're watching steve jobs and steve wozniak let's go brave baby nice gigs yeah let's do gigs let's go with gigs yeah so gigs that gigs okay and now your gigs will pretty much be um and just to sort of draft our imagine one gig right it would have a description and the one in the description could be like the freelance like freelance job with kazi and the amount could be something like 499.99 that's what we made right so that's going to be one of the objects inside okay and then we're going to have um microsoft to do app just like copied wunderlist so hard yeah i think i saw that was it called this cooldown oh did they buy wunderlist bro and changed it to microsoft to do because like wunderlist it looks yeah they must have done that because now when you look up wunderlist it doesn't show up at all they probably didn't wouldn't be surprised god damn it so now we're going to change this one to the description this one to the amount and this will be set amount so here we set amount like this and now we don't want this to be uh the text input so text input is cool but i wonder what's the best way to have like a number input because text input is all right but we want like a the native number picker to come up on the phone so i think what we would be looking for is um change like a type of text input so i'm just going to type all we should get to today is like literally get to one bare bones graph like a bar graph yep um if possible and then the rest is just like summing up to that one amount yeah let's do it a bare bones wait a number did you say oh graph yeah i mean we can get started with the number i think that's great as a bonus if we could just get a graph that like a bar graph so whatever number you put in it just has a bar graph that represents that total sum but if that is like too much then we can just do that tomorrow or something but like i think working towards this app dude we'll be so sick because it's like actually real and something exciting for us too yes yeah man exactly so if we had a keyboard type right that's the one that we're looking for numeric or number there is actually another one called some numeric so cars on your phone right now um for numeric is that is that there is a good keypad so to get so let me save this safe decision what to say are you talking about oh check your feet let me see okay and check the the so both of them oh this one shouldn't be numeric epic that's exactly what i wanted yeah so well it doesn't have decimal points does it i can add decimals at the bottom is there a dot yeah you see a dog yeah at the bottom can't you everything oh no okay okay it's just like faint on my screen okay perfect yeah you can add decimals perfect so then we've got that on the bottom one so the bottom one is going to be keyboard type numeric so that way we know how to go ahead and get that and then the top one is going to be this and then what we're going to do is i think they also have placeholder here so let's go ahead and type in placeholder let's see if we enter a description maybe if they've got a placeholder you should get the placeholder from that let me just type in yeah we have got placeholder and guys if you're wondering how i i found all that literally i'm on the docs react name and i just did control command f and i'm just typing in placeholder and seeing if it if it pops up um so there we go so enter a description landed a client um and then the second one would be yeah so we could just say i wonder if we could do and this one's our placeholder equals enter the amount you made save i wonder if because it's zero i don't think you'll show okay so i think what we need to do instead is make this um actually blank and save that see if that comes up nice yep you made awesome all right and we can also maybe say in dollars or something yeah um you know so something like in dollars there we go all right so then we've got the enter description to the amount you made and then some kind of button so a button at the bottom which would say um uh uh add i guess or add add add gig or submit gig or add gig so title and then here would be rather than add to you just say gig that's actually a really cool add gig yeah right then we're going to have add gig and then this one is going to be an arrow function and all this is going to do is when you hit add gig it should go ahead and and you set gigs to whatever was inside of gigs unless it's going to be an array still so it's an array still it's going to be whatever's inside the gigs plus a new object which has a description of our description that we typed in can you imagine bro can you imagine 20 30 days from now consistent work on this app and 20 30 days from now imagine the whole thing is completely done everybody was there alongside us as we built every single part of this out and then we hit publish to the app store and everybody just goes to the app store and goes wild on this dude crazy right can you imagine that dude that'll be everyone would be like just um that'll be fun dude and it would be so awesome because every time yeah just oh man is like funny i feel like we should just go to l.a yeah like sonny i feel like we should just go to l.a yeah we should honestly we really do man we need to come to l.a so to do input so we're going to change this to do input sorry you can finish your thought you were you were saying something um no no i'm saying so uh when we actually like guys like we there's so many people are making money and and and it's so hard to keep track of that number like and this and this is true actually remember guys i can't believe you haven't met each other in person it's insane dude yeah when you think about it like [Laughter] how much we've done and we've never actually shook hands like it's insane oh sure bro what's the roi of us using skype and zoom i know right when the next person's next time someone tells me you can't work as effective in in like over remote work and be like shut the up yeah but dude i mean in person would be like at a whole another level dude that'd be insane then we have to record that we'll get like a whole vlog when we do that yeah yeah man um so now we've got this and add gig does that so now it should go ahead and and do description amount okay awesome so that should set the gig and what we want to do is after you submit the gig you want to go i like that gig that's pretty cool yeah i really like that yeah set description we're going to reset that back to zero and as i'm gonna go blank and we're gonna say set amount back to blank as well what should we call this app by the way guys so we'll take some name suggestions because you guys have much better suggestions than us to be honest yeah go ahead and let us know guys um qazi also we want to protect against them clicking add gig before it's um it's right it's uh so the value yeah or whatever yeah like if you if you if you haven't got um an amount or a description you need both to be able to click add gig so to do that go to disabled here so you see here where it says button and they should have disabled so i'm going to just double check so button looking at the docks and we see this ron is like you're both going to cry sonny will jump on you i will dude it's just jump and i just hold oh slow-mo music's worth spitting around [Laughter] literally you just see aaron running behind frankie comes lighting him you just see like amberly and like mirrorbot in slow-mo like what the and then nas just like dances over everybody just like disgusted with this music playing in the background like sunny man i'll be waiting for this that'll be quite a day oh god god damn quran lettie corona rs man disabled if if there is no amount and there is no description so now it should be once i saved this oh my gosh that's cool nice now it's disabled i see that boom awesome why is there an uh a button like how the button looks here looks pretty cool it doesn't show like that on the mobile device but i mean it's it's not that big of a deal we don't have to worry about that right now we can just focus on this for now what was that if there's a the button that looks how it looks here it doesn't look like that on the mobile device it does the buttons here yeah so the reason being dude is because this is the one on the mobile device is native to ios so what you would even have to do is style it so that it's going to be consistent across all the platforms but by default the button component renders to the um component that's on ios or the components on android on ios is the full android button uh ios one on android android got it so we got some cool ones we got my gig tracker we got gig flow gig flow oh nice yeah all right cool so now we're gonna do yeah go ahead so we have everything essentially added in right so like it should be kind of there like it should be inside of our state um and to test it we just want to render it out just to quickly have a little test so imagine we added our stuff in and then underneath all of this let's just go ahead and say gigs.map for every gig we should render out oops it's total very good uh so so we actually first you want to we want to show the the gig now oh oh yeah true true true the total maybe because if we put it at the top total yeah yeah yeah it would have the total at the top like you know the total would rack up at the top and then underneath maybe a scrollable list of the gigs that's perfect yeah yeah so something like that and then we can say like the gig dot description and what we could do here is we can actually you know we'll keep it like this as i'll show you after this we can pick the description gig dot amount and then dollar sign here um capital t for the that one yeah there you go and say this okay so by default it should already have one pre-populated that we should be able to see indie gig in the devs yeah so you see it says freelance job with kazi if i go ahead and say um youtube with sunny uh let's just type in 349 or something add gig boom youtube is sunny 3.9 okay i hope it works so if you now type in the description and an amount it will push to that list at the bottom now oh nice so go ahead and give it a try oh that's sick that is really cool yeah it did don't you see it uh there's a screen mice i don't know why my screen share is a bit slow behind but i'm looking at the feed as well okay dope nice so now what we can do is um so there's a really elegant way of doing this but i always forget so i'm going to show you guys what i end up having to go through every time i do this um oh nice landing clown that worked for 25 dollars an hour did they ours work from 200 though um see even dude like even getting to this point is like it's very like light but it's so powerful because yeah that's what i'm saying yeah we're not far from like the layout to the road is there you know like we know exactly how to get there now yeah like literally this is it like we're almost done with what we're looking for because i want to see this and see how students are doing like at a glance yeah and like within pwg we can make this a thing that like everybody tracks yeah exactly so now what we're gonna do is we're going to go ahead and make it i'm just going to add margin top um so what are you doing the elegant thing is that supposed to be the um oh so i was going to do a reduce to sum it up right so yeah to sum it so you see this this uh total income here um so you could do it i mean there's there's many ways you can do this right um but what we're going to have is every time the um uh the gig basically let's go ahead and say let's have a piece of state called total right and this is just going to be responsible for the total so we're just going we're going to prepare that piece of state now there's so many ways you can do this but the total in the beginning is going to be zero right now we're going to have a use effect and i know what you're thinking like it seems like overkill man why would you have a user effect like that there's a reason being is because this is it's called decoupled code when you code it like this then imagine we was to plug in like a database and stuff like that it's it will just work for the future if we build it this way yeah so like it may seem like far-fetched but it just means that whenever the gigs change recalculate the total which is exactly what you would want if you think about it every time the gigs change you want to recalculate the total right right so what we can say now is you can say gigs dot reduce and i need to always double check i mean i i always forget how to do a reduce off my heart but once i get it right it's amazing the thing so reduce is so a reduce would be give me gig should have a timeline so each person can see like a track history of the gig that could i see what they're saying so each basically like you can click within the gig and then like go and add to it um each one one sec let's do the reduce and then wait wait so he said each gig should have a timeline i see what each person can see like oh i see yeah because because what and like actual entry is different than a gig right like gig is actual like for example if you land a gig with yeah right then you go you keep going into that gig and keep okay right now we don't even need to add that fanciness we can add that as a next step right now we just need brute force logging and income yeah exactly the total i love what amar is saying by the way so i'm gonna like screenshot all the feedback that he's giving us and then uh we can actually go through it later but like it's actually pretty smart so he's even giving examples you see them on my screen like he's like example on january 2 i listed on fiverr then on january 5 someone found me and then on january 20 i delivered it so that's pretty cool i'm just gonna yeah it could be useful yeah is actually really smart to build an app together with people because you're getting live feedback so you're gonna build a great app this way exactly now let me explain this snippet to you and then we can go ahead and i'll show you how to make this even more elegant but you see this reduce right yeah assuming i've done it all right i mean to me it's just like and that says so what you're doing here is and this is what you can even make this so damn elegant so it's to the point of like this right so now is this total a variable that i can uh put like can i use that total right here sunny yes you can make that there and this rather than saying i'm making a little variable here you can just go ahead and say set total and what we're doing here so you can remove should i remove that line okay cool oh nice that looks elegant uh use another that should be defined use effect you have to import it oh yeah good job um reduce is one of those ones guys like even even after coding for the ocean you did um it's one of those things where like even after coding for ages you just forget like you you forget how to do the thing and then you just you quickly check up an example and you're like okay that's how i do it so now look at that dude total income 4.99 right now go ahead and add something holy bro what is this oh okay so that's what we do that's where the issue comes so now you see here it's total plus gig right so what it's doing is it's treating it as a string it's streaming as a string yeah wait because amount because the amount is a string what the is this yes it's changed to you can change that to a zero but the reason why we want that as a zero is because um so you can cast it like that but um what you what you want to use is number so you actually use the number with a capital n that's it and then i think the total the total should buy the so total the initial value you define here so you see this value here let's go i don't need no react let's do it and that's sick all right dope nice and then what we can say is um total income just add the dollar sign before it and you'll get that um what you might run into in some corner cases which i've definitely ran into before is where you have um you add like a decimal in this case we're just doing adding but when you do times income amounts you should use a library to handle displaying a currency because otherwise you'll get like 0.947 and you know like it should be even i know it sounds simple to round that round down but you will get corner cases where that just goes crazy um all right okay good job now uh this as for styling this can be uh go ahead and and whatever is after it as it seems oh nice devin gray says total equals zero or whatever is after the comma if added is assumed to be zero yeah so that's right if we add it to be here it'll be zero if we don't add that i think you're right i think by default it would fall to zero yo sonny i'm gonna install this uh charge yeah okay let's getting good downloads every week so it looks good should we get it yeah yeah i'm just having a oh it's got some beautiful beautiful that's what i'm saying it's looking great in the date yes that's good dude i'm getting so excited because i'll be able to start logging in my income today on it so i'm actually getting excited about it because nothing like this exists exactly okay uh yeah let's give this a try import so let's import this we need to mpm uh npm in store um react native chart kit i did i installed oh you didn't install it okay um hold on why does it keep all right there we go so bar chart and then um you create a view and um holy this looks complicated so we want we want a line chart right so what i would say is literally just i don't wanna i don't want a line chart i just want a i want a bar chart actually but i did copy whoa whoa whoa where did i go wrong i thought i did everything perfectly wait you copied the entire thing right yeah the whole view or should i just copy it from the text um no you can copy the whole view so what we'll do is we'll we'll pull this forward so the indentation always makes it easier so we can that's good and now it's freaking out over what it's saying let's just check the error so save this compile and so we might have some can't resolve react native svg so maybe let's just remove wherever we have oh no that this also could be um because really of svg do we did do it right we did do an install we did react native chart kit but i don't think we did react native svg did oh we have to do that yeah so there's two there you see that install the pair dependencies so um npm i react native svg like that dash yeah svg okay dude i'm not i'm getting excited bro this is sick i love it man because i feel like we're going to start building some actual efforts [Applause] dude i'm getting in my like now i'm hyped for this you know yeah so sick okay so uh also so i saw yes so somebody wrote link i saw a link in a comment right you don't need to do that anymore so whoever if you ever come across linking dependencies you don't need to do that just stay away from that stuff trust me um what is happening okay so now line chart is not defined okay that's a good sign because now it's uh we need to import that first date it just did it nice i can feel my brain engaging with everything now dimension is not what what's the same line this dimension is not defined dimensions um it's getting dimensions from reaction native so i can actually so this is actually from react native it's from react name yeah where is react native oh you got it nice so that should oh that looks good as let's go oh man bro i am so excited bro oh and it's responsive man i'm gonna reload on my mobile device so i can get this chart oh bro this is so good dude i can imagine soon we'll be doing like apple watch apps and oh yes yes yes i want to see how much my students made with my i like apple watch yeah like okay today is a good day we made three thousand dollars collectively okay good day let's carry on today we got we only made 500 what the guys like let's get to work uh wait hold on why isn't it showing on my phone uh because jason francis says look at it on your phone looks even better but it's not compiling on my phone for some reason are you on the lan on your phone just out of curiosity or not uh no i mean i should be on tunnel i'm getting a error that says try restarting metro so is it telling me to restart the expo thing or something uh yeah restart metro is is your bundler so your bundle is working keep that up for a sec let me quickly just grab you hold on let me uh there we go okay so it's building your bundle see yeah okay so while that's loading um so the data points here we would actually go ahead and change to be let's go ahead and would have your labels would be your entry i guess or something like that your people are saying restart expo quit app and restart expo okay so quit out of that who who said that people people are in the in the chat there's like because my mobile app is not showing the thing so they're like quit your mobile app and then yeah so it says unknown requiring unknown module four if you know the module exists that was that was there i was getting requiring yeah unknown module four try restarting yarn yeah it's because of native dependencies okay so in that case you see where we're running the running the bundler so in your where's the terminal i know right here uh oh my thumb was so slow my screen just low so get open the terminal do control c i off and then do npm start again dude i am getting excited bro all right here we go let's tunnel this bad boy scan oh one second did you get it it's downloading it mine's probably gonna take a while because i mean if we probably shouldn't ever continue too far ahead of where it breaks down on our iphone right because if it's not working on our mobile device at any one point that's probably not a good idea to keep going further and further with it yeah so this is where i would say before we go on the next session definitely upgrade or use the imac pro dude or something like that because basically just be on the latest os i see okay yeah because that simulator is actually a really good testing way to do it as in like it will it will do it really quick with fast reloading i see um because it's on your local yeah got it people are actually i wouldn't even you don't even need to be on tunnel tunnels for everyone else um you could just do lan or local and it would be super quick for you okay so so if you change it from tunnel and you change it to uh no just even i mean you could do local or the internet connection appears to be offline interesting uh not working for me for some reason when i do that it says hold on uh it just says could not connect to the server that's all i get bro now so yeah same with me now the download has to start all over again oh no it's going pretty fast actually oh it just flew past everything oh let's go yeah so you just have to rebundle native dependencies that's it holy that is exciting bro oh i got it too nice damn nice you guys can now get it too i'm pretty sure you guys just have to scan this code just hover your phone over and you should be good to go yeah wow that is looking delicious bro that is looking delicious exactly man i will take this view and i will move this view to the top so i will move it hold on every time you move it moves me stop following sonny all right i'm gonna add it right there and save then look oh that was so much quicker than nothing it did oh and i got rid of the i got rid of the padding as well so it fixed that little bug why can't i uh oh dude as you type in it's refreshing the why is my thing dead though you can't scroll no like it says site refuse to connect or something oh because if you need to run it on the the um this may have changed so you need to open your terminal and that should spin off the server here okay now oh look at that that is clean that is clean bro um okay cool so where is now what i want what i want is a bar graph actually so bar graph or would you want it as every entry is i want a bar graph so that i can see like for the sum daily like i want a bar graph for how much the daily sum is so for example it should look like this if i just go if i make it here so if if you get into dailies then you're gonna have to start tracking the date and then group by date to get your data set yeah i want something like how you do it and then you'd be so it's like oh today 100 bucks this day 300 bucks yeah so that so so what we'll do is to show you like in this sense what would say is like number one let's just assume this was the date right so this would be 26 um 10 20. and then here just get rid of these bar chart there we go okay you can't see my um my code i don't think no i don't think so but i think i found the example of a yes so just just copy that bit of code in and we'll repurpose it and then the data is also needed i'm going to keep it in the same view or right is that okay if i keep it in the same view as the other chart one second i'm just checking i'm just putting out the dots as well why is this complaining don't understand why is that complaining so you want the bar chart okay yeah so where are you looking so you've got the bar chart oh i can't put it maybe there to put it there there we go we can we can chuck it in there yeah so where are you bringing it on top another different uh now i can put it here right boom the error says can't find variable graph style okay can i remove style um yeah for now you can screen with okay i'll remove that too so chart config um okay so it actually needs chart config so we can use this um so go ahead and put that back oh i would appreciate if they just give me a good [Music] [Music] were we looking at we were looking for um chart config there we go i found some kind of chart config i'm just gonna paste that up yes something happened just maybe oh yes bro um man it looked way better before not gonna lie with the orange but that's okay you can always go back to that that's not a it's not too bad um what happened to my bar chart to be honest dude actually you know what i'm actually really liking this bezier line chart yeah as in the i think the line charts nicer dude with that because you would have like you would have an a like a an actual curvature to like what you're doing that's that's um that's true that is actually true okay okay okay okay all right you convinced me bro let's go i'm down let's uh throw this stupid config out bro we and guys if we were going to spend more time on that all you would have to do is would deep dive into their source code and you'd see the like use cases and then repurpose it as we'd need it there we go now this bit so let's assume that the first one was the date right so this is going to be the labels so eventually this would be a map so we would just move through this one thing i want to get rid of is the periods after the 1.6 k and stuff like that actually is that fine 25 like nobody says i made 25.8k you know what i mean 25 like you just said 25k or 26k um hey we can change that yeah yeah let's just um but here one like so imagine you had this and then on the next day you would have 27 so the end goal would be something like this nice so you'd be like you know [Music] suffix is k that's cool decimal places um how about how about one decimal place i think one decimal place would be a lot better that's actually a lot better that's actually really cool bro this makes me want to log in there already yeah so can you imagine like so we're just drafting out hard data right now so we're looking at look at how good look at how good it looks on a mobile device yeah crazy right look at that and guys imagine like if you saw that right like and you saw a curvature to your growth and you'd be like right i'm tracking my stuff and um like everything's coming up about them and then you like go down you'll be like oh like i need to get on my like you know yeah that's true we've got 3.7 k yeah and then here okay so y-axis suffix see maybe we don't have a suffix but we have what's stroke width i'm sure that's something else that looks clean bro oh defaults to one okay now if you wanted to tally this up and make it dynamic right what we would do is we would have it so that uh okay so let's get rid of this data object we don't need that where are you this one would not following you so okay hold up hold up hold up still not following you now i'm following you yeah so let's imagine now what i'm gonna do is i'm gonna hard code some data in here and then we're just gonna kind of like go through it so okay so i know how you do you do a group you'd have to group by it and you do a time stamp and you you gather all that by the date right so you gather by the day and then you do reduce so imagine like every single one also had time stamp right yeah and then this was a date right so imagine it was like a new day or something like that like um what you would do is this would be your sort of structure for your your objects right yeah every time we push something in this would happen and then what you could do is you could do a user for the data set so you could do set data set and the way it would do is it would just simply pass this and it would basically go ahead and gather everything on the 27th of november of october um gather everything on 28th 28th of october everything on the may 9th of october and so forth right and and then you can just go ahead and um then you would do a reduce on every single one and get the number for it so your end result would just be one day with the amount yep so i'm writing i'm underneath it right now i'm writing like weekdays just for now but we can of course make it whatever we want like uh yeah yeah so in this case your description amount so let's do it so that way okay so when you whenever you push in it's going to say set gigs let's do two time stamp equals new date just for now is there like a blue gradient we can throw on it instead of the orange in the back or like a blue gradient or like a green gradient to represent more like a background gradient all we need to do is just change the um the from two you just need to find the blue i'm just gonna do something dumb and just see how it looks real quick so i'm going to do green to blue green to green oh she looks pretty good actually it doesn't look so bad right it looks pretty good actually that's not bad and then yeah if we can find something else yeah that'd be cool i'm down with that and what's this uh what if the background was white and then the curvature thing was green that's right so [Music] oh that's too good let's make it black and then let's make the curvature is there a way to make the curvature green background color is that what it is um that's there no that's not this color is the same i think that's stroke yeah that's not it that's the that's the color of the dot oh hold on one second guys if you're enjoying it like smash the thumbs up button i thought this has been pretty crazy right now we've had some good retention 300 people are still watching this which is insane um but what we would do now is imagine you have these dates right now what what we'll do is i think as a like a a good sole point as on this it would be let's have it so that each day or added as so we're like just having fun really realistic but you know let's just do it so let's just make it dynamic a bit so this data over here would be oh yeah yeah let's go ahead and spread thanks all right bro i'm back so that thing doesn't turn or were you figuring out how to turn that like gradient green or no no i was just going to get it so i'll point at least like a functional level today we could be like uh it's just like freelance and then it would be amount you made in dollars like four thousand but then when you add gig it dynamically represented the 4000 on the chart as opposed to showing random stuff oh okay okay got it that's what you're working on right now yeah okay that's sick i got you let me let me move the man i'm tired of following you all right unfollow there we go all right now this would be making the decimal zero holy just giving some kind of crazy error hitting no um fail to compile oh is it because you're working on something right now yeah uh can you finish whatever okay yeah go go for it what are you trying to change um i'm trying to not have any decimal places oh you can change that where is the decimal where was it before yeah i mean how i can change it to one but you can't change it to zero it gives you an error you can try it but it's it it like what does it say when you do that something about infinity something something crazy you can try it it just turns everything into a nan so what we can do is we can come we should get command click it now okay [Music] um that's fine that's fine one decimal is okay it's not the end of the world that's okay okay so and then for the gradients in the back let's see oh that looks like garbage all right i think we can you think green is fine i think for now it would be okay yeah all right all right cool cool yeah i'm going crazy over it all right all right let's just keep moving forward so so the next thing you want to work on is what just so when i type it in it like pop it on this chart yeah so we just want to pop it on the chart so at this point we've got this right here so the data comes in two ways right you've got like the and this is the x x-axis and then this would be the y-axis um and the this first data point would be for monday the second data point would be tuesday if the date for today already exists then it should just increment its total value but if it doesn't exist then it should add it as a data point like so what you have because if friday if friday already exists right then it shouldn't add another friday should just like sum it up to maybe the 16 000 or closer to 13 30 000 as we scale it up what what you'd have to do is if this would be like a you you've got this is where data types and all that comes in so like you'd have to go so let's look at uh go up to the tops line 17 now you would have to have something like this where you would have like your data structure would be some like this like you have this and then you would have something like um [Music] looks like you have this and then you would have timestamp right and then like this would be the date right so you know however the ugly time stamps come through so it'll be like but this would be like that unix date whatever right yeah and then what you would have is um you would have to loop over this so let's just try and give it a go right so i'll show you what i mean because what you want is your your data will define this entire chart not not like you don't want custom logic which says like if this is the day true i agree i agree yeah you want it to be like if if just based on the data just draw out whatever you need so timestamp would be um let's just do like new day and the the reason why i'm doing this is because this is going to be like a hardcoded first value so we don't have to keep entering it so imagine this gets defined and then what we'll do is this one would be the first data point that we had so in this case we know it's going to be today's date so we're just going to write new date and then here you would have let's just say i don't know this one could be tomorrow and then scroll this you can use a library to get these today tomorrow yesterday or that um and then here rather than this we would do is tomorrow can be a random number but for today what we'll do is we'll say let's just say it was giggs just as a test we're going to do gigs zero dot amount times hundred oh just to test this out it's working no it's no it's okay so you see now it says so it's got a timestamp and then it thinks we've made 499 because we've done times 100 so we don't need to times 100 on the amount because the amount is already correct it's not going to be in k so we don't need the the suffix to be k because it's not going to be 500k you don't actually need that one so we can comment that one out save and now come back so you see five hundred dollars yeah right so now we're at 500 and then imagine we had a second data point and i really hate decimals but yeah yeah sorry sorry keep going what's that hate what was that i was just like the i just really hate the decimals on the graph but that's fine but we [Laughter] just grabbing the mic like oh kill the death 7.99 and then this one would be like you would have here i mean this would all be a very clever thing which is defined in a use effect which gets updated based on blah blah blah xyz but then this one will be this and then here dude this game excited to just like build an internal app for cp as well like where we can see the daily sales like this in a super easy way exactly yeah so check this out so now we've got this right so what i want to do now is like just imagine that this was just like the labels were just you know okay so so we need to kind of have a user effect which which you which turns this information into a data set that's all we need like it just needs to turn into a data set and then kind of have an array and then that array is what we use as our labels and our arrays what we use as our um as our data points here so to keep it super simple we're just going to create two pieces of state one is going to be const labels set labels using and guys this is what tends to happen like you you'd maybe create like a a messy piece of code then you kind of refactor it and it will come super clean like sometimes you don't always get to the ultimate position but then you would refactor afterwards and then it would look like so clean yeah yeah you know and then people will be like how did you think of that like and it's nice it's called refactoring that you basically just clean up everything and it just looks like you came to the perfect answer straight away um labels and let's just call this data points okay and then here you set data points actually it's just called data yeah okay we're using react native chart kit for the graph yeah junk exactly the just said angular like probably angular [Laughter] like the live title is react native the everything says react we have which literally says react native right here every word that comes about comes out of our mouth is react so what we're going to do is here we're going to say loop over the the appointment this is not a clean way of doing it um [Music] let's have a look [Music] there's a really nice way of doing this um you say seconds [Music] you just this would be objects uh can you walk me through how we would manually add multiple oh okay okay okay okay so what we're trying to do right now sunny is safe if people make submissions for you know the date of 27th or something right like let's say for the 27th of october there were multiple submissions made of 300 300 and 300 right those are three entries we would sum up the 900 and we would put it together with the date 27th yeah exactly right exactly send that information over to our bar graph exactly correct and then we would use use effect to make sure that we're summing it up each time exactly okay that makes a ton of sense so every time the user fires we will go to the bar chart and find the same date and then update the amount next to it so eventually you would have this you would have like you would have date 27 10 20 or something like that and then you would have a mount and this would be accumulated amount whatever it is check this out bro oh gabriel 20 donation and he goes this is some great content everyone i dare someone to match me right now hello sonny from your pwg oh damn dude i thought i recognized the face of course what's up gabriel yeah hey i love seeing people from our course that's awesome man yeah he goes um oh thank you guys these are awesome comments i love the positivity and thank you so much gabriel appreciate that dude oh arnold says i just realized they were scolding me for saying angular you go someone he goes what happened is someone asked me which is as good as react i replied probably angular thank you i know right yeah so now what we're going to do is we've got date amount um yeah so so the end goal would be to be you you'd want it so that you would pass in i mean what we should do is maybe stop faking the deal let's just go ahead and it would be like you would when you add in it would be the date date by default is today and then what we would have is this would no longer be this it would be our actual date so we can start in by saying this would be date new day like that and save and then we can go ahead and say um you would have to do so basically inside of that use effect you would have a group like reduce i've done this before that's that's why i know like you can do it it's just it's like one elegant piece of code that you end up writing and it's always forgetting i reduce group by uh time by it's date date [Music] dude i think with three hours 30 should we wrap this one at the graph point okay and then start with it tomorrow um the next time we go live yeah oh or yeah whenever we go live i mean it's pretty fun would you be down to go tomorrow oh no no you're busy right you have stuff going on reason yeah it might be depending on purely like when my sister's out but um okay cool dude 100 likes next time we go live let's just build this like at least just end it with not this error screen can we just make it go back this error screw we get rid of one thing we'll go back to where we're at so because there is going to be and such and i know i know what we need to write here it's a group func that we need to have a grouping function which is going to group it by the date and then it's going to it's oh i know exactly what we need and it'll look really good once we do that because it will just basically group it and then we compare that with a library like moment.js and you can do something called from now uh it's similar to from now and basically what it would do is it would show the far out date to be um like this would be 27 28 29 but then today it would say today yeah tomorrow it would say yesterday was a yesterday perfect yeah yeah yeah it has like really good language yeah you would have a really nice kind of user experience i'm really excited about it dude i want to implement this within cp i know this will be awesome like if we can publish an internal cp app or as a team we can click on it and we can just like look at the income and we can look at because everywhere it's a pain like to be able to look at it from putler it's the worst experience ever it's like normal you're gonna log in every time and being able to log into what's up yeah having some kind of evil dude you're right like even um uh the way we do our automated like texting every day like having an actual dashboard with everything on it like which is interactable you can do things with it you can like kind of check more stuff out like that being sent to you every day that would motivate you more than just a number yes it will motivate you like crazy and i think that that's important so that's why and then we'll get a push notification from the top bro yeah you know what i mean like that would be sick to see a push notification of a student enrolling that would be so awesome yeah yeah and you did you know uh firebase uh is is insanely powerful with like push notifications oh dude let's put it all to use bro let's put it all to use like with this i'm actually super pumped let's do it man that'll be sick yeah this is a good app that we can build with and guys let us know by the way like if you enjoyed this and you want to go ahead and see it um like and you want to see us build this out because we're going to build it out for you guys um and and show you guys how we go for it and i think it's awesome because like dude through this live we showed them how we went from not touching react native in a long time yeah and then you i don't think i don't think you've ever have you ever done rank native before uh no no i haven't yeah so like literally like as in we went from that to the you were coding on this stuff like everyone saw that even when we were the issues we went we done and we used expo we came over a bunch of stuff like you guys went ahead and saw all of that i think that's what they loved seeing you know like the real cider coding dude we were like we were on this page this is how it started it's like yeah ooh learn basics hello world that's where we were from wow literally and then like when we finally see the graph pop up and the reactions all that real stuff like i think that's awesome i'm excited dude okay let's stop it here uh especially at this comment where median goes as an englishman i am impressed with the profanity and swearing going on yeah i love it i love that all right bro this was an amazing this was actually a ton of fun i think let's keep building on this this is a great idea because not only are we excited to do this for the people because it brings them value but we are internally excited because we are working on a project and an app and then we can actually publish this and dude every developer's dream to publish your own app and then imagine just start starting to get like five star rating people starting to use it and leave reviews i mean that would be exciting dude yeah man can you imagine because like imagine everyone watches us build it with us like contributes to it because you guys contributed to it like there's plenty of good suggestions coming up with damn ideas yeah yeah name ideas everything it's not just our build it's like all of us are building this together in some ways it's awesome like and imagine we get that app out there app suggestions app improvements that stuff like we can get the app to imagine guys if we saw the app that we're building right now on the app store like like number one or like number two on productivity or some tracking app it would be insane it would be um yeah that would actually be super sick yeah um yeah amar is like if me too he goes if these guys push this to get there would be like a hundred pull requests because joseph was like i want to actually expand on this uh ammar is like me too you know so everybody's like getting excited about it we'll push it to get at some point not today yeah um yeah not today because the code's quite messy yeah we've left it but yeah well i think cause i think we should have it we're almost at 300 donations you see that we're at 298 like 298 oh man hold on i think how much is that like sunny what do you think about uh internal one which has the sales right and then it has like the how youtube is doing or do you think like that would be let's not do that because i think that would actually be pretty i think i think i think pwa with it within any internal tool pwa just purely for iteration because to get a new release out we just deploy and and you can install pwas on your phone like a native app wait how do you do that so how do you install it on your phone i'll show you i'll show you officer they're cool but you know basically we me and kazi developed an internal tool that we use to like to help out with some stuff and the way we sort of handle some internal processes that app causes that we built so a carbon board supposed to castle or i know what it's called yeah yeah yeah so so what we built basically that will like you if you go ahead and click on on ios you can click on the little button at the bottom of the screen when you're on a web browser you know that little hello 300. oh yeah thank you bro that is awesome we're officially 300 exactly revenue on the chat thank you guys thank you guys so much press this button so it says add to home screen okay i don't see it one second hold on show it now so go to so you see at the bottom of your like iphone in safari or chrome uh-huh yeah click it and go down to add to home screen so you see it would be there's a button which says add to home screen and when you do that on a pwa you're actually installing the app to your home screen oh [Music] damn bro yeah so you actually install that and the reason why pwa is insane so there are some hiccups to pwa right um pwas don't have push notifications on ios which is a bit of a pain yeah like they do on android but if it's an internal tool we can use twilio for operations that's what i was just gonna say as a text message we can get a notification yeah okay we can do all our text messages through sms yeah that would be really exciting because i think having some kind of internal thing where you can see everything in one place would be phenomenal yeah i agree then it just makes it super easy you see like the business net worth you see the sales you see the youtube stats you see all of that that would be dope yeah and i think even um metrics that we find that that will that could be like you know really like really like because there's some metrics that we've tracked before that we have found actually this isn't a good metric to track it doesn't really show us much and then we've switched to like a different metric like a daily sort of sale and things like that you know keeping track of that and then pushing that to the team every single day and monitoring who's looking at what and stuff like all of that can be done you know and i think that would actually crush that would be huge all right this was awesome should we wrap it up let's do it dude all right guys thank you so much for jumping on we appreciate your beautiful face if you've gotten any value out of it or entertainment please go ahead and smash that like button gets this video out there for the people other than that i love your beautiful face this is qazi this your boy papa react and we will see you in the next video

Channel: Clever Programmer

Views: 96,764

Rating: 4.9272728 out of 5

Keywords: software development, learn web development, full stack developer, web development tutorial for beginners, web development, web developer, how to become a web developer, web development 2020, web development guide, web development tutorial, web dev 2020, web design, web development projects, web development roadmap 2020, web developer salary, web development 2020 tutorial, web development roadmap 2021, 2021, javascript, javascript tutorial, react, css, html, clever programmer

Id: hggGvwA_tcc

Length: 203min 52sec (12232 seconds)

Published: Mon Oct 26 2020