Build a Full Stack React Native App with Payments | PostgreSQL, TypeScript, Stripe, Tailwind

Key Takeaways

do you want to create feature full Stack mobile applications that push the boundaries of what's possible leave a lasting impression and set you aart if so you're in the right place hi there and welcome to a highly anticipated course where you'll build a full stack Uber clone and no this won't be your average app showing a map on a screen I'm talking about a 15 screen state-of-the-art application that uses expo's latest features such as Expo router API routes Expo location Lightning Fast EDG ready postgress database Global State Management with zest stand and many others after taking this course you can build any mobile app you can imagine why because I didn't cut any Corners when making it I decided to include screens that appear on all of the most popular apps in the world you'll learn how to make splash screens and onboarding flows add authentication access device sensors integrate Maps build custom tabs navigation models bottom sheets success screens and even integrate payments using stripe there are also some Uber specific features you'll Implement such as live Google location with Google maps showing nearby rides search relocations using Google Places choose a destination driver and book a ride get directions and estimated time see all booked rides and your profile details alongside this video in the description below I've also prepared the ultimate react native guide that covers everything you need to know to become a fantastic developer the guide covers the complete react native Road mapap prerequisites and essential react native Concepts and project ideas you can build and deploy to get a job you can download the guide and use it as a reference whenever you're unsure what to do next of course the guide is completely free and once again the link is in the description alongside that in this video I'll teach you react native fundamentals Expo router for file-based navigation zustand for Global State Management native wind for styling Expo API routes stripe payments data fetching with custom hooks reusable Advanced components with best practices typescript for writing types safe code es length and preder for organizing the code authentication with email verification using Clerk and even postgress using neon a serverless fully managed postgress database that automatically scales resources and lets you write native SQL queries it is so good that even versell uses it behind the scenes for their versell postgress service now with even better teaching methods you'll get an open source codebase a custom figma design and a Discord server with a dedicated Uber channel to resolve bugs if you get stuck all those things are free so grab those from the links below while I continue telling you more about the project a basic to medium understanding of react native is needed so if you're not quite there yet check out the react native crash course and come right back and we're also working on the ultimate react native course to learn more about it check out the first page in the guide that I mentioned before in this course though I'll also teach you how to set up an IDE you didn't know you needed webstorm is a professional JavaScript and typescript IDE that will make you so efficient you'll wonder what you were doing all this time Jed brains reached out to sponsor this video and initially I was skeptical about switching from the code editor I've been so used to so I used it for over 3 months to test it for myself and oh boy is it powerful I can't wait to share everything it can do I'll do it later on while we're developing the application but just to say it quickly it has smart terminal with auto suggestions typescript type suggestions code completion automatic bug fixes oneclick refactoring speed search and an integrated git and GitHub system and here's the best part clicking the link in the description will give you a free 90-day access plus if you're a student it'll remain free download it while I continue telling you more about the app will build today when you first launch the app a custom splash screen will appear for a few seconds you'll then go through a smooth onboarding process process highlighting the app's main features after that you'll see a sign up off screen where you can create a new account or log in if we go to create a new account it'll ask you for your email and password but this time I decided to teach you how to implement email verification too after you enter your details the app will request a code sent to your email hold on okay here it is if you try to enter anything else of course it won't work enter the right code and voila your account is successfully verified you can also choose to authenticate using Google which works smoothly and logs you in within seconds now we are redirected to the homepage you'll first notice a popup asking for location access once you grant permission your location will immediately appear on the map you'll also see the nearby drivers if you click on them their names will be displayed below is a list of all rides I've booked so far and at the top a Google autocomplete search bar will suggest locations as you type pretty cool right once we select a location we're taking to the ride finding screen where you can enter your destination and see the location on the map through this smooth bottom sheet which we can expand or collaps you can also change your location and choose where you want to start by selecting places in autocompletion next we move to choose a writer screen where you can pick your preferred writer at a fair price then you'll be directed to the confirmation screen where you can review the details one last time before giving any money thanks to stripe we can select from various payment methods I'll enter some dummy details hit pay and watch it go through successfully you'll see this cool model with a smooth animation popup specifying that the booking is successful we click back home to return to the home screen to see the new ride we just booked you can also see the complete list of rides in the history screen plus there's also a well-designed profile screen with all of your details it is fully responsive and provides consistent results across all types of devices it is such a large feature reach application isn't it and you'll learn how to build it to today so what are you waiting for let's Dive Right In before we begin developing our app I want to show you how you can set up a new IDE that I tried and loved so much that I decided to use it to replace my vs code I know making a switch is not easy but just try it and you won't be disappointed Jed brain's tools are trusted by Google Tesla Visa Shopify City Bank and even NASA so they'll suit us just fine the link in the description will give you a free 90-day webstorm license so you have nothing to lose open it fill in your information click redeem and follow the instructions in the email once you click the link you got in your email you'll be redirected to your account dashboard and just click download then select your operating system and click download keep in mind this is a full IDE and not just a code editor so it's going to take some time to download let's leave it B and I'll be right back and if you're not ready to choose webstorm yet that's totally okay you can still follow along with the entire video without any problems I just want to say that I've been trying it on our internal projects for the last couple of months and found it to be the perfect IDE for web and mobile applications I'm still discovering new features as I go but I'm already so impressed that I won't be going back to vs code anytime soon once you install it it's going to ask you whether you want to import your settings from vs code so you can do that or start completely from SC scratch in this case I will import the settings you can choose the theme the key maps plugins and even the recent projects this was super quick and now we can create a new project it can be just an empty project which we can create on our desktop under SL Uber dclone and click create once you're in there it'll look something like this but of course we can fully customize it and what's the one thing that developers first change when they download a new IDE it's got to be the theme so press control or command shift p and it'll open up this search context where you can search for theme press enter and then select one of the predefined themes but of course you can press get more themes and very easily install any theme you want in this case I'll proceed with one dark theme and press accept and immediately it got applied another thing I'll do just so you can follow along more easily is increase the font size so I'll use the command shift p to go to settings select font and I will increase it to about 18 and enable ligatures this should allow you to see much better what I'm working on I think this is more than enough to get us going as we develop the application we can continue customizing the IDE to make it more your own and I'll be pointing out to all the cool details that webstorm does for us so with that said let's get started with a project setup to develop our mobile application of course we'll be using react native a platform that allows us to learn a technology such as react once and then write code anywhere be that Android iOS or web so as we click get started we'll be redirected to the getting started guide and I want to point your attention to something they say right here that you can use react native without a framework however they've found that most developers benefit from using a react framework like Expo providing you with features such as file based routing highquality Universal libraries and the ability to write plugins that modify native code without having to manage native files so we'll use the recommended approach and we'll start a new react native project with Expo we can do that by quickly navigating over to their page and going to the docs to get started with it there's only one command we need to run MPX create xfo app at latest so if we copy it and go back to our code editor you can open up the terminal by holding the control and then the key left of the one key on your keyboard and yeah terminal is a whole other beast in webstorm as we write commands I'll point out some cool features that it has so right here we can run MPX create Expo app at latest and then add the dot slash at the end to create it in the current Uber clone repository let's press enter and and press y to install the following packages let's give it a moment until it does its thing and while the packages are getting installed let's set up the database which we'll use to make our entire Uber application possible we need to have a place to store user accounts the writers the drivers and the rides themselves so click the neon link down in the description to be able to follow along and see exactly what I'm seeing next click get started and sign up I'll continue with Google for this project we're not using any thirdparty libraries for our database management you'll be working with a native postgress database and will write real SQL queries here you can enter your project name started with JSM uncore and then you can enter your project name you can do ride or Uber or whatever you prefer and same thing for the database name I'll do JSM ride you can choose the region that is closest to you and click create project and there we go we are redirected to this beautiful dashboard which will put to full use soon enough there we go it took some time but it finally worked your project is ready and now we can either run Android iOS or web before we do that you can press these three dots here and enable the new terminal which is in better right now and soon you'll see some of the new functionalities that it brings to the table for now let's just type mpm start and press enter you will see some warnings right here but that's not a big deal because below that you will see a QR code that you can scan with your phone and this QR code is very important for the whole Expo react native environment if you don't want to use it there's some different alternative options that we can use such as pressing a to open up Android Studio or the letter i to open up the iOS simulator but for all of these things you have to have heavy software we all know those stories where you open up Android studio and your device starts heating up and explodes and for the iOS it doesn't explode but you have to have very expensive devices what Expo allows us to do is to use the Expo go application to run our application on our phone in real time and see exactly what we're developing and we can even play with it and touch the app in real time that is super cool so let's go back to this QR code and if you're an iOS you'll have to scan it with your camera and before to scan it you'll have to go to your app store or Google Play store and just download the Expo go Application it should look something like this on your phone so I think this is the perfect time that I brought my phone preview on the right side of the screen so at all times while watching this video you'll be able to see exactly what I'm seeing on my phone screen so once you download it simply click open and you'll also have to create your Expo account by logging in if you're an Android you can open up the Expo Go app and scan the code from there and if you're an iOS you can scan it directly from your native camera app and on both systems make sure that you're connected to the same Wi-Fi network where you're running the code so both the phone and the device have to be on the same network and on iOS you'll also have to go to your phone settings expoo app and turn on the local network and also turn the VPN status off to not connect it this is necessary for Expo to connect properly then open up your phone camera point it at your QR code and click open in expoo but it seems like there's an error here it says too many open files error node Watcher broke and then it exited so we of course cannot test our application if we're no longer running the Expo server since it points to the node Watcher instance I think our node version might have something to do with this so let's just go to the node.js website and click download node.js LTS this is the long-term support version once it gets downloaded simply follow the steps to install it to check whether our newly installed version of node applied we can type node DV and unfortunately it's still using a newer experimental node version for me and for you it might be something else but maybe not the one that we just installed for that reason we can use a package called NVM that is a version manager for node.js there's a handy the GitHub repo that allows us to install it and update it with one script command you can use Curl on Mac OS or W get on windows so let's copy the command for your own operating system and paste it in the terminal it'll quickly install NVM and you need to close and reopen your terminal so let's close this one and reopen it to verify the installation you can run command-v MVM which should output MVM if the installation was successful and now you can install a specific version of node I believe the active version at the time of the recording of this video is version 2016 so we can say NVM install 206 0 and press enter there we go and now we can type node DV to check your current node version now let's rerun mpm start to see whether now node Watcher will properly watch over our Expo application I'll scan the code one more time with my device and open in Expo go it seems like the application is building you can see that right here iOS has been bundled and we can see the welcome screen success so now we know that we might want to use these stable versions of node when running your Expo applications great but with that said I mean just just look at this we have successfully set up a react native application and right now I have my phone in my hand and I can swipe around move through different screens and even open up some toggles that tell me a bit more about the Expos functionalities we already have a working Expo application but of course today you will turn what you see on the screen right now and what you're holding in your hand into what I believe is one of the most popular mobile apps of all time Uber so let's continue with doing just that and since this will be a pretty big application you know that every big app needs to have a proper setup we need to ensure that the app is scalable and the code is readable so for that reason let's go ahead and set up a couple of things that will make our development experience so much better first we'll install native wind native wind is a react native version of Tailwind CSS that allows us to very quickly write Styles within our mobile applications so let's just head over to the Expo quick start and install native Wind by running mpm install native wind and then installing Tailwind CSS as well we can copy this command go back to webstorm and run this command now we can see that our terminal is currently running the expoo application so we can just open up a new one right here and paste these commands we can quickly head over to our package.json I used a command P shortcut to quickly open up my file manager and we can scroll down to dependencies and search for Tailwind CSS as a Dev dependency as well as a native wind installed right here as a regular dependency next we need to set up Tailwind CSS by running MPX tailin CSS in nit so let's open up the terminal and paste this command here by the way I want to point your attention to how webstorm terminal dynamically separates each command from each other so you know exactly what you're working on here we have the one that we just ran and Below we can run a new one there we go this just created a new file and it's asking us whether we want to automatically add it to G sure we can add it and now we can check out our new tailwind config.js and we can copy this code from the Native width installation and paste it right here but of course we'll have to modify it to make sure the content is all right there we go step three is to add the native wind Babble plugin under Babel config JS so let's navigate over to Babel config JS one more time I am using the command or control P to open up the file explorer which is the quickest way to move over the files but of course you can just open up the project by pressing the command shift and e or clicking right here and then finding the babble config now I will add the plugins native wind Babble and that's it we can start writing code before we test it out we need to do one more thing and that is make typescript work with our native wind so the only thing we have to do do is create a new native wind- env. D.S file in the root of our directory so we can do that right here by creating a new file and pasting this name and then we can add this reference right within it and now typescript will know exactly what we're doing with the styles to test it out we can copy this view right here from the example code and go to our app tabs and then index. TSX as you can see here right now it says welcome and all of this other text we don't necessarily need that we just need one single view to start understanding how we can modify the code that has been provided to us so I'll just use one single view by the way a view in react native is similar to a div in web development so let's import this view from react native at the top by saying import view as well as a text and a status bar for from react native and we don't need any of the other Imports we can also remove all the other styles that we had in there now to test whether it works we have to position our text to appear in the middle of the screen and in react native we do that with something called a safe area View and there's an additional package that we can install that provides that component right out of the box so we can run mpm install react-native DS safe - area- context and press enter as soon as it installs and it'll do so quickly because it's a very small package we can now import something known as a safe area view coming from react safe area context and instead of using the regular view we can wrap her app with a safe area view now you can see that the text fits nicely at the top of the screen now even though the text is in view the styles are still not getting applied and we can see that because the text should be centered but it's still appearing at the top so we can go over our Tailwind that config.js and we can quickly modify the content we need to tell it where what will be writing styles so that it starts understanding them so instead of a capital A for app we can say slapp slash asterisk asterisk meaning everything in those folders within the app SL asterisk Dot and then we have those files extensions and here instead of a custom directory we have to modify this to say/ components SL asterisk asterisk SL asterisk and now if we go back you'll see that the text is centered we can also give it a class name equal to something like text- r-500 to see that it changes color now it is highly likely that this will not be working for you immediately there's just just one a bit of an annoying thing that we sometimes have to do with Expo applications whenever we make any big changes such as install native wind or any other major packages and that is clear the cach okay remember this clear cash if something doesn't work so for you what you can do is stop the serve from running clear it and then run MPX Expo start- C this run it with a cleared cache so if you rerun the project you can see it right here it says bundler cache is empty rebuilding and then you can press R while in terminal to reload your application after you do this I'm pretty positive that it should work and there we go our text is in the middle and we can say something like uber clone we're getting ready to start building it now Uber is a big application and as I've told you already when you're starting to develop big applications there is a bit of a setup work that you have to do to make sure that the rest of the building process flows smoothly and one of the things that is very important to set up in big projects is a linter in our case we'll use expo's recommended es length and preder configuration so let's just follow the steps we can run MPX Expo lint I'll do it in our second terminal not to disturb our application it's going to ask us a couple of questions such as says do you want to install eslint in this project and I'm going to say why for yes let's give it some time and I'll be right back there we go eslint has been configured we also need to install prettier so let's scroll down and I think somewhere here we can see the installation command so let's copy it and paste it in the terminal that was simple and now we have to update our eslint RC file with the following code so let's head over to eslint rc. Js and paste this code right in now eslint and prier will be watching over our changes and make sure that we write quality code in webstorm there's one additional thing that we have to do to properly set up eslint so press command shift b or control shift B and type eslint open up its preferences and head over to manual es lint configuration click on this Arrow right here and then choose the es lint for our specific Uber project and select run es lint fix on Save click apply and also head to tools actions on Save and make sure that it is turned on we can repeat the same thing with prier by going to settings manual preder configuration and then choosing our own config right here and run on Save apply and okay that's it you can see how immediately pretty a changes our configuration to be easier on the eyes and it works so seamlessly with storm and if you're using some other code editor here's the settings that Json file which you can put in there to also make it work there the code available to copy is in the GitHub readme linked below and now that we have linting set up let's customize webstorm even further to make it truly our own I'm going to press command shift b or control shift B on Windows and I'll go ahead and change the theme you can scroll down and go to get more themes and many of you have been asking me what theme do I use and now I can finally tell you it's going to be a cat pin theme you can type it like this and you can just go to search in the marketplace it's spelled with a double p and Double C you can install it and once you do you can go to theme and change it to kuchin and then choose the flavor you prefer macchiato or mocha once you have that I'm going to also do another thing and that is change the font family so you can search for font go to preferences and then go to General editor settings font and here I chose F code this is the font that I've been using for a long time you can also choose that one and you can install it by simply downloading the font to your device another thing I want to focus on is to turn on something called Soft wrap so go to configure soft wraps make sure to add the asterisk.svg so that it wraps for those files and turn off the used the original line indent for wrap fragments that's going to allow us to WRA specific files it should look something like this so that once the text goes beyond the line you can still see it on the screen right here to make it easier for you to follow what I'm doing and another thing we can do is install a material theme for our icons and folders to make them look just a bit better so once again command shift p search for plugins go to Marketplace and search for icons you can choose the atom material icons or anything else that you prefer in this case I'll go with adom click install apply and okay and we do need to restart our IDE for the changes to be applied once you're restarted you can notice that now all of the folders have their corresponding icons which makes it look so much better also you can see that the colors change for some of the icons on the side for now what I want to do is clean up this environment a bit so we can just hide some of the things right here that we don't need to create a bit more space for us we can customize the toolbar remove the part from the center and also remove some of the parts from the right as we don't necessarily need to play with a toolbar play with a code with me we don't need anything on the right so I will remove that as well and this will clean it up just a bit you can do the same thing for the things at the bottom that you don't necessarily need and there we go I went went ahead and I hided some of the things from the screen now we have a cleaner working environment with that said we can now proceed with cleaning up our file and folder structure now that we can see it a bit clearer when we initially set up our react native export application it came with a lot of different things the file and folder structure already set up two different pages there's a lot of stuff that we don't necessarily need and that will just complicate your understanding of our react native application so I want to make sure to take a second to delete all of the things that we don't need to focus on creating everything from scratch right now our application is not running and maybe for the better that's because we are going to do a whole cleanup and then we're going to run it together later on so first things first let's delete the things that we don't need I'll begin with deleting the tabs route Group by simply clicking delete or pressing the backspace key and pressing delete next I'll delete the hooks folder as we don't need it I'll also delete the constants folder and the components folder as well as the assets folder so we're going to clean our entire application up we only have our HTML index DSX and you might be wondering what is this HTML file well Expo allows you to run your applications in the browser as well but that's not what we need to be concerned with at this point in time there's also a 404 page that can show up if we are on a not found screen but again not something that is super important right now what we do want to focus on instead is the layout. TSX file we want to update it a bit to suit our very minimalistic app right now that doesn't have any additional files inside of here you'll notice we have a theme provider for now I will go ahead and delete it and the only thing we'll have is the stack a stack of different screens the name of her first screen will be just index it's her home and under options will run Heather shown as false we also have a screen for the not found and this is the only thing we want to have for now just an empty screen next we can create that index screen right here in the root of our directory so let's go to app and let's create a new file called index. TSX within it we can create a new homepage by saying const home is equal to and we're going to create a new Arrow function component and let's not forget to to export default that home component at the bottom within it we can return something within it we can import a view which is going to come from react native and we can show a text also coming from react native and it can say something like home for now you can notice that webstorm sometimes adds these additional inlay hints that allow us to see where we're using specific instances of our code um they're going to be super useful later on when they tell you more information about different parameters within the functions but in this case I don't need them to show the usages I can hide code Vision usages in line hence not all and this is just going to provide us with a bit of a cleaner working environment now is the time that we reopen our terminal and rerun mpm start just to see if our application still works after making all of those changes we can press R to reload our application and you'll see that we have an issue in our not found. TSX which makes sense because we change so many things I pressed command P or control P to open up the file search and if I start typing you can very quickly just press enter and navigate to that different file here you can see that we used two different components which we no longer have so we can just remove their Imports and we can also just instead of a themed view just say view coming from react native and instead of theme text we can just say text coming from react native as well there we go if we save it we should have no more issues with the code but our app still doesn't seem to be there well that's because this view doesn't have any Styles and most likely the text is being pushed above our application so we can use a safe area view coming from react native or in this case we have a special package react native safe area context as well but it's still not showing so if I open up my terminal we can see that the iOS bundling failed and it's still complaining about the components themed text even though we deleted it from the not found screen so what we can do is press R once again to reload our application once more now it's complaining about hooks use color scheme from App layout so we can go within it we can remove everything that we're no longer using just to simplify it alongside the used color context and we can also remove this color scheme from here and if we scroll down we can see that the stack screen is okay and we're not using anything regarding what we just deleted so I think we're good now I'll just reload one more time and now it's complaining about a splash screen okay in the app that config.js because we removed our assets this is completely normal we removed a lot of code so we have to make sure that it all works so in this case I'll provide you with the full assets for this entire project in the description down below you can find an Uber repository with the entire codebase for this project but what's even more important is that right there you can find the entire readme for this project and one of the things in the readme are the Snippets and the Assets in this case you can download the assets for this project this includes the illustrations the the icons and all the little images that we'll be showing on the app to make the development of our app easier so let's click here and you can just press the download button once you download them simply unzip them and then drag and drop them to the folder where you have your app for us it's on desktop and it's within the Uber clone so now if we go here you can see the full assets of our application webstorm also ask me whether I want to add it to G so we can say sure and here we have all of the IM so that means that now we can go to the app. Json and we can modify some important information about our app for example we can choose the name as Uber with a capital u and a slug of uber here it's taking the icon directly from the assets images icon.png and it's taking a splash screen directly from our assets as well we can leave the rest as it is now if we try to reload our application once more you you can see that a new splash screen that says ride appears right here so if we reload it once more you can see how nice it looks like a splash screen on mobile devices is a screen that appears before your application loads it gives the user something to look at while it's loading now we have issues with the fonts because we won't be using the regular space mono font rather we'll be using a different one we'll be using plus Jakarta Sans so we can head over to our app and then head over over to layout. TSX to modify the fonts we're using these fonts just need to be copied and you can find them under the Snippets in this GitHub repo you can find root layout fonts copy this block of code go back here and then simply paste them I'll Zoom this out a bit so you can see it better make sure that it is formatted well I believe it already should be for you if you still see some issues in your terminal you might want to press contrl C to exit and then you can run mpm start once again and then it should build it properly after pressing the r key on your keyboard you can see the splash screen while it's loading and then after that you can just see the home and that home is exactly what we have crafted in our index. TSX so this is perfect now we have a structure that we're starting to understand we have an app where we have a not found page we have a layout and an index and we have also learned how to add a splash screen to our react application through app. Json it is as simple as pointing to an image that you want to show so let me show you it's assets images Splash if we go to assets images and then splash this image is right here perfect with that in mind we are ready to set up the styling for our application that we'll use throughout this project we can start by navigating over to Tailwind doc config.js in that same GitHub repo you can find the modified Tailwind config JS that extends all of these fonts and ensures we can very easily use them so just override the existing tailin config you'll notice that here we also import some of the different variants of colors such as primary secondary success danger and warning so that we can use them within our application nothing more nothing less so what do you say with all of that setup out of the way our you're ready to start creating the onboarding screens of our application finally some real code right we already have this splash screen and now we're starting with the first out of three onboarding screens and I would highly recommend that you replicate this figma design as well the link is going to be down in the description you can easily get it and that way at every point in time you will know exactly what we're building so get that figma design and let's start by creating our first onboarding screen within the app folder we'll create a new route Group by creating a new directory and I'll call it rout within parentheses like this within the root we'll create a new underscore layout yes each route group will have its own layout depending on what is it showing on the screen because our onboarding screens won't have the Bottom bar which means that we have to have a separate layout from the rest of the screens then within the root we can create another another directory which will be called tabs so these are the tabs that we can switch between and here we're going to have some of the primary pages of our application it'll also have its own uncore layout. DSX and it'll have a few other files such as the homepage the profile and more so what do you say that we create them right away by creating like a home. TSX file and within it we can just create a simple react a function component const home is equal to basically an aror function component that returns a view with a text we already have that right it is currently within the primary index. TSX so let's copy it and paste it into home we can now copy this and create a few other files as well within the tabs folder it'll be a new profile. TSX where we can paste everything we have here and rename home to profile we can do the same thing for chat. TSX and rename it to chat and we can do the same thing for history so this is going to be a history of a r that we have history. DSX we can paste it and call it history I think we can rename it to something like rides it would make a bit more sense so let's just do rides. TSX and there we go it automatically renamed it here as well perfect so now we can start seeing how our application will look like and it's very important to mention here that what you're seeing right now is Expo router it is a file based router for react native applications allowing you to manage the navigation between the screens in your application so you can move seamlessly between different parts of your apps UI using the same components on multiple platforms what I love about it is that it's using the same file based routing concept from web specifically nextjs so if you've done some nextjs apps it's going to feel like home so how exactly does it work well Expo router uses links to move between pages in the app it's similar to an anchor tag or href attribute or you have an app you have an index page about page and you can have subpages or even Dynamic pages and then you can use links to move to different pages or use buttons we can also use the navigate functionality which behaves similarly to modifying the URL in the browser and the primary way of navigating in Expo applications is the stack Navigator it is like a navigation bar in the browser you first need to create a file-based routing structure like with an app a layout and then some additional routes and then in the layout you can create something known as a stack a stack of screens each screen can decide to show or hide the header Styles can have different colors and more and then you can configure how do you get to each one of these screens by giving them a name so let's create a stack of our own we use the stack to modify how a specific route behaves so if we go right here to our root layout you can see that we have this index route which is our homepage and there we have added an option of header shown to false if we remove that option you'll be able to see the name of the route which typically you don't want to show so that's the reason why we have to add all of these stack screens only so we can add options header shown is set to false and we're going to repeat this process for all the other routes and Route groups so we're going to do the same for the root so that's the root route group Heather shown false and we're going to do the same for o this is a second group of routes which will'll show so let's go here and next to root which is going to be the primary part of our application where we're going to have all the routes we're going to have something that happens before we enter the main application which is the onboarding and the off so let's create a new directory called off in parenthesis there we can also create a newor layout. TSX and within it we can duplicate the main layout we have right now but we'll remove some of the things regarding the fonts we're loading the fonts once we don't need to load them anymore so it's going to be much much simpler it's going to look something like this import stack from Expo router then we can declare a layout and a simpler way to do it is const layout is equal to an arrow function and then we can just export default it at the bottom by saying export default layout and here we have different stacks of screens for that route group so no longer do we have to have the index or the root or the KN found rather we're just going to have the welcome which is going to be the primary screen and then we're going to have sign up and finally we're going to have the sign in and we want to hide the headers in all places so that means that we have to create these additional off Pages such as welcome sign in and sign up let's create all three I'll create a new file called sign-in. TSX and within it we can paste just the basic component which we created in our index. TSX so that's just going to be a basic view safe area view with a text that's going to say sign in we can duplicate that once more by creating a second file in the oth group which is going to be called sign Dash up. DSX and we can rename that to sign up we can also rename the actual component name sign up single word and we can do the same thing for the sign in since I forgot to do it there sign in and finally we need to create one last off page which is going to be the first one we'll start to work on and that is the welcome onboarding so welcome. TSX where we can paste it and say onboarding great so now the question is how can we navigate to this page right here right now our app is saying home because we have this index. TSX that is rendering the home well in here will do a simple redirect in case we're logged in so the return will do only one thing and that's going to be call to a redirect component coming from Expo router with an hre of forward slash route group of O SL welcome now as soon as somebody opens up the application we'll be redirected to oops the screen doesn't exist okay we know that at least the 404 is working as well let me do a Reload by pressing R right here and you can see that now it worked sometimes while developing react native applications you'll have to reload your application often and now we are on the onboarding screen we also have a warning right here at the bottom but you can just collapse it to close it right now we can close all of the currently open files and just head over to our welcome screen which is really an onboarding and the pages for the onboarding are going to look like this it's going to be a three page or three-step onboarding process where we'll have some nice illustration a title description tabs that move as we move to the second screen and then the button that says next so let's get started with creating our first real piece of user interface in a large react native application there's one small thing that I can see here and that is that we have one week warning pointed out by our webstorm in this case this is not a real warning because if you think about it it says unused default export but we're actually using a file based routing system so we never actually have to import the onboarding it is just being used by default once we go to that page so to hide this error you can press command or control shift B and type inspections and then search for unused Global symbol and tick it off click okay and then close and reopen your webstorm if you do that you can run mpm start one more time and the error will be gone great another thing you can do to clean up your workspace is go to toolbar and then toggle it off um I don't think I need all that info at the top and this just makes it so much easier for you to follow along and with that in mind we can now dive right into the onboarding I'll press R to bundle our app one more time so press this warning and we can get started everything is already wrapped in a safe area view coming from react native safe area context which is why we can see the onboarding text right within our screen next we can give our safier view some class names such as a class name is equal to flex h- full to give it a full height items D Center justifi Das between and BG - white so now this will Center the text horizontally next instead of this text right within the safe area view we'll create our first touchable opacity and we'll UT Ed from react native in the react native or mobile World a touchable opacity is basically just a button you know how on web you have a button here on mobile you have a touchable opacity within which we will render a text coming from react native and this text will say something like skip so in case we want to skip this on boarding we can do that what's going to happen if we decide to skip it well instead of onclick here we have an onpress activity and on press we can call a callback function and say something like router. replace and we want to go over to for SL off SL sign-up just like this and this router will be coming from Expo router so we can say import router coming from Expo router great now we can also give a class name to this touchable opacity and that's going to be a w full so full width Flex justify Dash and items Dash end in the padding of five so we show it a little button at the top right we can also style this text element by giving it a class name which is equal to let's do um text- Black text- MD for medium and font D Jakarta bold so this is one of the fonts that we imported it didn't seem to apply the Bold style so I think we should use the capital J there we go Jakarta bold this now works great now let's go below this touchable opacity and let's create a component that allows us to swipe left and right like we're in Tinder but we're not swiping different dates we're swiping the onboarding cards almost as exciting right so for that we'll install a new component in the new terminal mpm install react-native D swiper and we can use it right below the touchable opacity by saying swiper and we can import it at the top by saying import swiper coming from react-native D swiper currently this will break our application because swiper expects to have some things within it so let's add it first of all we have to create a new reference to this swiper so so that we can control it we can do that by saying con swiper ref is equal to use ref of a type swiper and at the start it can be set to null next we can just say ref is equal to swiper ref on this swiper we can also give it a couple of other properties such as a loop in this case we don't want to Loop over the swiper we just want it to come to the end after the three so we'll set the loop property to false it also allows us to change how the dots look like uh so the dot for the first swipe second and the third so we can say dot is equal to a view which remember is a div in a mobile world and we can make it self closing and give it a class name equal to w-32 pixels within square brackets h-4 pixels margin X of one and BG of a very light variant of a white color so that's going to be E2 E8 F0 and we of course have to import the view from react native and we also have to import use ref inside of square brackets from react now this is a very cool thing about webstorm as soon as we imported this use ref we no longer have to hover over it to see what it does you can see that it understood that this n that we passed is a property that that specifies the initial value similar thing here it recognized that the first prop or the first parameter to this function that we're passing is corresponding to an hre property so now as you're typing you can immediately know what you need to pass in it sure you could hover over it and see what it is but it is so convenient to just start typing something and then immediately know that that's corresponding to an hre in that specific method great so now we created this swiper and explained how a DOT should look like we can also duplicate this Dot and change it to an active dot so depending on which screen we're currently on and here we're going to change the BG color to something like 028 6 FF and we're going to make it rounded by saying rounded Das full as a matter of fact we can do that for the dot regular dot as well great and somehow we have to keep track of the indexes that we're switching from and to so we can create a new use State call it active index set active index at the start set to zero and then we can handle that with the on index changed property which will accept a callback function with the new index and we can simply set active index to be equal to the index that we have right here finally we can show something within that swiper and sure what you could do is create an array of things right here that's going to have different objects where each object will have something like a title it'll have an image and description and if you did this quickly your jsx file or in this case TSX would grew and then you would have to map over them but typically you don't want to combine the presentation which is the jsx or the TSX in this case with the data so the data of what we will be showing so for that reason it's always good to separate some of these pieces in specialized files in this case I'll create a new directory or folder called constants and within it I'll create a new file called index.ts here we can create a new onboarding array which will contain three different objects for three different screens that we have each one will have an ID it'll also have a title something like the perfect ride is just a tab away and we can