Getting Started with React Native and Expo | DEVember Day 1

what's up no just developers I hope you're doing great today is December 1st and I hope that you can already feel the Christmas mood around the corner and with that being said allow me to introduce you demember demember is a monthlong marathon of react native tutorials where we will go live the idea is pretty simple we're going to go live with a r native and Expo project during the whole December every single day at 12:00 p.m. GMT so today is day one and the topic of today's video is getting started with reck native and Expo today we're going to learn about how you can set up your development environment how you can create a new project how you can connect it with GitHub and how uh and we will also focus on actually building the core of application that we're going going to use throughout the whole challenge later in today's video we're also going to install exper router we're going to see how we can configurate how we can navigate from one screen to another but before that before uh we actually start working let me quickly tell you a little bit more about demember and what to expect during the next 24 days is it going to be free yes if this is a free marathon it's going to be hosted here on YouTube so if you're interested make sure to subscribe to the channel not to miss any video again this is going to be daily videos and we're going to go live at 12:00 p.m. GMT and you will also be able to watch them later so if you're watching it a couple of months in advance uh I hope you will find these valuable as well because the whole idea is to focus on covering specific topics every single day specific features uh ideas that you might be interested in building and implementing in your mobile application in R native and Expo so for this I need your help if you have ideas we have created a board on uh GitHub where you can submit your ideas and where you can vote for other ideas that you want to see me build during this series so all the links you'll find in the description below um the link to GitHub is actually here here and go ahead and look through for some ideas vote for the ones that you enjoy and also if you want me to build something specific make sure to drop a screenshot there explain the idea and I'll be happy to take a look and maybe include it in one of the future videos but the day is that demember is not just about learning not just very good um demember is also about about giving back because during this event our team decided to support and to create a f fundraiser the fundraiser we called it education for children and with this fundraiser we are joining forces we are helping the save the kids organization with their effort in providing education to every child in the world we believe that every kid deserves the opportunity to learn and with your help I think we can have a very big impact on uh helping them have this opportunity so the fundraiser we set it up on directly on YouTube in order for everyone to be able to participate who wants and throughout this month near every live stream you will see this kind of popup uh where you'll be able to donate the donations are going directly to the save children and nonprofit organization and all 100% of the process that you're going to donate will go to the save children organization not even YouTube is taking any cut so all your support will matter during this month we also set up some incentives to say a to as a thank you for your help in uh raising funds for this uh for for this cause so here are some of the details about the in that you're going to get if you donate uh and make sure to send um send to our email the the receip that you're going to get because from my end I do not see anyone I do not see like specific names of the donations and more details about this you can find on our website no. events Deber and uh if you cannot donate and you still want to help uh we decided to donate $100 for every 1,000 new subscribers that we're going to get during December so by simply subscribing to the channel you're going to help this cause all right that was most of the important parts about demember I'm going to provide more details later in the video where I'm going to answer your questions guys uh but I think we can already get started hello everyone who is joining us live how are you doing guys are you excited about demember and by the way make sure to share on social media and use that hashd and share the projects that you're going to build the learnings that you're going to get uh and I I would really like to see that uh out there and to to see more people joining the the event Navin thank you very much anat hello how are you doing guys let's see if the donations if if the fundraiser is actually enabled so this is the first time we organize this so we are still learning anyway so the uh let's get into the tutorial and today the goal is going to be to get started to set up an expo project and throughout this process I also will share with you some of the tips and tricks that you will need to get started with react native oh Brian hello how are you doing Brian is the winner of not just hack no it's not enabled that's uh kind of sad you do not see it on um on the page let me actually also check let me check that to make sure that everything is working and then we can get started with our tutorial not sure if it's available in every country but for me it's actually visible so if if I go to the YouTube to the live stream I see here donate now and yeah we have more details camera up yes I see already people uh voting for ideas on our uh on our Board of ideas perfect uh don't feel shy also submit your ideas as you can see here I have some ideas of how you can submit ideas just provide some information about it provide some screenshots as a reference and the interesting ideas that we get the most votes we're going to pick for the next live streams um anyway let's go ahead and get started uh whenever I work with r native applications nowadays in 99% of the cases when I start a new project I start with Expo there is maybe still a misconception out there uh of what's possible with Expo and what's not um and I just want to say that Expo nowadays is in a completely different uh situation compared to how it was a couple of years ago if a couple of years ago there were some limitations if you were building applications with Expo nowadays with a config plugins anything is possible so you can have native code in your Expo application so all that limitations are gone but the benefits that we get by by using Expo in our development workflow are still there so the benefits are a much better development experience a much easier way to get started uh in terms of what you have to install and configure on your environment the possibility to uh right away use Expo go on your device even if you for example don't have a Mac OS with Expo go on a device you can still build and test for iOS so yes the development experience is much better and that's why in this series we're going to use Expo to get started with Expo uh let me also go to the documentation in terms of environment to get started with Expo the environment that you need to have on set up on your machine is really really small like you don't have to have a lot of tools one of the most important parts is you need no GS and no GS you can install by going to V nos.org and downloading it from here it's available on all systems and then you can install and after you do that you will uh have access to here is a terminal Let Me Maybe move here so after you install node GS you will have access to node you will have access to npm which is a package manager that will allow us to install different libraries and we will also have access to npx which is similar to npm that allows us to um to Simply run and execute on the Fly some packages in fact in fact we're going to use npx to uh configure and start and create a new Expo project anyway besides node GS we might Al we will also need git and I will show you in a moment how we can use git how we can connect a git repository to GitHub to hosted Veer um so yeah make sure to follow this documentation as well and install git on your system after you install it you will have access to the git um CLI Co command line tool Anonymous donation thank you very much Let's Get It Started guys I'm so excited anyway uh and yes that's everything that we need as a must uh requirement at this moment let's go ahead and start by initializing an expo project and as we go I will show I will also tell you like some additional tools that you might need um let me go to the projects YouTube and here let's make a directory demember demember let's navigate to a folder where we keep our project I created the r new folder and when we are here uh we are going the next step is going to be to initialize a new project with Expo to do that we're going to use npx and a tool called create Expo up that's everything that we need uh but I usually like to put at latest in order to take the latest version of this uh create Expo app uh package and yeah in order to to to have a latest version of it because if I use it before without latest npx will take it from cache and it will not install it uh from the npm registry the next part is the name of a project so the name of a project will be for example demember uh I will do demember test because um I already have this one so I will just show you how we can do it and the last the last argument is a-t in order to um to to select a template from which we want to start by default Expo is providing us uh four templates the first one is a blank it's a very minimal and simple empty canvas of an application the second one is the same blank but with typescript configured then we have navigation which has um Expo router already configured and a couple of screens where are set up and the blank be which does not use um the which has a the the native's code as well I would like to go with a file base because it already has some screens and things set up but in fact I'm going to go with a blank typescript and I will show you exactly how we can install exp router configurate in any kind of project so this is going to be much easier for us to understand all the moving pieces that we have in the application so scroll down until you get to the blank typescript press enter and now we're going to have to wait around 3 minutes for uh export to download all the dependes set up set up our project and then we're going to be able to start working on it to start working on the project we're going to need some kind of code editor of course you can use any uh code editor pre-install on your computer but uh the pref my preference is vs code um so throughout this series I'm going to use vs code if you're using something else it's going to perfectly work so it doesn't really matter what code code editor you are using all right we see when the project has been uh the project is ready so our work with the terminal is finished now we need to Simply open this project in a in our editor uh for that I will open Visual Studio code or actually I'm going to do code dot not code Code demember test and this will open the folder demember test in Visual Studio code if you don't have that shortcut simply open Visual Studio code and go ahead from file open folder and find the folder that you just initialized now that we have our project here the first step I like to do is to actually run the template and see what do we have to work with so let's open a terminal you can do that from the top new terminal or we using the shortcut and from here simply Run npm start npm start uh to to see what actually is happening happening when we execute npm start we can look at in the package.json under the scripts there is the start command that simply executes Expo start now after we execute this uh we see that yeah Expo start is being executed and the Metro bundler is Started From Here we can interact with our application we can run it on different targets uh we can see and debug uh the application logs here as well so this is going to be the place where we will interact with the development server uh the easiest way to save application on your device and to start testing it is uh by downloading expoo application on Android and iOS on your physical device it's available on both markets and simply download it then scan the QR code that you see here with expoo and you'll see the application running directly on your phone that's the easiest way because it doesn't have you don't have to set up or configure anything extra on your computer um yeah I'm not going to show because it's quite straightforward you download sign in with your account you uh scan this C code and it will automatically run on your physical device if you want however to test it uh locally on your machine you will need either Android emulator or iOS simulator uh to run it on Android emulator we have this opportunity both on um Windows Linux and Mac OS uh however for iOS simulator we actually need a ma OS uh system in order to have IOS simulator to have a to install and to have IOS simulator we need to uh install xcode which you can find on uh App Store simply go to App Store look for xcode uh X code like this download and install it and then you will you will have access to them iPhone emulator I'm going to do it like this and after you have it open we can press on I and this will open the application on the emulator itself I have some errors but probably that the emulator is not ready yet let's try again again yes it was not unlocked so now we will wait and our application will run here on this iOS simulator we see a text open up. TSX to start working on your application that means that everything is working our react native project is running and we can already start working at it uh when it comes to Android what you have to do is you have to install some Android tools i' would like to point you to the re native docks and also we will we have a video on our Channel um explaining and showing how you can set up Android studio and so on so in the react native dogs in the environment setup we go to the setup environment uh we select recognitive CLI for example ma Os or Windows and then Android and here it will show you what you have to install to be able to run and to have like an Android SD case the platform and the avd the virtual devices these are the simulators but again this is extra like you don't have to do it if you have Expo go and it's working I think that's that's perfectly fine and you'll need this only when you get into in in in more depth anyway this is our project it's running uh and again let's um let's go ahead and open this up. TSX file that is recommended here in our application to see what do we have there in this file we have a simple functional component and this is the entry point of our application this is where everything starts at this moment a bit later we're going to change how things work we see here a text box with with some text and if we change it uh in our code and save it it automatically refreshes on the device no matter where you are running it in Expo go and simulator and so on that means that uh the hot reloading is also working so we are definitely ready to get started uh the a little word about the debugging whenever something happens usually the best debug tool is of course console log so if I'm going to do here a console log hello where do you think we're going to see this console log we're going to see that in the uh terminal where we are running the development server the Metro bundler if you scroll down until the end we see a log with hello here so yeah you can also press C to clear everything and to get back to the menu and you can press R here to reload the application and when we reload the application our console log is executed and we see it here there is also a console warn which is a warning and we will see it here in the in the terminal and we will also should see it as a as a orange warning here in our application these are simple like everything with orange these are simple warnings and in production they will not be visible everything that is with red for example if we do console uh error or if we actually throw an error we're going to see it with red and that means that something is bad and we should debug and see what's going on anyway that uh is going to be useful for us whenever something is not going to go the way we want it and we will need to to debug and see what's going on behind the scenes so we have have our application we are ready to get started uh but um A good rule of f is to um to keep track of all your changes in the project using git uh what's git well git is a system to uh to I was not expecting me to to blank at what's good uh it's it's a system to for us to keep track of changes of source code so what it help us to do is for example if I do here in the terminal git status it will tell us that hey be uh you have one file that you have changed and this is the app. TSX you can also do git div and that will actually show you here what's that change that you have made so with minus with red we see what we deleted and with plus we see what we added in order to commit these changes to your git uh and committing is basically creating a checkpoint in time to which you can revert back uh later and they are also very good for us to see how the project evolves and to to see where for example a bug was introduced in what commit so after you finish a feature uh the first step to do is of course check with Git status what's going on here after that if we are happy with the files that we want to include in this commit we can do git ad and here we will specify the files that we want to add in most cases like in 99% of the cases that's going to be git add Dot and this means git add everything from this directory and if I do get status now status we're going to see already with a um with a green line modified which means that V this modification is not yet committed but it is staged it is added to be committed with the next commit to create an actual commit that's what we're going to do get commit minus M for the message and here we provide a message that represents the change for example change to hello world now if I do git status we will see that git status it will tell us nothing to commit working tree clean so now we have this point uh in time reference of the changes that we have made but so far the repository the git repository is only local on our system it's on our machine it's basically a directory here in our folder so if something happens if something bad happens with our machine if we we lose access to it if someone steals it uh we if we lose our laptop with our project that means that we completely lose the whole source code that we have been working on for that reason there are uh there are platforms where we can store or host our git repositories so if git is the system that actually is doing the heavy lifting of uh managing with differences uh and create all of these commits GitHub on the other hand is the platform where we store where we host our repositories to create a GitHub uh repository create an account then go ahead and create a new repository choose the account that you want to store it on give it a name for example demember I will do demember test because I already have demember and I'm going to show you that in a moment give it a description and you can make it either public or private and that's it that's everything you need to do press create repository and GitHub in the next screen will have a quick setup guide there are two parts for example if we do not have yet a git repository we're going to have to run g in it we didn't have to do that because the template of Expo already had git initialized and we only have to continue committing uh changes so we're going to use the second part of the GitHub here to push an existing repository from the command line let's copy the First Command and the first command is simply connecting our local repository with the remote one from GitHub now we actually don't need this one because by default the the M the the main branch is called main uh and we can go right away to the last one G push dasu origin main if we execute this command we're going to see that that something is happening here and if we go back to our GitHub and refresh the page we already see the files from our project if we look here at the commits we're going to see the initial commit that is coming with a template and the second one that I created so we can go ahead look at it and see exactly what changes were made during this commit so this is going to be important for you during this Pro during this challenge if you will want to see the changes of every single day that we're going to do throughout the the tutorial um the next time you do some changes for example if you add one more text here let's do hash dvber after you create a feature after you fix a bug after you do something and you test your application make sure that okay that's I'm ready to to commit this change go ahead open the terminal and start with Git status you see the files that we modified if you need to look at the differences you can also go through G div it depends like how many how much changes did we did you make um and after you're happy with the changes go ahead and do git add to to add all the files from current directory to that staging area and after that git commit with a message demember here it committed but that means that it committed to the local repository so at this moment these changes are only locally on our computer because if I go back to our repository and refresh it there is still two commits and the LA last one is 15 minutes ago or four minutes ago let's say to push the changes from locally to GitHub all we have to do is do git uh git push and that should automatically push to the main the current Branch the current local branch Branch to the remote Branch so now if I go back to GitHub and re refresh I'm going to see free commits and we see that the last change to upd TSX was now and you can also again check what exactly was changed here so that was a very short introduction on how you can use git um most probably a lot of you already are using it throughout uh your day-to-day job but for people who are just getting started I think this is is a important part that in most tutorials is skipped and I hope you you you enjoyed that now I want to show you how you can clone an existing repository uh because we're I already have set up the repository for this project so for for um for demember I'm going to find it here here not just D not just /d demember and here is the initial project where we also have the discussion with ideas let's see if we have new ideas here yes we see calendar integration nice mobile app for Shopify store Shopify has a graphql API okay that might be something interesting tracking item nice all right uh also don't be try to submit also Q&A uh and I will try to answer your questions during our live streams okay so far we learned how to set up and create an expo project and how you we can connect it with GitHub to uh keep track of our changes now I'm going to show you how you can clone an existing repository and how you can start working uh at the demember I'm going to have um a very structured way where we will have a separate Branch for every single day and you will be able to have the starting files so that everyone starts from the same point and that's why uh here is is some short instruction on how we can do that whenever there is a project on GitHub for example that we want to try it out we can do if it's public we can do that by going to the GitHub repository and from the here from code we can uh copy the Clone URL here let me copy the URL let's go back I'm actually going to close this Visual Studio code and I'm going to be back in the terminal in the terminal we have here I will do clear and if I do LS we have a demember test that we just created now my goal is to clone the demember project and that's going to be uh the same for you clone it and we will start working together at it to do that again go to the repository press on the green button code let's copy the uh clone command or URL let's go back to the terminal and the command to clone a git repository is quite straightforward it's git clone and then we provide the URL of a repository that we want to clone let's press enter and what uh what is happening here git will download all the files from the main branch uh from from this repository now if I do LS here we're going to see two project demember test and demember that we just cloned let's go ahead and open demember in Visual Studio code and this is exactly the same starter project application as we saw before but there are some things missing for example we see that it cannot find some of these modules that's because now as we can see we do not have a node modules folder this folder is ignored because we don't want to store all the external dependencies in our git repository uh we only store their references in package.json so in package.json under dependencies here we specify the packages that we depend on and V versions now if you do npm install npm will look in the package.json and we'll go ahead and download all the dependencies that we need it will store them in node modules so now we have everything that our project and that depends on after this is finished we can open back up the TSX everything is looking fine here uh I'm not sure what's happening here maybe yeah everything is looking fine here so we can go ahead and start the development server for that open the terminal and let's run npm start from here we already know uh a deal I'm going to run it on iOS simulator by pressing I you can do you can simply scan V QR code or run on Android as well if you're working on a Windows or on a Linux machine and here is our application uh the starter point the similar as we saw previously we're going to continue working using this application using this repository and you will find the link to this repository on the actual page in the description of this video so all the links will be there in the description all right so that was the getting started part uh I hope we are ready to actually start working on some exciting features because the next step is going to be to create the core of our application and what do I mean by the core of our application is that my idea is to have the initial page to be an advent calendar and an advent calendar looks something like this this is my inspiration something with 24 cells or boxes uh and every single box is going to be a separate folder or a separate page or group of pages in our application and during every day we're going to work in the same application but at the same time we're going to try to have everything separate into a into a folder and we bucket so the goal for today is to actually create this Advent calendar uh using some uh lists we're going to learn how we can uh render uh text how we can work with build-in components like views how we can style them and also we're going to set up export router for the navigation we're going to see how we can navigate from a screen to another so it's going to be fun it's going to be fun uh but before before I do that let's see what people in the live chat are doing how are you doing guys are you excited about this have you started uh will you follow along that's that's what I'm curious about how funny I just built a calendar myself uh Simon that's nice uh this is not actually going to be a calendar it's going to be very simple like 24 boxes um but yeah as we move on maybe we can improve the design maybe we can add some animations who knows right code I have two apps in stores that are using Expo super easy to update yes uh updating is another benefit of using Expo because updating an expo application is much easier than updating a Rec native C application because what's the difference the difference is with r native CLI we as developers are responsible for also for the native side code for the Android native side code and for the iOS native side code whenever you install and set up some libraries um usually if they have like native side code you have to go to your native side project and change some configurations now whenever you have to update you have to make sure to update all of these configurations as well so when you go to the native side like there it's always a mess because yes we are uh most most developers that are getting into rect native are probably coming from the web and we don't want to mess with a native side part with the Android Studio with u with aode and so on while when using Expo we are only responsible for the uh JavaScript side of our project and Expo is taking care of a native side projects now this thing um with uh with Expo uh plugins we can have like some configuration files that will tell Expo how to set up the native sites so with this in mind like uh it's very very easy to to update currently I'm learning rect Jaz and this is the perfect time to follow along with you perfect uh we are focused on react native but things that you're going to learn here will help you understand better reack Jaz as well when I started I started with rack native and only then I went to to rjs and to the web so that's that's also very a very good part and also we will try to run our application on the web as well with exper router that's super easy let me see some other comments and then we can continue our application I'm using Expo for all new project as its best uh feature is upgrade I have for your world rck native project with which whenever I need to update uh it takes two years of my life that this is where Expo shines really yes will there be explanation on how to set up EAS locally what I recommend uh you to do is go ahead in the ideas and let's say let's create a new idea for EAS um yeah let's let's just do yes um yeah yes I think it's going to be pretty clear fundamentals uh configure build submit maybe pre-build and if you're interested make sure to come to these discussions and up voted Navin is saying uh that um he can it's saying you cannot donate in this country or region uh Navin let me know where are you joining it from I will have a look what's happening there and we'll check what other possibilities we have in this situation are you covering things like Redux API for interacting with camera and other Concepts important for mobile apps that's the whole point of the demember uh marathon is to cover this fundamentals and very important topics but at the same time I have like a real like the the feeling of doing some some nice project or interesting stuff something with animations something that we don't usually do uh but it's it's going to be something interesting so yes we're we I'm open to cover anything that you guys are interested in so make sure to submit ideas on our idea board make sure to vote for the ones that you're interested in and based on that I'm going to create the with content schedule but things like interacting with camera this is um most probably like it's it's going to happen so we're going to do that I also plan to do something with microphone phone and with audio recordings with playback and for that we have here in the idea board the iOS voice memos uh and this idea came to me from someone asking me how they can do the wave um here and building it is going to teach us how to work with microphones how to work with audio playback uh maybe how to store on the local device like files and data top how to access the idea on GitHub uh let me do here discussions and I will drop a link here Travis Bernett donated $5 to the fundraiser thank you very much Travis for your donation and for everyone who is just joining uh let me repeat this once again so uh demember is not just about learning yes we're going to go live every single day with a new rck native tutorial but the whole goal behind this is to uh raise money for a very uh interesting cause uh let me where is it here so so we are raising money uh with a goal of uh education for children and we have uh all the money that you're going to donate will go to the save a kids organization and this is organized through YouTube so if you believe that uh if you have a possibility to help that would be uh very very appreciated by us and by everyone else so yeah check it out somewhere on YouTube You'll see this uh popup with donate and where you can show your your support and if you cannot donate simply subscribing to the channel will help because we decided to donate $100 for every thousand new subscriber that we're going to get throughout December use react native in my work every day love this idea thank you for Content thank you very much Travis that's perfect okay guys so let's go back to our project and as I said we want to do something with Advent calendar actually beforehand um before the live stream I was playing a bit with the mid Journey AI to get some inspiration for user user interfaces let me find something that I generated we will not use it like Pixel Perfect but it's going to be it's going to give us some ideas of how we can structure this so let me see let me sign in quickly and and here are some of the pictures some of the user interfaces that it generated where here so initially it was something like this very nice uh Vibe of Christmas and so on but but not exactly what I wanted then I said like I need like some kind of a grid with some Christmas en coding elements and to be honest this is something that I like the most out of everything then I try something else Dam that's it looks really nice yeah it really really looks good so yeah something like this well the idea is that we will definitely have some kind of boxes a list of them and with a number inside it let's go ahead and start building and we're going to see what looks better as we go for that I'm going to open up. TSX and I'm going to start working here defining and creating the components and later we're going to extract them to their separate custom components let me go ahead and start by deleting the text from here make some space space and that's where we will put things the component that we are going to work with is we're going to start with a view and a text a view is a simple container that groups together elements we can apply styles to views and that will allow us to build these boxes with round corners so let's start by rendering A View to render a view uh we have opening tag we have a closing tag and inside here we can put other elements that will be visible on the screen because a view itself is nothing visual what we want to render inside the view is some kind of a text for example the number of the the day number for example one and I already see one here if I'm going to copy paste this one more time and change it to two just to see what's happening we see it there now let's style a bit these cards to style in rank native uh we do not have CSS we style everything with JavaScript objects but the Java the The Styling in JavaScript is very is inspired by The Styling from CSS so you're going to see a lot of things that um are similar to how they are called in CSS anyway using the Styles shet create we created this kind this objects and in our rendering part we assign the styles to different components for example if I will create here uh the I don't know box container with a background color of red and a text with a color blue nothing will change because we just Define the Styles we also need to assign them to uh some components to assign it there is a property called style and most building components have this style component and here we will access the sty dobox for this one we already see that the background there is red and if we give to this text styles. text I'm not sure if it's actually blue ve but maybe it's just too small for example we can increase the font size of this text to 50 and now we can indeed see that the text color is blue I'm going to copy paste again uh because we need to assign these styles to the second box as well and I will call it two and let's go ahead in our component here and actually start shaping things up for example the Box itself probably will have some kind of whiff let's start with some 300 weave by 300 height later we're going to think about like how to properly position them um and let's also I want to add some spacing between these boxes uh one way to do that is to add margin to The Container itself so for example margin 10 we'll add 10 pixels margin to the all sides of our boxes but this is a bit harder to to manage in specific situations and another way or a new way that was introduced in rnate is to the property gap which was available in CSS for a very long time but in R native it was introduced this year and if we provide the gap on the parent container it will have this exactly 10 pixels gap between the items and this will work both horizontally and vertically and it's much better especially when you are working with greets now for the background color here let me actually open the laptop because I have some some color is VE I'm not sure how good they are but it's going to be better than just having a red color ve so for the color itself I think I think I have uh F9 e d e fre is it F9 Ed E3 Maybe the text color is a darker brown 9B 4 5 21 okay that's good and the font size I think it was S70 in order to align that text in the center of a container we're going to use some Flex properties because the text is inside this box view let's go ahead and add some styles on the box that will specify how do we want to align CH uh the children elements inside the box for example if we do justify content Center this will Center horizontally or in other words it will Center the items on the main axis now if we add a line items Center this will align them on on the secondary axis and in this case it will align them vertically in the same line that's good uh for the Box itself I can also add a very light border border with one and Border color can be the same as the text color and a border wave of one is probably too much and we can even the 0.5 or the smallest border weave can be accessed by using Styles shet dot hairline with this is the smallest border that we can have it's very very thin to round the corners of our box it's also something related to The Border it's border radius and we can provide a value here the larger the value the more R the more round the Box will be so at 20 will be like this and if it's too much like 150 is going to be a circle I don't know 20 might be okay for for now nice uh okay okay okay n is saying let's help VM reach 100K subscribers by the end of the serious Let's help him in return guys thank you very much Navin that's not the main purpose of the serious but it would be really great to see this happening by the end of the year and yeah it will mean a lot to to the whole not just Dev team anyway back to our project uh um yeah what what else what else well in a bit in a moment we're going to also think about uh font fonts I will show you how we can use a custom font uh but now let's still focus on a bit of how we render things because at the moment as you can see we are simply copy pasting The View that is rendering the the box over and over again so if we will need 24 view 24 boxes we're simply going to have to do 24 views like this um copy paste whenever you are copy pasting things in while programming that's a sign to uh to think about how you can um refactor it how you can reuse code how you can have reusable pieces of code so what the first step to to improve the duplicated code blocks here is to actually have an array of data and then map through it and create an array of elements on the screen what do I mean by that first of all let's define this array of data for example const days equal 1 2 and three now instead of copy pasting this view over and over again what we can do is we can map through the days and for every single day to render it inside a component like this how to do that well that's a very common thing that you might you will encounter while building applications is mapping through arrays and rendering components on the screen on the UI for every single element in an array to do that first of all we need to open a pair of uh curly brackets and this gives us access to JavaScript variables for example now in these squirly brackets I can access the days array what I'm going to do is I'm going to map for the D array and for every day I want to render something on the screen what do I want to render well one of these boxes so if I have it like this and I will remove the rest from the bottom I will see that we already have three boxes on the screen if I change something in the array that's going to change automatically on the screen well the number here is the same for both of them because we hardcoded it usually we take that data about the the actual item that we are rendering and to access it again in this text instead of one we will Open corly brackets to get access to JavaScript variables and then we're going to use the day here that represents one item from this days array and now now we see that the first one is one then two if I change here to six it's going to reflect on the user interface automatically um Yes again this is very good for limited for lists that are not too long uh for example when you know how many items you will have at maximum on the screen for example in this situation this is perfectly fine because we always know that there will be 24 for items on the screen there is a better way and I'm going to show you in a moment but while we are still on this days do map uh you might and you will see one warning and the warning says each child in a list should have a unique key property what does that mean that means that whenever we are rendering lists using a map or dot for each or something like that every item that we are rendering on on the screen it should have a unique key here for the value of a key we can use that day the day because the day is going to be unique well if you have duplicated days here you're still going to see the same error so make sure you have a unique value there this is purely for uh for react to better optimize how it reeners components so it's not if you don't have a key it's not going to break your application but if you have it it's going to improve the performance of it so always when you map make sure to have a key on the first component that is being rendered perfect now uh what I want to say is um I started this a little bit earlier but the dot map is a very good solution when we have limited amount of items but the dot map is quite limited because a lot of things we have to do ourself for example managing the key we have to do ourself if we have a lot of items here the container is not going to be scrollable so we need to manually make it scrollable and other things like improvements and so on for that reason when we have to work with larger uh lists that maybe have an unlimited amount of items for example a Facebook feed a social media feed or a list of items that you load from the server in that case we can use a component called Flat list from react native I will leave this map here uh we will delete it in a moment but now let me show you how we can render a flat list so a flat list we will Rend it the same way as we rendered the other components here but it's going to be a self-closing tag we are not going to close it separately as a different tag we're going to close it in the same opening tag here because we don't need anything inside a flat list is being managed through properties and it requires two properties to get started the first one is data which should be the array of things that we want to to to to to display to to work with and in the if we compare it with a map the array of data is this days because we want to render them days on the screen the second uh property is called render item the data provides information or data and render item is a function that should specify how one item from this array should be rendered on the screen well if we look at the S at the dot map we have similar logic like we have data and here we have we specify how do we want to render one item from that array so back to render item this should be a function that returns some GSX something to render on the screen we can take this view because that's what we want to render we're not going to need the key anymore and initially for the day we can say one here I will comment out the days. map not to to mess with everything that we are doing and we already see one one one on the screen the good part is that we can also scroll this array this list of items perfect uh now how do we dynamically get the data that we are currently rendering v data that data is going to be passed through here inside an object with a name item so that's why we have to destructure we have the destructure from that object the property called item and item is going to be one of these values from the array we can use it to render it inside the text component as item and just like that the the values are filled in correctly and now we can have a very long array here of items and as you can see like with flat list is much easier because it automatically manages the scroll view it automatically manages the key if your items have IDs and it also is very very configurable for example you can have a horizontal list by simply passing here horizontal and now we will be able to scroll horizontally we can also use a flat list to have infinite low scrolling lists where when when whenever we reach the bottom of the list we do a fetch to get more data to load it below this is very useful for feeds for example where you progressively load more data as you scroll through the list now I'm going to delete the the map we're not going to need it anymore and we're also going to fix some of the some of the stuff that we have here the first thing is that the the flat list itself is it doesn't take the [Music] whole with of a container that's because this container has the Align itemer Center and justify content Center which messes around with the positioning of the flatlist so let's simply remove this and now the container the items will start from the beginning that's okay but the scroll indicator is going to be to the right which tells us that the flat list is full with well we lost the gap between items but why because the container still has this Gap well we lost it because now the parent of our boxes is no longer the container but something inside flat list the good thing is that we can style that uh container by sending to the flat list here content container style so we can say here styles. content and if I provide here content I usually like to start with a background color red just to see what's happening if I see what I expect to see that means that everything is good and I can what I wanted to do here is I wanted to move a gap from the container to the content that drops around our items perfect now the gap between items is back and we can move on what I want to do is actually I want to have multi column uh lists I want at least two columns on a on a mobile device maybe on the web we will need more columns with flat list we can simply change the the num number of columns using the num columns property and I will say two it will give you an arrrow because we cannot change it on the Fly and we simply have to re refresh the application by double pressing r on your keyboard r r will refresh we see that it indeed created two columns and if I reduce a little bit the the width and the height we will see the the two columns that we we need it I can do here also a six but how do we make sure that our items they take the full spa the full available space well we can do that by instead of sending the we maybe we can say that by sending a flex one I expect the box to try to take maximum amount of space but at the same time share it between the the the siblings so on the same row we have two items both of them have a flex one which means that both of them will take half of of available space and this way we have uh on the same row we have them correctly for the height in order to have them back as squared uh we will not be able to set a height uh that will match this this whff because the whff is dynamic and will change with the size of a screen however we can set an aspect ratio to a view and if it's one that's going to be a square if it's one/ two that's going to be a vertical part so with aspect ratio you can calculate the other um so if you have with uh and aspect ratio the height will automatically be calculated and vice versa if you have height and aspect ratio the we will be calculated now uh why did we lose again spaces between items in the same row because between the rows we have a gap of 10 but between the items in the row there is no Gap well because every uh row is encapsulated in another view the good thing is that we can uh align V we can style that view as well using the U something with style let's see column rer style this is going to be the styles that will be sent to a view that DRS our color so if I do column here and I go to our Styles and give a gap 10 that will add the gap between the items here now if we want some spacing around our items I think we can do that you by adding some ping to the content if I add pading to the content 10 then that will add pting to the left and the right top and bottom of the whole container or content of a flat list okay and I think that's uh that's perfect that's our list uh what I will do now is let's add all the 24 days here we can manually do that where we can generate an array from using some some some array methods so for example generate or create an array of n [Music] elements okay so from for the days we're going to start with creating an array of size 24 and we're going to destructure it inside an array and now we are going to have actually 24 slots but all of them if I do console log days uh we're going to see that all the Val vales are undefined so we need to fill this array with some values we need to fill them from 1 to 24 to do that I'm going to map through this array and this is the value that we're going to receive but as the second parameter of this map we can get the index so what I'm going to do is I'm going to take the index and use it as a value so it will start from zero all the way to 23 and actually I'm going to do index + one in order to go from 1 to 24 and just like that we created an array of size 24 uh where the values is from 1 to 24 what else what else do we need to do um the problem that our items are going behind this Notch we're going to solve that a bit later uh now that we have this flat list I want want to show you how we can extract things to custom components and why do we need that again this goes back to when I said that whenever you copy paste pieces of code think about how we can improve that by creating reusable components reusable code blocks reusable functions so a reusable think in uh when building re native applications and also rejs applications uh the the way to think about building the UI is by having Lego bricks where you have small building blocks you create bigger things with with them and then you use them to create even bigger things for example on a very small level we have a component that can render a button we can use this component to create a form component then we can use the form component to render it on a page that has a title the form and some buttons so all of these things if we create custom components and if these components are defined properly and reusable they will make our our experience much better developing the application because we will not have to reinvent the wheel over and over again we will not have to copy paste code logic and styles from screen to screen whenever some things are repeating we simply put it into a custom component and use it whenever we need that uh that thing what is something that something that is repeating on this screen what do you think well it's obvious that one of these boxes that renders one day in this list is something that repeats over and over again in our component in our code it actually doesn't repeat that much because we are using a flat list but anyway uh it makes the flat list like harder to understand and if this component will uh grow in size and complexity it's going to be harder for example to add state or use effects and other logic to this to this cell to this item so for that reason let's go ahead and extract one of these cells as a separate component to do that I'm going to first create a new folder called SRC uh where we will keep all the source code during this project I'm going to create also a new folder called component and here we're going to keep all the components inside here I think I will create a core folder that will contain components for the core application and later I'm going to have a separate folder for every day to to to structure and to group them together logically now inside this uh core component what we will do is we will create a file and this file usually We call we name it with the name of a component for example in this case is going to be day list item. TSX so what is a custom component a custom component technically is a simple JavaScript function so it's a function that can be name function or Arrow function they list item uh and what makes it a component is the fact that we are returning some GSX that we want to render on the screen for example we can return here what we should actually return here is from up. TSX with View and text but actually let me first start here with a text day list item and as we can see the text that we are using here should be imported at the top of our component from rect native that's it that's the minimum of a what makes a a component in order to be able to use this component we will need to import it somewhere in our application and for that reason we need to export this function what I'm going to do is I'm going to export by default because the rule of f is to have one component per file in some cases you might have multiple components and in that case you're not going to export by default but you're going to export function I'm going to keep default and let's go ahead in up. TSX import this component and see how we can render it I'm going to open up. TSX to import it at the top we're going to do import uh day list item from Source components core day list item okay we imported it I'm going to comment out the flat list for a second and let's see how can we or maybe I shouldn't well well yeah let's see how we can render the day list item component that we imported well we do that very similarly how we we used so far built-in components like a view a flat list and so on we open the angle brackets we call day list item we either self close or we add the closing tag and just like that we are rendering the day list item it's very hard to see because it's very here at the top so if I will I don't know do it multiple time we're going to see day list item day list item day list item that's it that's how we can render custom components uh let's go ahead and actually render here what we need because we don't need a text we need from up. TSX this view from render item of our flat list that has the box and the text inside the view should should be imported from react native together with the Styles shet because we will have to define the styles for the box and the style for the text usually what I like to do is to go back to up. TSX copy all the styles from here go back and paste them here and delete everything else that we don't need we need the box and the text so the container the content column we don't need we're going to leave the box and the text here and we still have this problem with item I'm going to explain that in a moment but for now let's just say here one and just like that we have a lot of ones on the screen and we are coming from us rendering day list item over and over again I'm going to remove all of them and I'm going to uncomment the flat list because I'm going to use the flat list and instead of rendering here A View I'm going to render a custom build component called day list item so now we should see 24 boxes with this day list item with the same style in up. TSX we no longer need the styles for the box and the text so we can easily remove it and this helps us keep our components small and simple for example ab. SSX is responsible for the list itself but the day list item is responsible for rendering one item this way we separate the concerns and if we have to work on specifics about one container we're going to come here we're going to be able to look at what's important Like Only The View and the text and if we have have to work on the whole list for example let's say we want to remove a scroll indicator we're going to go to up. TSX and work with a flat list without having to see the low-level details of a day list item so yeah that's how we separate things into custom components uh in order to have a better code base in order to easier maintain your project and to have a Everything clean the problem at this moment is how do we pass data from this flat list for example how do we pass the item which represents the day number to the day list item here for that we have props and properties are a way to send data from a parent component to a child component simply passing data from the top to the bottom the parent component in this case is our application and the child component is that day list item sending a property we already saw that even if you didn't uh didn't understand that that's a property we did that with style for example for a view this is a property this is the property style over view in a flat list in general we have 1 2 3 4 five properties sent to this component let's also do the same with day list item and send here a property called uh day which is going to be and the value of this day is going to come from the item so when we render the first one the day is going to be one the second one the day is going to be two and so on because that's our array of data all right that's how we send data but how do we receive it on that day List It we receive it simply we receive it as the first uh and only parameter of our function and usually that's called props if we take the props from there and do a console log props or maybe even instead of one here if we say props Dot and we need the name of a property the name of a property is the name that we sent here they we specified here because yeah and just like that all our items have a different number and if we look in the console log where we are rendering the props we see that the props is an object with the keys representing the properties that we send here and the values that we send so if we're going to send here something else for example hello and the value is going to be World we're going to see that if I refresh and scroll down that every component receives this day for example 16 and the property hello has the value of world the names here are very important because that's how we access them inside the component from the properties now to use some yes um some Modern JavaScript um shortcuts we can write away the structure value is from these properties well the properties is an object so if we destructure if we know the name of a of the fields we can right away destructure them here for example if we need the day we can destructure it with this syntax by having cly brackets and the name of the field and now we don't need the props anymore we will call day right away like this and just like that we have it working uh if you're new to typescript and you are afraid of that you can stop here but if you still if you also want to learn a bit of typescript we see that uh there is a red squiggly line under the day saying that the day has an implicit type any that's because we didn't specify what should be the properties of our component what should what data do we need uh to to send to this component when we want to use it to Define that let's create a type we can actually call it with the same name as our function and here we need to specify what data do we need well the data that we need is the day and the day should be a number so I'm going to say day number the error is still here because we need to specify what type is this object object so after the object we do semic columns and we specify the type the list item that we Define here now we see if we hover over the day we see that this is a number when we render it we see that this is a number and when we use the component if we for for example forgot to send the day here uh it will tell us well first of all it says that hello is not part of a properties so we don't don't have to send it uh and now it will say that day is missing in that data that we are sending but it is required inside the day list item so that means that we forgot to send the day here it's very useful to make sure that what you expect is what is the data that you will actually receive and this is especially important when you're working in teams and you're building a component you expect some data and someone else from your team is using that component they might not need all that they might not know all the implementation details but if you are properly typing your component people who will use it will understand like what they should send here and it's also very good for uh preventing typos for example if for some reason I have a typo here it will let me know and save it with days is not uh property did you mean day yes I meant day and just like that we have learned uh About Properties as well and also how we can use typescript to type our component properties um in order to have a more uh robust application uh I will go ahead and actually commit everything get let me move to move to a different uh I will move to actually get checkout day one and and I will keep adding commits here and at the end you're going to have the end results of day one and I will keep the same structure for all the days where I'll provide the starting point and the end point day one and let's do git status git add git commit uh Advent calendar list Lorenzo hello just uh swinging by for a bit to say hi great initiative keep it up and happy coding thank you very much uh we met with Lorenzo previous year at ABDO GS he's working at Microsoft if I'm not mistaken he's working a lot at the Rea native uh core So yeah thank you very much uh I would be interested to uh to collaborate with people from the industry so Lorenzo if you're interested to join any of our live stream during the whole December uh let's exchange some messages and hopefully we can do something together I am new to this channel what is the book behind you react and react native that is a book uh written by one of my friend from IBM stepen Roy a very good book on rack native you can check it out on Amazon uh it has a lot of project a lot of interesting stuff shout out to Roy so we are are not done yet let's take a very short break to uh see what are you guys doing in the live chat and then we're going to continue I still want to add custom phones I still want to show you how we can install and set up export router how we can navigate from a bit from a screen to another in order to have the structure ready for for for the next days is it mandatory to use TSX um it's not actually mandatory so you can still use TS if I'm not mistaken and it also depends on how you set up and configure your project uh it might not uh have like where is it Anyway like it's not a of fum to I mean it's not like a strict rule to have TSX but depending on how your project is configured uh it might only look for TSX files and the template that I'm using most probably is configured to work with TSX files for components that are rendering um GSX well uh let me explain shortly all of these extensions that we might uh see around starting with for example GS file what is a GS file is let's say we have a utils dogs that has some functions I don't know cons con function not con function con format number equal to something you might have this kind of uh files that do not contain anything that should be rendered on the screen it only contains logic JavaScript and so on in that case that file is going to be atgs if you're not using typescript for example here is a uh value as long um as soon as you move to typescript and you want to type this value with the number type we will have to move the GS to TS because it's no longer JavaScript it's typescript also your project should be configured with typescript but our is already configured so everything is working if it's typescript again it's code logic without anything to be rendered on the screen that should be um that is also like typescript now there is the GSX so if we have a component like day list item that has that is a Javascript file but at the same time this is a component with that render something on the screen I cannot find the the line because it has the same color how to I want to make it larger come on okay never mind this way still oh here it is so while GS is only for JavaScript GSX is Javascript file that also contains uh GSX syntax the GSX syntax is uh the syntax that allows us to render components in this way it's very similar to to for example how HTML tags work and um yeah whenever we have we are rendering and we have some kind of GSX components V we need to have a GSX extension and if we have typescript in our GSX components in that case it becomes not GSX but TSX and that's it so M I want the book it's available on on Amazon uh all right okay so are we ready to continue Expo or SII which is best I explained that at the beginning uh but nowadays whenever I start a new project I always go with Expo for a lot of reasons but in general better development experience and uh yeah faster easier more integrated tools that we need in any kind of project Expo uh that helps us build and so on so it's it's a lot of reasons but in general it's a better development experience without any downsides so why not all right one of the tools that for example is available in Expo there are a lot of them like Expo is a whole ecosystem composed with a lot of uh a lot of packages tools that that are here to help us for example one of them is the Expo fonts package that allows us to work and manage fonts in our application besides Expo fonts Expo fonts allows us to load any kind of font that we have as a as a file however besides Expo fonts there is also the package called Expo Google fonts I will search Expo Google fonts where is it uh Google use a Google font yes use a Google font so Expo has first class support for all fonts listed on in Google fonts and it's quite easy to integrate and use them to use one of these uh we can check out the documentation of Google fonts we're going to do that and with these packages you can quickly integrate any font or font variant we want so to install first of all what we have to do is install Expo font and Expo Google font slash a specific family that we want let's start with the example that they provide and later I'm going to show you how we can choose a custom font so let's copy this command let's go back to our project in a separate terminal let's run npx Expo install Expo font and Expo Google fonts sler now uh we can integrate it in our project by using the use Font hook uh you can directly use this Hook from the Google fonts package so let's copy the this import and we're going to go inside the entry point of our application which in this case is ab. s x at the top I'm going to first import the Ed font Hook and the specific inter Hook from this Library let's go ahead and and using the use Font hook we can load fonts in our BR native application so we call use fonts and here we need to provide a object object with an object which is an actual map where the value is going to be the name of the font what the key is going to be the the the name of the font for example inter and the value is going going to be the actual font that we imported inter 900 black now we can use this inter font for example in the day list item when we have a text we can use Font family and we can pass the name that we specified here as the key so if I we already see the font being used here for our numbers if I refresh the application might fail because the font family inter is not a system font and has not been loaded uh yet what that means is that we first need to wait for the phones to be loaded and only then to start rendering our location because it takes a bit of time to load the font and when rendering something with that font it should already be loaded to know if it's loaded or not the use Font hook will give us back some values it will give us back the I think the first one is font loaded and the second one is error now we can have an if statement before we render before we return our flat list we can have an if statement here and if the fonts are not yet loaded or there is a font error here we're going to return null uh we're going to return null or we can return an activity indicator activity indicator imported from react native is a simple spinner so now if I'm going to refresh the application there will be the spinner for a very very short amount of time uh but after the font is loaded this will become true we're going to skip this if statement and we're going to render back the flat list and in the day list item we are using the font family that we loaded here the name enter is very important it should be the same as the key because if here it's enter black uh and if I'm going to refresh it's not going to be uh the same so make sure how you call them here now let's uh this was the example let's go ahead and um H maybe later I'm also going to show you with a splash screen because yeah actually let me show you right now with a splash screen because um common use case when we are loading Assets in our application these being fonts images large files videos and so on is to to to keep displaying the splash screen while you are loading this data and only when all the data is loaded to hide the splash screen and to display your application we could create like our own version of a loading screen but it's better to use the splash screen because it will give a better experience to the to the user there will be no flashes and ticks so what we can do is we can take St Expo to not to hide the splash screen automatically and then to hide it manually when only when the fonts are loaded let's look how we can do that with Expo splash screen splash screen uh and first we need to install XO splash screen let's go ahead copy this command go here install Expo spash screen and usage we need to import everything from Expo splash screen in our entry point of our application for example up TSX let's go ahead and import here with splash screen let's call splash screen do prevent Auto hide in order for the splash screen not to hide automatically I think if I'm going to refresh it's supposed to stay on the splash screen forever because we have this prevent aut to hide and this is the splash screen sorry I had a a wrong screen here but we're back this is the splash screen and because we have prevent autohide it stays there forever what we want to do is whenever the fonts are loaded is to hide the splash screen in ver documentation uh not really like this one let me uh let me double check something yeah um yeah we can actually add like the here instead of activity indicator if if font is loaded and there is no font error and we can call Splash screen. hide a sync it shouldn't be return sorry and now we see that everything is back to normal enter if War F oh if font loaded or if there was a font error if something happened either loaded or it gave an error then we can hide it now if I'm going to refresh it still says that the font is not a family inter is not a system font well because we need to add like this logic inside a use effect uh a use effect allows us to run logic when things are changing so uh let's go ahead and import a use effect from react import use effect from react and we're going to add here inside the body of our application the use effect expects a function as a first argument that will be executed and as the second argument it expects an array of dependencies and here we put things that our function in the use effect depends on or in other words when something changes execute this uh code so what is the dependences what should trigger what changes should trigger the use effect in our case the the variable fonts loaded and font error if they change that means that we should see if we have to hide the the the splash screen so I can add this if statement inside the use effect and this will be a much better way of handling it we will call the splash screen hide the sync only when these values are changed and only when they one of them will be true so if I change it's still it's still error it's still error if I don't have this use effect uh I expect the application to stay on the on there oh yeah yeah yeah I know because even though the splash screen is visible our execution is still trying to to render this behind the scenes so what I'm going to do is m I'm going to have back the same if statement here that will simply return nothing null will stop here if it's not ready yet and when it's going to be ready it will call hide the SN and it will go here and render this one but still it doesn't work what oh it should be back to this one so now everything is working our splash screen is being displayed for the moment while we are loading the fonts and when we finish loading the fonts we are we will call the splash screen hide a sync and the splash screen will hide and we will render the rest of our application already with a fonts loaded having access to it okay so now this is a better way to to load this is documented very well in the Expo documentation or the splash screen or a fonts and it's also automatically implemented in the in another template of Expo that is starting with the tubs uh now I want to show you how we can find custom fonts for that we have to go to Google fonts uh Google fonts and Expo has access to all of them but it doesn't load all of them because they are all um that would be very a lot of data so we need to install and load only the specific fonts that we need in our application I can write here some numbers to see how it looks because we're going to use it for a lot of numbers you can scroll down to find a fun that you enjoy I think I was looking for um a mtic was it should be a mtic come on no it's itic yes it's this one it looks like handwritten very similar to how like Christmas things are written so I really like it it's called amatic SC I'm not exactly sure like from where we are we will take the actual like we need to know the name in The Next Step when we install the font I'm not sure exactly where to take the exact name but we can understand what's happening like it's the name of a font in this case is a Matic s c so we're going to go back to our application and we're going to do npx Expo install uh it's called let's look back into the Google fonts Expo Google fonts slash EnV name of a font Expo Google fonts slash and we need the name of a font here so the name of the font that we found is a Matic SC so let's go ahead and say a Matic DSC that's what I was referring to I'm not sure like how it's if there is a list of all the font names on Expo Google fonts but you going to understand like how it will be based on the name that you find on actual Google fonts so after this is done a matics c we can go ahead and in up. TSX import them import something from Expo Matic SCC and what do we want to import let's see what it exports first it exports regular and bold so I can copy them here and the second one is bold and I will go ahead and load both of them I will load a Matic as the regular and then a Matic bold as the other one the Bold here now in day list item instead of font family enter I'm going to use a Matic here that will be the numbers and if I do a Matic bold that will be a bold bold numbers here all right and just like that we have custom fonts and our application already looks much better let's go ahead and do get add git commit minus hm custom fonts and I will also do git push origin day for maybe not yet I will think later all right we have custom fonts our next step for today is going to be Expo router we will install configure it we will talk a little bit about the fundamentals and we're going to set up a very basic structure of the screens that will help us along the way till the end of the challenge till the end of this Marathon to to build it hello roio how are you doing the fundraiser tag is adding new value to your channel nice work thank you very much if you're just joining right now guys uh during November we are going to do a live tutorial every single day with react native and Expo we're going to try to build exciting projects and if you have ideas make sure to submit them to our idea board and also vote for the best ones all the links you can find in the description below and November is not only about learning not only about the challenges the marathon November is actually about giving back as well because during this event we are organizing a fundraiser and we're helping the organization called save children to support their efforts in providing education for every child in this world so if you support this cause make sure to donate here on YouTube you can do that through the pop up uh you will see near all the live stream that we're going to do during December so all your help really really helps okay so we are almost two hours in by the way I will try to keep the live streams around one to two hours uh in order for for everyone that are watching to be able to actually follow it daily I'll try to maybe do it even like 1 hour uh try to take like smaller features but uh give you the possibility to daily maybe before the work or after work to spend one hour to build something exciting uh to improve to learn something new so yeah I'm going to try to do them a bit shorter than our usual 4our live streams hopefully it's going to be possible uh you can with axo build sometimes it's required if you use rck fire base for example is as it has native dependencies but we still keep all Expo benefits I use this in almost every Expo project yes that's uh it's sure whenever you have you need uh either to write your own custom native code or to use a library that uses native code in this case the example was Firebase oh roio thank you very much for the $50 donation oh my God that's so nice thank you very much and we also have some incentives for for all the donors and 50 is actually one of them so your name is going to be in every single video where going to create a thank you uh slide and uh you're going to be here every every video till the end of um of demember thank you very much for your support it really means a lot what I was saying uh what I was telling yeah with native code so yeah whenever you have native code um the for for you to better understand like a couple of years ago maybe I don't know three years ago whenever you had to use native code in that situation you got into a you had a roadblock and the only option if you wanted to continue building that application and needed that native code was to eject from Expo and ejecting from Expo meant that Expo will generate the IOS and Android folders and will stop like managing them and will give you the possibility to manage them in that case you were you were able to add native code but you lost the all the benefits of Expo nowadays there is no eject and there is no need for eject because Expo created config plugins and pre-building what does pre-building mean well pre-building uh at the beginning I talked about Expo go Expo go is a native application that you install on the devices and it contains the native code of most packages that you might need for example Expo fonts Expo Google fonts and so on that we saw today Expo camera other other packages as well and whenever you install packages in your application like XO camera and run that your application in Expo go it's going to work because that native code is already built in the expoo native application however Expo go cannnot have all the native packages out there so whenever you have a custom package that is not part of an expo go and that package requires native code well you're going to install it when running in Expo go it's going to crash and say that there is no such method or a native Native package in that case the option the next step is pre-building pre-building is basically creating your own version of Expo go that will contain only the dependencies of your project it will contain dependencies from Expo and it will also contain dependencies or native code from your custom libraries when pre-building export generates this IOS and Android folder but compared to previously to the previous eject now this IOS and Android they are safe to be deleted and regenerated uh as is new every time and actually that's a rule of fum whenever you are pre-building you have IOS and Android in your folders but we usually add them to G ignore in order not to submit native code in our repository everything that can be generated or installed at at on on a machine based on a file or based on some tools shouldn't be in the GitHub uh in your git repository and yeah that that goes with iOS with IOS and Android folder so yeah that's that's the whole thing uh it's and pre-building you can do that locally if you have xcode and Android if you have them installed on your system or if you don't you can pre-build in the cloud using gas you submit a job you pre-build you create this this uh um this is called you create a development build and then you distribute or you send this development build to everyone in your team they install it on their phone similar to how they are using expoo it will have a similar feel but it will be a separate application from expoo and when running your application it will open specifically in that development build that you created and that development build will contain your native code in your application will work so that's hopefully a little bit more clear on how everything works and just because of that yeah like nowadays there is no limitations of using Expo even when you need native code and a lot of project do need it a lot of projects that I'm using where they have a custom build I think um for for beginners and I can remember this myself whenever I started with Expo uh not not when I started with Expo but um I I want to say that the pre-building stuff was sounding intimidating I thought that you have to like to to to get into a lot of native code I don't know it sounded complicated but it's actually not that complicated it's one command uh we might go into that later in this series if you're interested make sure to either submit or vote for the uh the topic on our idea board and I can cover that uh together it just takes a little bit of time for the native project to be built that's usually like 5 to S minutes depending on your machine and after that that's it you can continue working as you were working but instead of using expoo you use your n you use your custom development build okay so next step uh we are to as I said I wanted to keep them uh one to two hours we are two hours in and I still have three plans first of all is to install and configure exper router uh and actually let's start with that and see if we have time for other plans that I have for today uh I have everything yeah have everything committed well we don't need VC folder all right exper router what's exper router what do we need that do we need it for well let me introduce you with the what do we need to to do next the next step is going to be whenever I press on one of these uh days I want to navigate to the next screen where it will show more details like what we did in that day and later maybe even more screens with the actual result with actual things that we are building so this is going to be like uh this is the navigation between screens in our application at this moment we do not have a lot of screens we only have one up. TSX file that represents like our main screen of application most applications out there need a navigation system system and the default solution that we had so far was react uh R navigation which is a great Library uh if I'm not mistaken it was also built by the people from from Expo uh and it allows us to implement different types of navigation for example a stack navigator that allows us to move back and forth between screens a bottom tabs navigator that has uh tabs on the bottom a drawer navigation a model uh and other kind a top navigation and so on so this is the the this was the the def facto library that we all used before and um the way it was working is we were um configuring wait the way it was working is we were creating these navigation files where we configured different script screens for example stack Navigator we specified that there is a home screen that will render this component with this options so the problem was that whenever our application was growing uh larger it was very hard to manage all of these Navigators especially when you have a lot of nested Navigators for example a navigator inside a navigator and believe me even a simple application grows so huge like in a couple of months that it's quite hard to to manage everything now what aan bacon from Expo thought about is why not using a file-based navigation system which is quite widely used um on the web for example in nextjs and other web Frameworks where especially when you're building static websites for example when building static websites you simply create files for example index.html will be the homepage then you have another file about HTML in the same folder that will be the slab and and so on so by simply creating files you're creating routes in your application that's a file based navigation system and that's what exper router is export router let me open the documentation is a file based uh router for rect Native and web application this is just the beginning uh but it also has a lot of benefits that I'm going to explain uh a bit uh later a little note that I want to make is that Expo router is actually built on top of react navigation that's why I introduced react navigation first uh because if you have experience with react navigation some of the stuff like uh the options like configuring screens and so on you will use them in Expo router as well and Expo router is simply something on top of R navigation and it automatically creates and configures our screens based on the files and folders that we create in our project so it's much easier to visualize your um screen tree uh much easier to to handle them U you just create a file and it automatically creates a link with automatic deep links as well so uh the easiest way to get started even in V documentation is to use the template tabs 14 uh the tabs template but we specifically decided not to use that because I want to show you how you can install and set up uh exper aor in any kind of application not in not necessarily in a new application with you're starting from scratch because it's quite easy to upgrade from rack navigation to Expo router as well so there might be a lot of uh situations uh so yeah I decided to let's go ahead and do that manually so let's go to the documentation of Expo uh for the Expo router in the getting started uh I'm going to scroll down to the manual installation let's go ahead and uh see what do we have to do first of all we need an expo project we already have that one so let's go to the second step and we need to install the dependencies let's go ahead and copy this command back to our project and let's install using npx Expo install and the dependencies are Expo router the safe area context screens linking the status bar gesture Handler everything to enable like the interactions with the screens now we need to set up the entry point the entry point at this moment if we look in package.json is the something from Expo up. entry we need to change this to export router sl/ entry so in package.json in the main change it to X router SL entry now modify the project configuration we need to add the scheme the scheme is used for deep linking and this is added in ab. Json I will add it below the slug as scheme and let's give it a name for example demember again the scheme is only used for is is used for deep linking uh and maybe we're going to I'm going to show you where we can see this scheme used now if you're developing an application for the web we should also install the rack native web and rack do uh let's actually install it because it's quite easy and it automatically supports web as well let's install them and the next step is to enable metro web support in V app. Json by going to web bundler Metro let's go ahead in up. Json scroll down on web and let's add here a new parameter bundler should be Metro maybe later is going to be by default so double check it with a documentation to see the most up to-date steps that we we have to take now we need to add one plugin for Babel so let's copy these plugins uh and go in our b. config and after presets let's add a new line with plugins expor router SL bable now that's it I think that's it all we have to do is to restart the project because at this moment it's uh yeah let's stop the server to stop the server go to it and press contrl C or I think on Mark it's option C yeah I still have like a Windows keyboard and for me it's control C uh anyway let's go ahead and do npm start again uh and usually uh whenever we change like this kind of huge parts of our application like the navigation system uh we can provide here that dash dash space-- clear and this will start the development server and it will also clear the bundler cache so this is good like if something is weird like something is not happening that you expect to happen maybe restart the server with Clean cleaning the cache now I'm going to run it again on our iOS and if everything is okay we should see a welcome screen we will not see our application yet but that's that's one step ahead do we need to install reanimated for Expo router if I'm not mistaken no you we don't in the dependencies we see the dependencies is export router the safe area context the screens and the gesture Handler we do not need reanimated for export router oh ignas is saying command c yeah yeah yeah yeah uh but we're going to inst maybe if we have time today we're going to install reanimated but we'll see maybe not today it's going to be too much but in this series we're definitely going to work with reanimated anyway our applic our application is running and we see welcome to Expo and it tells us start by creating a file in the up directory what is the up directory well as I said before exp router is a file based navigation system and by creating files it automatically creates screens in order for exper to understand which files should be screens and which files shouldn't be screens it dedicated a specific folder called up to the uh where we will hold all our screens so inside app directory every file will be a screen the app directory can be created either in the root directory of our project but as I said I like to keep all the source code in the source so I'm going to create it here in the source called app now all the files in in up directory they become screens so let's go ahead and create the home screen usually home screens like are called index so let's create index. TSX and whenever we will navigate to the slash there is it will automatically load this index. TSX what should be here well I'm going to copy let me copy everything from the app. TSX to index TSX and we will no longer need up. TSX that not needed anymore because all the screens in our application they will be inside our application directory now backing up index. TSX where we copy pasted the code from from the previous screen we need to adjust a little bit the import files let me take a note uh okay and everything else should be the same we are exporting default function let's not call it up because this is misleading this is not the whole application this is only one screen and this can be home screen let's Let's do let's save and let's refresh the application still something doesn't work uh not sure why but let's go ahead and stop the server start it again maybe exporter didn't take them with newly created up directory now if I refresh will streams be on weekends too yes I hope I will not regret this but yeah there will be streams on on from now till Christmas till 20 four I think inclusive we're going to have a stream and after that after the stream I'm going to go into the plane and go home to to my family uh anyway here we have our application uh after rest restarting it it actually works everything is working perfectly and yes let me also open it on web by pressing on W it will open in browser and because we configured it for web it now opens in a browser window and here we have it actually let me take it take it here like this so as you can see if we go to the our Lo Local Host then slash this will be mapped to the app index if for example now we go to the slash about at this moment we do not have an about uh screen and we see the unmatched route however if I simply create here a new file about. TSX and with a simple shortcut generate a small component that just says about if I go back and refresh the page look at this it already says about so what I have what I just did is I simply created a folder called about here I render what I want to render and when going to slash about in the browser it automatically opens this page if I go back to the slash it's going to be the home screen that means that just like that just by creating files in our app directory we are creating screens also folders are also very important folders become segments of our URL for example if I will create in our application here a folder um user and Van where a file index Dot TSX with a simple component saying user page and maybe here another followers. TSX inside the user folder and here I will say user followers now to navigate to the home screen of users similar to how we have about to navigate to about we did SL about to navigate to the user we're going to do slash user how export router is working is it takes the SL user it looks here well user is actually a folder if it's a folder it will go there and and take the index. TSX file this is the main file from a from a folder if however we are saying user slash followers we see user followers so as you can see the user becomes a folder followers is mapped to this file and this is the screen that is being rendered so yeah this is important to understand how puff segments are mapped to files and folders I'm not going to go more in depth here with with Dynamic properties and so on but but we're going to see that throughout these tutorials definitely I also want to to cover later in this series more advanced um Navigators maybe like a top TP Navigator with a scrollable header that we see like for example on Instagram or on uh Twitter and stuff like that uh drawer Navigator so if you're interested in that make sure to submit that idea on our board or vote for some of um in browser this is very easy to visualize because everything is a URL uh but for mobile this is something quite new um this is quite new but if we understand how it works in the browsers with URLs it's going to be easy for us to understand how to do that in our application as well in one more mobile as well because now all the screens they have a URL they have a a a route that is represented by the slashes like by these segments that we specified how do we link how do we link from one screen to another for example when pressing on something how do we go somewhere so far we simply manually adjusted the URL at the top but usually what we want to do is for example when we press on this we want to navigate somewhere to do that uh I'm going to go in the where in the components day list item and the day list item is one of these components to navigate between screens there is a component called link from export router I'm going to use this link below the day text here to say go to user something like that this is just to to show you how it works the link also need an HRA if you're coming from web HS are the URLs that we use for for for our links now all the day list item components they have a go to user button the H that I want to go to is slash user now if I'm going to press on this text I'm going to go to the user page well it's hard at the moment to go back for that reason I'm going to refresh and if I want to go to the user followers that's what I'm going to say sluser slf followers don't forget we created these files and folder in our project now if I'm going to press I see user followers this is how a link works and a by default a link expects some text here inside uh because it will render a text component behind the scenes and when we press on that text component it will do the it will execute the navigation itself well in a lot of cases we want to wrap like bigger components for example in this situation I want to rub the whole box into this link because whenever I press on this box I want to navigate to a different page so what I'm going to do is I'm going to W my view inside a a link like this link and I will close this link at the end we need an HRA here as well so let's do hraf slash user so far and I will delete the link from inside the component we've go to user because we want to link from the whole container now if I press on this it works but it messed up a little bit our Styles it messed up because the between the parent component and the box there is this link that messes around with our Flex styles to solve this we can send here to the link a property called as child and in this situation the link will not add anything between these items and will simply use the child for the for the all the on press events now the styles are fixed but if I press on this they're not working anymore why because when using the as child the link will use the child's on press event to detect presses because a view does not have a one press event it does not work in Rec native when we want to handle press events we can simply use switch from A View to a pressable let's first import pressible from rect native pressible and it's it's easily replaceable with a view because a pressible is the same view but it also allows you to handle press events like uh clicks double clicks and so on now the link will send to this pressible the on press event and because the pressible has this property if I press now we are redirected the styles are working properly and the linking also works and we don't have to necessarily press on a text we can also press on some boxes or some bigger elements so that's the power of as child and the pressible well while we are here I will delete the U the user and let me actually set up the structure for and also the about we don't need them uh let's set up the structure for our for all the days that we're going to have here for example uh I think we can uh remove and report and ban someone uh I see some questions about export Rec navigation I'm going to get back to that in a moment uh I just want to finish this step by setting up the folder structure for our every single individual day here uh in the application what we're going to have is we're going to have a folder with all the days that we're going to have in our application and inside that folder for example there will be a folder called day one and in day one let's create the index file and here just generate a day detail details screen day details screen and when we press on for example some of these icons let's navigate there so from the components day list item we don't want to render to redirect to the slash user we want to the slash days slash day one now if I press on it it redirects Veer but it also works for day three well we're going to have separate folders for every every single day for that reason we need to dynamically redirect to the specific day that we want well because we know we have a number here we are displaying one on the screen we can dynamically send the puff parameter here so by saying day plus day if I do if I press on the one it works because we have the one screen but if I press on the two it says unmatched route and I can go back the same for free only when we will create a folder for them they will be working as expected uh this syntax can be improved whenever we have to create strings out of some variables instead of plus sign we can have template strings to have a template string all we have to do is use instead of T instead of uh uh how they are called uh codes instead of codes we can use back tis which you can find below escape button and when we where we want to insert a variable we're going to use the next uh syntax dollar sign and open and closing cly bracket and inside this we can add any JavaScript variable that we have access to in this case we're going to add the day here so this becomes day one one when we press on day one and day two when we press on day two and because there is no day two here we cannot go there again while we are still here uh I want to show you one more thing for example sometimes Let Me Maybe add a day two as well by copying day one copy paste oh there is too many already day two and the rest I can delete so I created that days folder in order to logically group together all the days that we're going to have to keep them separate in the same place but in some situation we don't want this folder name to be part of a URL we want to Simply skip the days and only have slash day one slash Day 2 slash day three and so on to do that we simply put the name of a folder inside Open brackets and this is a optional segment it adds it as an optional segment in our URL but at the same time allows us to group things through folders so now if I'm going to have slash d and I think on the web that is uh that that is more clear because we can see also the URL I'm on the home screen if I press on the day one that's going to go to the simply slash day one without slash days SL day one it's a much simpler URL and for day two we also have it but for day three we no longer have it if something is not working after changing this one make sure to restart the server sometimes the Cache can uh inter impact like and say that there is no screen like that the think is that this this segment is optional so we can skip it or we can add it also with a corly brackets here this might be helpful when we have multiple paths with different optional parameters and it will still go there and also if we we manually add slash days here slash day one it will go here but actually redirect to the right it will automatically redirect us and we remove a optional puff parameter all right so that was our day day day yes perfect perfect let me go ahead and uh do get add get commit minus um um set up Expo router and the main screens but why this doesn't look like native transitions between screens Vladimir perfect question thank you very much for helping me segue into the next step that I wanted to show you uh the weird part is that when we press on this it simply seems like a it it um it replaces the screen without any transition or animation that's because by default well first of all the animation between how we move from a screen to another this is the responsibility of a navigator a stack Navigator usually comes from the left like when we navigate to a new screen it seems like it comes from the left or from the right doesn't matter at top bottom tab Navigator uh it works differently as well depending on which tab we select and so on by default when we don't specify any Navigators Expo router will use a very primitive Navigator and I think it will simply like re replace these uh these things how can we change the Navigator well that's where layout routes come into place besides screens in a folder there is a special file that we can Define with a very special name underscore layout the name is important and this underscore layout defines the how to say it the layout of all the pages inside this directory the layout will simply wrap around our pages and uh and it's used to provide common UI elements between screens what are common UI elements between screens well if we have two screens in a let's say one second well if we have four screens in our bottom tab NV Navigator navigate they are different screens but the actual bottom top Navigator never changes it's a common or shared UI UI element that is being rendered no matter on what screen we are so the bottom tab Navigator itself the visible part on the bottom of the screen this is part of a layout of a group of screens in this case a group of four screens so a layout in a very very simple form let's define it as a it's a it's a component as well so let's export default root layout export default function and if we do not have any layouts what it's doing is it's rendering the slot from export router a slot from export router is simply saying render the the screen itself so now it will work similarly however if instead of returning the slot we are going to we are going to return a stack that is also imported from export router come on stack now that will become a stack Navigator and as simple as that we simply export the stack navigator from our layout and we already have a stack Navigator with a header with a title with animation when we navigate between screens with have a back button with everything that you would expect from a stack Navigator cool uh cool and easy when it comes to um yeah like we get out of a box everything that that we need but at the same time sometimes we want to adjust some things some options some titles colors Navigators and so on to do that we follow the same rules the same options or parameters as we have when we want to adjust to to configure react navigation for example let's go to the stack uh react navigation stack because we are using a stack Navigator here and let's look at some of things that we can adjust for example in the API definition we see that we can send screen options to the Navigator so let's send screen options and what properties does screen options can uh have for example it can have title but screen options are applied to all the screen so if I do Title Here demember that will change the title of the top again screen options are applied to all the screens so if I go there it will still be demember so usually for things that we only want to adjust to one screen we're going to see a different a different different way to do that with screen options usually we we send parameters that needs to be shared along every single screen for example it can have a I don't know background header background color or something like that uh background header background red no oh this one should be a component header background Style no let's do style status bar style header header style and if we want to change the color of a header we can do that for here background color red and that will change the background color to red and it will apply to all the screens so things like this are good for screen options things like title they are specific to a screen so how can we say that we want that demember to be the title only of on the index page there are two ways to do that one of them is directly from the layout and for that we need to send the options to the stack screen that represents the index for that we need to move from a self-closing tag of stack to a closing and to an opening and closing tag so I'm going to remove this one from here and I'm going to close the stack below inside we're going to have a stack do screen and I'm going to save and now using this tag. screen we can Target only one screen to Target it we need to provide a name the name should be exactly the name of the file for example index and we we don't have screen options we have options but they are exactly the same so I can take the title from there to only add it to our to here uh I'm not sure if we need to change anything on the header style but maybe let's see how it will look if it will have a same I don't really like I will keep it how it was with white background so now the title of our index screen is demember but if I go there uh that one keeps that name or the puff of that folder in the title so we saw how we can change the name through the layout but we can also change the name through the through the screen as well so let me show you how we can change the name on the detail screen by going to the days day one index and here if I'm going to import the stack from export router and if I'm going to render a stack do screen similar to how we saw before the benefit is that we no longer need to provide the name here because it knows that it knows the name it knows where to what screen it needs to apply the options we simply send the options with that title um for example day one and now the title became day one it will be the same for all of them oh no because we changed it only in the day one but yeah this way we can change the options the titles and everything related to our Navigators from the screen itself and this is good when we have Dynamic properties for example if you want to to fetch some details about the user and in the title to save a username that is going to be a dynamic property that you'll have access probably in this screen so it's going to be easy to just say like title is equal to user.name anyway for now I think that's good and we saw how we can do the with how we can work with layout um another thing that you should understand let me do get commit what is that uh stch Navigator is it going to be recorded yes all these videos are going to stay live stay available on our Channel what I wanted to say uh is that previously in our app. GS that's where we loaded the font because up. GS was the entry point in our application meaning that any component in our application will be a child of app.js Now we move upgs to this to to the Expo router inside the index. TSX inside our home screen and the home screen is no longer the entry point of our project it's no longer this component is no longer wrapping all all the components or all the screens in our application this is only the home screen and to show this I'm going to go into the day one for example and for the text I'm going to give style here uh font family is going to be the font family how is it called amatic bold now if I go to to day one and maybe let's do font size 100 so if I press on one it's working and you might say that okay everything is fine the fonts are loaded perfect let's go ahead and try to hard refresh this page day one here if I hard refresh the font was not loaded it was was it was loaded before for only because we first visited the home screen it loaded it and when we got here it was already loaded but if I hard refresh it only executes the underscore layout because the underscore layout wraps everything it will not execute the index because we directly went to the day one and in the day one there will be no font family am Matic bold because never loaded it we only went for layout which has nothing to do with fonts and then to the day one index again nothing to do with fonts so to solve this problem we need to load the fonts in a file that will be executed every time like that will rra our whole application that file in exper router is the layout and specifically the root layout the layout that sits directly inside the up directory later we will be able to add nested layouts as well but that's for another lesson uh the root layout is that file that is executed and wrapped around the whole application so everything that should be configured and set up globally like the some kind of theme providers or some kind of context providers if you're using some external libraries uh everything that needs to be Define globally on the whole application that should be in the underscore layout of the application directory not inside index index is only the home screen that's it layout is something that wraps around our whole application so with that knowledge let's go ahead and move the logic of loading the font from our home screen to the root layout so I'm going to from the home screen I'm going to copy these these blocks everything before return from our home screen component I'm going to put them inside root layout now I'm going to also copy the Imports of our fonts and maybe even the use effect move it to the layout as well use effect okay we also need the splash screen and we prevent default so everything related to splash screen we also import here in the root layout and and that should be that should be it I'm going to also clean up a bit so now our home screen doesn't have to deal with anything related to the application it only deals with rendering a list of days and the layout is responsible for loading the fonts and stuff like that and also for the stack so now if I refresh and go here it's working and let's uh test that on the web if I hard refresh this one it's still the font is loaded because now we fixed it we are loading it through layout again the first file that exper router will load is going to be lay up layout and after that it will go ahead and load the other layouts until it reaches that the screen itself because the screen is SL day it will go into the days it will go into the day and it will go to the index okay okay so get add get commit minus H this is going to be the um load fonts in the root layout and guys the last last last thing that I will do today we have still yeah let's let's do it now uh I will show you how we can improve a little bit our Imports where do we have Imports well at this moment we have it in our home screen where we import the day list item from the components later we're going to have a lot of these kind of imports from our files these are relative Imports and they work relative to the position of our file here if we change something the import will be broken and we saw that because when we moved it here we had to update that relative puff in order to avoid like relative Puffs what we can do is we can create uh some kind of shortcuts in typescript this is also something that was added recently to to rck Native so let's do let's find Expo uh typescript Alas and I'm going to show you how we can create these shortcuts and later use them to easily import so instead of having a lot of double dots for relative Puffs we will be able to do at or something like that for them uh use typescript I think it's here puff Alis and here what we need to do is I think we need to also enable it but let's try without it uh so all we need to do is in the TS config we need to provide the Puffs which is an array of shortcuts and the base URL so let's copy this one and put it in the compiler options of the TS config compiler options let's put it here so if the base path is the current directory uh then importing something from at will map it to something from source and I think that's exactly what I want you can also add like additional here for example when we import from from comp or component uh we want to import from Source slash components slash and the thing that you want to import now let's try to go in our app index and instead of importing relatively let's import it from at components might not work initially I think we will still have to enable something but let's try to Simply restart the server uh unable to resolve yeah because we have to go to our app. Jason for SD yeah in the SDK 50 uh we will probably not need the the configure Puffs but in the 49 we need in the ABD Json to add experiments TS config Puffs this is something new and it's behind uh so in X up. Json Expo somewhere after the plugin we can add experiments TS config Puffs through and now we can reload uh Source up index Let's uh clear again and if I reload uh uh yes if I update if I restart the server it works and now the import is relative we don't have that ugly double dots especially when your project is large like you're going to have a lot of that uh and also it's going to be much easier to move things around because if we move the the location of this file it's not going to change the relative puff because we are not using relative Puffs so that was that will improve and help us a lot uh through fr this tutorials so I'm going to do get add get commit uh how is it called the TS Puffs it doesn't look right the the name puff Puffs think it has enough how do you write Puffs oh it's correct but it looks weird that means that uh that's everything for today so we have a basic structure of our application and starting from tomorrow we are going to start building some exciting project guys make sure to submit your ideas I'm really curious about that uh following the link in the description below we have all the links that you need and here on our discussions you can share uh you can share ideas you can vote for other ideas that you might be interested in I see already a lot of ideas that people submitted I will look at them after the stream and we'll pick something for tomorrow thank you very much guys for being here with me till the end this is just the beginning of demember the monthlong marathon of rck native tutorials where I will go live every single day with exciting project build tutorials and you have opportunity to follow along and learn something new every single day it's going to be every day at 12: p.m. GMT time zone London time zone and yeah if you're interested make sure to subscribe to the channel not to miss our future videos it's going to be a lot of them this month and in future as well and uh this month is not only about learning it's also about giving back because this month we are organizing a fundraiser uh a fundraiser that we called education for children and with this fundraiser we are helping the save a kids organization uh with their efforts in providing education to every child in the world if this is important for you if you think education is important out there uh then make sure to help us reach our goal help us donate and make this world a better place before for the Christmas holidays uh thank you very much to roio and everyone else who donated today I truly appreciate that and um yeah I will see you tomorrow with with a new live stream a new project all right guys it was exciting first day and I'm more excited about tomorrow bye-bye

Channel: notJust․dev

Views: 35,440

Keywords: vadim savin, not just development, notjust.dev, react native live coding, live coding, javascript, react tutorial, react native tutorial, javascript tutorial, react native ui, react native for beginners, React Native, mobile development, DEVember, programming tutorial, Expo framework, fundraiser, mobile app tutorial, React Native beginner, learn coding, tech education, charity event, coding challenge, Expo Router, coding for beginners, programming livestream

Id: bIQII7gTXDE

Length: 180min 41sec (10841 seconds)

Published: Sat Dec 02 2023