Build EVERY Layout with Expo Router

and we're back with another stream I hope my recording is already live uh it usually has a delay to YouTube but welcome everyone to another stream I'm very happy that blind Ray is already in the house today another stream with just me Simon and react native and we're gonna do some interesting things today we're gonna get really deep into the Expo router before we do that I'd like to say hello good afternoon grab a cup of coffee because this might take a bit longer to explore all the different parts of Expo router that we can use and I know that people were kind of confused about this so if you got any questions please leave them in the chat use the chat there is a chat in the live stream if you tune in otherwise you can afterwards leave a comment uh thanks for the hearts let me know what you're tuning in from I'm just going to quickly post that we're live uh on the favorite platform do you already call it X I still call it Twitter I don't know I just don't get used to x i really I don't know uh join us live with all your questions about Expo router um by the way we're using Expo router version 2. we're using explorator version two uh there is already a re uh request for comments for explorator version 3 which I think Evan posted the other week so we can uh quickly check that out as well that might be interesting so introducing that is introducing explorado version two we already got enough problems with version 2 so let's directly hop into version three uh where is it you shared it the other day there it is so this is going to be interesting uh this is like the future of uh Expo routing I'm gonna just quickly talk about this and I'm really looking forward to dudes here API route inside the Expo router that's crazy um but apparently it's becoming a reality I mean yeah web Android iOS that's of course the thing we want to do with explorator but they're really working on API routes Now API routes inside a Native app that's always like how can that work how does it actually work I mean they are not really working inside your native app like these API routes will have like the whole app will have a static export and then you put that steady export somewhere where you have like Cloud functions or Edge function and they will serve your APR right but you can have it in the same project which is going to be really really amazing as far as I think so I think this is going to be really really great I also wanted to give you a quick preview of what we are building today so especially if you tune in later that always makes sense to give the people an idea of what we're about to do so if this could become a bit bigger thank you uh this is the application we are building and by the way while I explain this say hello in the chat let me know what you're tuning in from I already see the chat becoming very active so give a little hello from where you tune in I'm from Germany by the way um so we are building this application which won't win an award for beauty I'm really sorry it won't but it will show you all the necessary Concepts and the different concepts of Expo file based routing we're going to start easy you know the login imagine the login form imagine the registration area we all know it it pushes a page forward so we're going to talk about stack navigation then of course at some point gonna integrate a modal because it's just too easy to have something like this here for iOS then after the login we of course move forward into an inside area so it's important that we can't just easily go back we're going to take care of that so no swipe to go back to the lock-in as I always talked about in my app reviews as you can see this inside Area will for the beginning feature a tab bar at the bottom with three tips we will then talk about how we can go from one tab into the details page in a tab so see this tab is still active we're going to talk about how to actually pass some parameters to those pages over 9000 or how we could open a page and now notice difference like normally if I go into the details I have this tab bar but if I go into this one there's no tip bar so there's a difference sometimes you want to have something that covers the whole screen sometimes you want to have something that lives inside the Templar okay that's the next part then we're going to talk about a draw navigation yes we can easily Nest this in our tab bar so we see we have this drawer and we also have the second draw page here I'm going to talk a bit about how we can affect the names and and stuff but usually that's more like react navigation which you probably already know about then we also have this type actually don't know why we have that tub to be honest I don't know why I added that one it like it has no purpose in here at all I mean we can probably get rid of that job it's just a it's just a funny tap to have but now the important part um what we're going to do will also work on the web because Expo router we can also have a web preview and hopefully this now works um I should have brought this up previously but here we go so this is the same application of course it has no great styling for the web but it will work exactly on the web as well we're gonna have all of these things yes in this screen we're gonna have a tab bar and remember how we had that sidebar on our three uh tab which is the second tab yeah remember that that sidebar on the web there's actually not a draw menu on the web we're gonna have this custom setup which is using actually CSS so this is using real CSS and we're gonna have hover ill yeah that really like I almost broke my uh like an arm to get the hover effect working that was that was a hard one um so yeah this is Expo for the web and apparently it's going to work just like our draw did before and of course my details pages and all the other pages are working fine so that means we are essentially developing a universal application with the Expo router in this stream that is the plan I see five people already left after I announce it so uh thank you for tuning in it was a short Adventure um calab by the way the window looks cut off yeah I think I need to position this correctly um yeah yeah I got a have to position all the elements correctly once we start the coding which we're going to do in a second uh let's put this here I should like save my my layout or maybe I should have a button like to toggle myself that's something I gotta Implement for the next stream like to toggle my view down here uh that box that would make sense all right uh having issue with Expo router in test flight David ooh why is that the case I would be curious do you use react native app or Expo app with Expo route um so for the explorator to work correctly you can't use as far as I know or as far as understand Cedric you can't use the uh X the bear CLI because the Expo CLI adds some cool stuff that you need for the Expo router to work correctly I like your video the videos about ionic Wesley yeah I'm planning some more ionic videos in the next time as well I want to do a live stream maybe something with AI I haven't found the perfect topic yet but there will be a stream or video about this as well also I think next week let me look at my content calendar uh uh next week will be a video about capacitor background locations you're gonna love that uh something went wrong retry screen when trying to replace route oh that's David again um yeah we're gonna do something with replacing routes definitely in this live stream flow saying hi teams like next JS yeah that's something people still recommend um like even the Expo team is 270 degree recommending the setup with uh an expo mono repository and then shared routes and there are different ways to achieve all of this um so uh that's going to be interesting I just want to say uh I'm the creator of galaxies.dev so if you're new to this channel go check it out galaxies.dev where you can also become an expert react native developer the course library is ever growing not just basic courses but also courses about notifications push sqlite to stun thin stick query Firebase reanimated we pretty much got uh a lot of the important stuff already in here and more is coming every week and month um finally David hello from sibilities here hello from there hello from the Czech Republic uh you can now use Source app directory to collect all of your source code in one place this is why I was asking uh did I say that uh did I say that yeah we're gonna definitely use the Expo router by the way let's get started uh we got 10 minutes in so we got a lot to do today I want to intentionally do something different not to um not to make you like scared but we usually use the Explorer router tabs template so in most of the streams or tutorials I'm using this one and I think it's a great way to get file based routing started but there are a lot of files that I usually remove and I just want to show you how quickly we can actually spin up something without having that integrated because it's really not that hard so let me put this a bit to the side here and then I will start I will actually use button because it's faster you can you just use npx whenever I use bun X just use npx it's more like well it's not not a joke but it's just faster so I'm going ahead with Man X create Expo tabs routing otherwise you would use npx create Expo Dash app so for Bunnings they change this as you can see this is a lot faster so I will open this up with code and now I just need to position this in a nice way for you let's use all the space uh let's zoom in at least maybe five times maybe five times today oh this is going to hurt my eyes oh I have an idea I have a good idea I'm going on a workspace and zoom in so then I have that I like this okay so if I want to manually use the Expo router version 2 um I'm going to install a bunch of different dependencies so let's do this and as I said I'm using bun so I will run bun X Expo install uh Explorer direct nature safe area contact react native screens Expo linking Expo constant do I need expert constants Expo status bar Rec native gesture Handler I'm not completely sure if I need all of this but let's go with this level 5 great for Arena at all not at all yeah I guess I need to go to a level I don't know yeah but then I can't write anymore I'm sorry I do my best to to keep talking about what I've read um okay so how can we make um so first of all I'm going to kill what we had before here so I don't want that anymore I want to have this application now um so okay yeah we had that open before uh once we got that we need to set up the entry point so inside of our package Json I'm going to add a main XP Expo router entry which is currently something else so I'm going to replace that modify your project configuration add a scheme to your app config so open the app Json and add a scheme thanks for subscribing if I don't sometimes don't know if the people are subscribing are actually like in the Stream or just in general um subscribing I don't like that do you like that one yeah so we got the scheme uh hello from the Canary Islands welcome to the streams um and yes authentication with explorado I'm gonna do this in another tutorial and upcoming video again or in a stream when we use Firebase um then we also want to install the web stuff as I've shown we want to build for the web so phonics Expo install react native web and react Dom okay anything else in here okay enable under web the bundler so let's go back to the app Json under web we're gonna add bundler Metro now what I want to do as well is I want to have typed routes uh oh sorry we first need to do this one here to the Babel configs so in my Babel config actually I should also use reanimated in here so to set up everything I'm going to use Expo router Babel and react native reanimated plugin but the important part is that I want to use type routes um so there was a link I think to this uh initially that was set to true now it was false so under experiments I can set in the app Json type routes to true that will just give us some nice code compilation in our files and with that in place we can safely remove the app tier 6 and create a new file at app index.tsx call this page and say hello world as always and let's go bun X Expo so bringing up Expo pressing I for the iOS simulator and if we did everything correct we of course we didn't of course we didn't um how did I do that uh what's what's your problem uh cannot find module react native or reanimate it oh the good old reanimated bugs so for reanimator we usually have to run Expo start Dash C to clear the cache I was hoping that it just works if I run it the first time but apparently not apparently not uh sorry oh did I actually install the reanimated Plugin or did I only add it to my Babel config oh yeah I only added it to my Babel config I thought I had added it at some point um oh yeah I use this for a later part well while we are here let's do this come on let's let's wrap up all the installation stuff and then I'm gonna show you one more screen with all the installs so later on we're going to use the react navigation draw component and therefore I will now already install the drawer the gesture Handler and re-animate it and to just show you everything in one screen let me show this so you can take like a screenshot to do a new file start.sh I'm probably going to put this up on GitHub as well oh this is so much okay so as you can see we are creating the app we're installing a bunch of things uh we install the web stuff and we installed the draw and reanimate it we actually have the gesture Handler twice um probably we need it not in both cases all righty then let's do the fun again bun works with react native of course it does yeah it worked great and actually it's really fast so that's why I'm using it because I constantly bring up new projects and it just really it's it's for me it's faster so let's pray and hope that I finally got something to show uh because I like I preached that the setup of file based routing is that easy yeah here we go finally finally a success there we go hello world we're rendering our first page that means we have now file based routing set up successfully in our app and I just wanted to show this because you don't know what is the tabs template or you may be like intimidated by all the things you get from the tabs template so we've now covered the like four or five steps to manually go in an expo app to this just start with the typescript template and then add a file based routing all right let me take a sip of coffee because now the the actual work begins um ah that beat ah let's tune this up just let's do a hoop I'm in breast together two inhales through the nose one long one slow and then you exhale through your mouth all right now everyone's calmed down and we are ready for the next step which is adding our page here um I will in fact what am I gonna do where's my I don't want to do this yes uh I want to add a registration page so our index file is like the slash file I'm gonna also open with a press on W my web browser that should open at 8081 why not okay so hello world here we go on the web as well so we're gonna uh like periodically bring in this this web view again [Music] you check it out so the index page could be your login page now just assume this is my login maybe we're gonna also add now a stick layout and we do this by adding underscore layout file to our folder in this very first layout file I just want to export a stack layout by the way the name here doesn't really matter that I'm using so I'm going to replace this and use the stack from explore router if I don't do anything else I immediately get this setup so it's picking up all the files that we have in this folder for our stick layout that's the first part but usually you want to like somehow customize that so then you can get on it with stack.screen name is the name of your route in my case that would be index and I could have some options so I could have like a title log in here let me find the right closing brackets and then close the stick and boom we do have a login screen up here that's also the place where I could change the color tune it down a bit um what else oh yeah we wanted to go to the next page so that is the simple navigation inside of a stick that's basically like pushing another stack onto your page I'm going to create the register TSX uh let's call this page uh register users in here and now we can go to that page uh by different in different ways we can use a hook so we can grab the router using use router from Expo router and then I could spin up a button from react native and on press I could call router dot push and now we should get this is the completion we enabled with typed routes so now this is constantly like Expo is now constantly scanning our app folder and recognizes that we have these routes available actually just slash and register so that just makes it a bit easier and I can set title open register that would be one way and it just pushes my page and of course I have the usual swipe to go back stuff that works the way is to use the link component which is uh in my case usually a bit cooler so you can add the link from Expo router then we have the same fun we have an href and we have the route here register and I can put in a um what I'm gonna put in actually I'm going to put in a button as well I will just do it without the on press link so uh you see it's not yet working why is it not yet working that's actually a good question um but usually if you wrap another component with the link you're gonna add as child as you see that also fixes uh The Styling problem we just had and now I can go to my register page in both ways one is just like you can use this easier from code link can just be used in in all the places it just makes it a bit easier oh while we are on this page now let's do this later I have planned this for later now I usually stick to my plan so this is stack navigation nothing special I mean that's a lot you can do wrong with stack navigation it usually gets more complicated once you get into a Tap bar and that's what we're going to do now so let's create a new folder if I put brackets around my folder they usually don't appear in the URL so let me show you I add the one TSX uh page and I say tab one um how can I go there I can just add a link and I say open login uh no open or just say login so that would be what happens after a user locks in in your application and you can now go to Taps slash one and let's see this would push the tabs one page but is right I should also be able to Simply call slash one and omit the tip stuff and it would still go here also in the browser so open register Works open register with link works and log in as you can see it's probably hard to see but there's just slash one right now if I add a slash tabs one let's see what's happening um yeah it would still remove this so these groups are simply to group stuff together usually a draw a layout attempted layout or a group of helpful things and you just want to have some kind of structure in your file based routing so in my case I will add a 1 and a two dot TSX so we will actually just use two pages in my tip bar now how can we transform those two into an actual tab bar because currently we're just pushing this and I instead I don't want this I don't want to push this um oh that's interesting now I have nose oh yes you can still swipe to go back so I really don't want swipe to go back and therefore I don't want to push because the default if we use nature F the default is going to be pushing that route we will specify replace just push replace and that will push that page but oh yeah that was smart of me no I can't go back anymore really smart move Simon really really smart um okay so I can go to the inside Area I should probably on my first page add something so I can go back let's go here and let's put in a link and actually copy this from my index because I'm lazy so I'm gonna call this log out I'm gonna add all the missing Imports and this will just bring me back to slash replace so let's see okay so we can move to the inside area which is nanyana tab bar but we can already move out again that works good now let's transform our two pages by simply adding a new layout file next to it so the layout file next to the pages basically defines their layout well that's that's why they're called layout huh mm-hmm so in the tabs page we can do the same like we did previously where we just had this simple stack and we can just have Tim simple tips element this will pick up the different files in the tabs folder um let's do a little refresh here that's probably messing this up and log in oh ketoki so what do we see um probably I'm gonna show you this in a bit bigger way here uh oh come on xcode and simulator and whatnot I'm still behind um so we do have our tab bar down here you see I can switch between the tabs I am what I am I can go back here and I can go back in that's usually good but what happens is that we have outside uh stack layout and inside we have the tabs layout which also have has the default header so one of these should not be displayed and usually it's this one because this one and two that's actually the right error that's the header we want to see that's the header of those pages but we don't want this one up here so let's get rid of that um I probably can keep it also a bit bigger because like you don't have to see the tip bar at the bottom it's not like super important so in order to remove that we will go back to the top layout and say that we don't want that header for the tips screen so here in my top layout I will add another stack dot screen the name this time is the path to our tip bar which is just this group tabs and for the options I'm specify header shown faults okay close that and whoosh we're gone okay one two lock out lock in header register header everything's still fine we simply disabled the header for the layout of the tab bar good that's a good start now with that in place uh why don't we continue um of course for the tab bar we have the same stuff we can do for uh the stack layout so I'm gonna go ahead the first one was I think one so that was tip number one and I can have some tip bar what is oh you're mad about something I see it uh so tap screen name one options um tab was it labeled home and okay yeah that's great now this should turn to home and we can do the same for our second tab uh I was two and we can give it the label like profile and then you can also Define all the fun like uh what is it the icon tab bar icon so for the tab bar I can Define whatever you want ionicons usually works good so ionica oh come on ioni can't Expo can you just like Expo Vector icons oh come on ionic is it like ionicons from Expo or the Expo Vector icons they are not install them uh uh probably did not install them let's see Expo Vector icons and there should be add X po Vector icons yeah that's the place come on you had it all along and then you can do whatever you want so that should give us a nice little home page actually on the web we can see it even better so now we got that home button here and we also have a tab bar on the web which is probably not the coolest but we're going to talk about that stuff and web specific layout later is everything so far clear uh really 30 minutes I hope you're still with me um you're very silent I assume you're following closely or just listening with one ear let me know in the chat if everything's okay for you oh actually I had a big cup of coffee so that lasted for 30 minutes today it was kind of good following Francis thank you that's it that's the spirit ah it's getting warm in here uh and I'm at I'm at Point okay I prepared an outlier which has about 14 15 elements and I think we're at we're at four now so I gotta move on a bit here um but I'm ready I hope you're ready as well okay um we have the icons uh that icon only has the wrong size I think you can get like is it like this uh size color you can extract the color here and the size and you can apply this size color and as a result the icons actually have the right size also in our application and switch their color according so this is the place where you can do all the the fine-tuning um for your icons screens how did we get there I think there was another reason why I got here no no other reason well let's do one here just for the fun oh no we don't have a profile icon uh what's it called like body no person I think person you person it makes a makes a big difference here at least on the web you should see my personal icon that's actually a nice preview really we should just really keep the web preview and just develop on the web it's not too bad uh also everything here should just be fine we have not messed up anything yet um okay what was the next thing I think the next part was a Details page here let's do a Details page that's interesting so on my screen on my tab 1 on the Home tab whatever you want to call it I want to go into the details I want to go into the details in that tab so I will keep up the tip remember we have the difference between like showing it full page and just showing one uh inside so that means our page one needs its own stick layout this is an important part if you just want to use like the overall stick layout you could just push this above and we just cover the page but if you want to really have like a stack history in that one tab we're gonna have to implement our own layout for that uh page so what we're doing now is we create another folder for our page one actually we could call it we could potentially just call it one uh um God I'm gonna have to figure this out let's just call it one without the the thing we're going to see on the web and I will copy my one page into this now as it's already the one folder it needs to become the index file also at the same time this Raw I think the route will actually still work fine I think it will still work fine but in my one folder I will add a new file details.tsx page Details page and if I now want to go from my index page here from page one uh oh no it's now it's starting now we get the the first errors that is good that's good uh that was to be expected actually we got the first Arrow because there's no layout route name one exists that's coming from our tabs layout where we currently Define this go away go away huh go away well we already defined this so I think I don't I'm not exactly sure but maybe we can change this to one index okay yeah not too bad so now our one index works again you can change the header to whatever you want but it appears again in here let's see if I now add another Link in here and I want to go to tabs one uh no actually I want to go to tips one details open details I don't want to replace this time so it will just instantly open this page and it opens this page in a crazy way that we have this third tab down here which we definitely don't want to have now there are actually multiple ways how we can get rid of that tip but the correct way to get rid of it in this case is to implement our own layout file here in this folder okay so this layout file will now again use the stick okay everything else is gone let's see I will reload this let's see open login okay layout chain no route name one index exists okay I think this is uh uh actually there is a one index file I should have probably just grouped it together Nesta children one two yeah okay I see what you're doing there is it is it that back okay yeah so once you do the new layout file in this subfolder here you see there came up a problem uh that the pad suddenly was incorrect so that is a bit like something that's probably not working perfect yet in terms of the error messages because we could use the name one slash index before and once we add the layout file we can't use it anymore now it's just become one again so these are like the small things that people usually complain about they're not very well documented um so um but I hope this video now gave you an idea about that but what we see as well is that we have the same problem with the header area again right but this time we should know what to do so for that one screen I would say header shown faults and the header disappears and I can go to The Details page and notice we're gonna do this in a bit bigger way here notice how I stay within this active tab so I can now go to profile and then I can go to home and it keeps the history the history of that tab is still active because it has its own stack routing okay there we go and we can of course still lock out oh that log out that lockout kind of confused me now um locked out probably I should hit save ooh that Lookout is not really taking me where it should take me uh login interesting why is the lockout now not bringing me back there I mean I still I I keep staying in the one huh crazy uh that's interesting actually that never happened to me before I had the perfect flow set up but I also used brackets around the one folder so that is interesting what is the app that you use let me quickly think about this name one two header shown faults open details up until here everything is just cool but once I do the lockout on the index page I mean it has now the same name but there's only one index page yeah that should also be like I mean there's always this cool little thing here this is definitely not correct replace we have replace huh that's strange I wish Evan was here in the chat let me know what's wrong so let me try one thing that I did previously so what I previously did or let me first look on the web so on the web this would go to one slash details that's cool and the lockout test is also not working very well anymore um why are you not doing anything hmm it's like um I feel like this lockout is just just navigating to the index here like the relative thing again but it should work at the top level so I don't know why it's absolute path to the route EG feed slash hot replace as child um I'm not sure I'm going to try something let's try this I will change this to one in brackets I will probably mess up everything again because that means I need to use brackets here and oh this is specifically when I click lock in going there maybe that was the problem all along uh-huh interesting a lot of interesting things happening so the explorator is um funny all the time at least that works again oh actually it's not no I broke my whole layout alright so you also get a witness Simon debugging the explorator I was hoping that we could prevent this this time and I had a really good preparation but I figured out how to mess this up so tip screen and this is our tabs routing this is now also one um so now I should be able to go to the details the lockout is still completely messed up and I wonder why um so name Index this is a stick screen and then I have the tabs in here it's the only difference I have in my own code that I did before that's funny that's really interesting uh uh but we're gonna figure that out that's not a big problem um what else I wanted to show you while we are here is that if you add another page in here in the tabs folder for whatever reason all these pages will come up like if I add a hidden TSX and add a page it will automatically appear here in the Tap bar routing and sometimes you don't want that so in order to fix that problem you can set the href of that to null so in my tabs routing I could have a tabs um and say for the href hidden and voila it is removed again so I still don't know why we are on the Details page now okay let's figure that out so the layout here should be just fine for our one page the index page actually this should not have an index page now that I called it like this I'm going to call this 1. tier 6. so I think the problem was with the multiple index Pages uh in Europe so now that path is correct that passes right and navigating it should work with just tabs to be honest it should work but for the sake of this let's go directly to tip one I think this should now finally solve the problems let's do a Reload lock in lock out finally Okay so having another index file in that folder was not a good idea actually it kind of messed up my routing I'll definitely come back to that later I'm going to make a mental note or you probably can remember this and remind me about it at the end so let's recap we have a login we have a registration page we can log in we have an inside tab bar area we can't go back because we use replace and we're going to go to the details of one tip now I also want to pass data to that Details page how can we do that well that's actually pretty easy in this folder I'm adding something using the brackets here so this is a placeholder that we can then access on that page and we can get this by using const so we destructure this to grab the ID and we use use local search params you can actually add typings if you want to like ID string in here um close it okay and now I've used every letter that's possible and then you can say hi ID so let's add a link to this on my one page I then have the link to the details page let it add two more I will go to 42 and one three three seven [Music] and let's see why am I constantly on the details of page uh tip one one uh I feel like somebody brought us here into the wrong place for my tap screen for tips one okay here we go here I am open details still works open details 42 opens that page I should probably make the text a bit bigger um font size I don't know 28 I don't know you can see it better so we're on that page and I can pass data to that page uh red says I think the problem was with the one index is the first Metroid route yeah that is definitely true yeah if we look at that folder structure it was the first page here because those are just groups but it was like the one index if I hadn't used brackets around this I mean I use we're gonna come back to that in the end then we can try and mess up another page but I just want to like go through all the other things uh so we can hmm all right so we have the details page we're able to pass data we can hide a bar now uh let's quickly cover how you can also add a modal page a modal page is actually pretty boring it's really it's that boring let me just add it here so this is my modal page and if I want to present something as a model page the only thing we have to do is in my layout I will add another stack.screen name this case modal options uh presentation and then you're gonna see there are a few things card contain model contain transparent model form sheet full screen model so just go ahead with modal and then add a link to call this somewhere I'm just going to add this now I'm constantly on this page why am I always on the D stack on the details page I really don't want to be stuck on that page can I set for my stick like screen options something like default or initial page thought that was like uh something we could set up or for the tips was it for the tips yeah we can say that initial tap but that won't really help right screen options active let's not do this let's not but it's still curious that we go to that page all the time so if I know okay that's going to be different save actually on that fate I'm fine I'm fine I'm fine mobile page so that's the code here add another link this one will try to open the model the model and then we change this to open mole and voila there we got it so you can put this wherever you want in your application it doesn't really matter you could also have like um oh yeah that's actually a good place to talk about pages that you can open from everywhere so let's say you have like like some pages you need to open from everywhere let's call these auxiliary routes aux and I will add like uh disclaimer.tsx so on this page this is like the disclaimer I want to open this from everywhere and I want it to be across the whole application so not within my tab bar that means I will add this or I can add this but you actually have to add this anywhere I don't think so I think it should be picked up uh by our layout file so let's try it in my tab another button ox slash disclaimer open disclaimer and then we see it covers the whole screen so instead of The Details page which is using that internal stack navigation of that page we're now using the the above stack navigation like at the top level here which has also a stack navigation so whenever you have like Stacks tabs combined you just need to think about on on which level you're currently are and what should be above what that's pretty much all you have to figure out it's usually causing some confusions with the Expo router okay so we have a lot of writing we have the Tap bar we can replace we can go back I don't want to call this lockout test anymore this should really just be the lookout uh we have a modal we have a disclaimer um I think at this point we're ready to do the draw navigation um let's actually introduce another tip I will call this three very creative I know we could probably call this drawer so three uh if we want to create a draw navigation guess what we're gonna have to need a new layout file let's directly start with that um question was how to send object and router to another page let's that's a problem because if you deploy this to the web think about objects that are passed here in that URL that's going to be really really challenging you don't really want to pass like a base64 stuff in the URL so if you have this file based routing you usually want to pass around IDs you can still in your code in memory share the state like you can use two stand or whatever a provider or context to share objects but whether file based routing you usually just pass like small strings and stuff you can stringify parameters that would work as well but I like I recommend not to stringify a whole user object in the URL um okay where did I left off uh okay I wanted to do uh this thing here this draw navigation that's what it's called okay so I'm gonna have a page one and page two in here page one at TSX um page and that's like draw one and then we're gonna have another one page two dot TSX this is going to be draw two so now we just need to do the layout again and this will be the draw remember if you want to use a draw component um actually we should be able to import this from Expo router if you use that you have to install the packages that we add at the beginning so if you're just tuning in now for the draw you're gonna have to install a react navigation draw and the gesture headline reanimate it and set that up so if you're tuning in now go back to the beginning where we included all of that so this is my draw now and let's see I actually don't know okay I got the tip three and I just got the draw the only thing that's messed up is again that for Tab 3 it shows the header up here so we can get rid of that by going into the tip layout and for the tab three we will simply say hey please don't show a header and with that we have a draw inside of our temp bar life can be that easy with the Expo router really and also the whole stuff should work on the web I mean you I don't know if you wanna really wanna have a draw on the web you probably won't so we're going to talk about that in a second um but it would work it would work um let's just oh no yeah oh cool all good all good we're good we're good so we got the draw uh let's quickly talk about how you can customize that stuff so for example here these are automatically created but you can do something about that I think I have a course in on Galaxy's I just show how to like customize and build your own list inside of that draw component it's actually more complicated than I would think but at the same time it's also not too complicated and of course the setup here is the same if you want to customize the files like if I want to have something custom for my page one or page two I will use draw.screen use the right name of that file so let's say page one and page one should have specific options uh header title should be whatever my news feed and then we have the draw label should be like news so as a result we get an error as a result layout Channel your page one please so we see news is up here so that's the draw label comes up here and on that page I have news feed so my news feed my news feed is the header title and with that we have also integrated now draw a navigation that was really that was quite fast um uh yeah actually I have the yeah I have some codes so there's some code from the uh course on Galaxies which is using a custom drawer content so you can pass this into the draw and then have a custom drawer uh content scroll View and item list and that's basically how you do it if you want to customize that draw I think it looks cool out of the box and you can style stuff so sometimes that's already enough uh when another cases uh there's that okay I think um we have actually covered most of the Native stuff so we have a login we have stacks we have modals we can cover the whole screen we have a tab bar and we have a drawer component and everything beyond that is just like mixing these layouts in the right way in the right folders and structuring them correctly for the rest of the live stream we're going to focus on something else and we're gonna see how we can also change the behavior of our Expo application on the web so this is becoming really interesting I need to take a sip before we do that because actually quite a long stream we're already close to an hour so hope you're still there I hope you stick with me thank you Mike thank you red thank you everyone in here David it's an exciting stream it took me really some time to prepare all of this so if you're not yet subscribed make sure you subscribe to the channel there's a lot coming over the next time okay breaks over back to this what is this music it sounds like I don't know something I will listen to late at night although I'm not awake late at night I go to bed at 9pm um sizzle yeah whatever we're gonna listen to some Lo-Fi yeah okay that's a good good swag for what we want to do next um we gotta start we're gonna start by using platform specific modules that's going to be interesting I hope we can pull it off thank you Wesley thank you milrad everyone in there so this is my web preview of this application and I don't really like that I have this site bars this thing going on here um so what I will do is in my layout here for the uh so that is the layout file of three and that is the draw component in that file I would say that if we're on the web platform platform OS equals web we will return something else we will not use a draw only in the other case I will return a draw okay so in the case of web I will return um what do you want to return I want to return a div element um and probably spend WTF easy we are on the web having this WTF we are not having this on the mobile app all good all good we have the draw and on the web we have freed it we have unlimited freedom so let's do something here uh I prepared some code we can use style we can actually use CSS in here as well but let's start here with the flex one to cover that whole page um then we're gonna have a header area so let me bring this in because I don't want to mess this up and then I will close the div and close the header area and within I will add two link components so we're gonna have the same links that we have on the draw I just want to have like my drawer one and draw two so link href will go to uh Slash page one and again I will use as child in here and then we're gonna have a pressable for a reason I cannot yet talk about and within we're gonna have a text element saying uh page one okay this is my one link and then I'm gonna have a second one okay and again mobile app not affected by all of these changes because we have that check here but on the web we instead now have this we have a header area and I can change between page one and page two I don't see the content here yet the problem is that we now also need to render our actual content and we do this by placing a slot in here so that slot will render the actual content and now it turns up draw one and drawer two and you see this is actually a legit way how you could Target web you could even have a tip bar we could do this fun here actually I should have done that maybe uh will I do it maybe maybe not I don't know yeah just know maybe I don't want to break my whole app uh link doesn't work on web um all good links work perfect as you can see the only thing that didn't really work for me is a hover event so that is something that tamagui fixes really well uh and it's apparently really ugly to do this yourself so this is the only solution a came up with I used a state here with hover and accounts handle hover which will set the index of the current element I hover over and to use that I then updated my two link components or especially the pressable in those components to have unhover in it will call handle hover zero on Hover out it will call it to undefined as a result I can now hover over it and it will apply my styling do I like that not really not really a big fan of that solution it does work however um actually not too bad but yeah it could really break down like the performance of your application if you do overdo this so probably something like tamagui is handling that in a better way [Music] um also again um all of this hello Prof condosper welcome to the stream all of that would probably make even more sense in here so where we have our tips what are the tap names one check it out Taps slash one let's do this I'm messing up my whole app um else we show a tab bar nice one so because the tip bar is definitely something that looks awful on the web it really looks looks awful I will not use the unhover let's use this one and not use the hover styling just making it really easy so we had like tab one tab two what was that actually tabs slash that's the cool thing about these type routes step two and then yeah if I go to tip three we're probably gonna have a problem because that is also trying to do a header bar let's see so again mobile no changes we still have the tip bar but on the web let's start fresh and if I log in uh I will actually not have oh I've messed up the styling up there do I have the slot yeah I do have the slot uh but we definitely have no tip bar anymore at the bottom and I wonder what that one up there is uh because I'm on tip one what was the [Music] actually that's good got to go now see an XYZ and I actually I'm going to be on vacation next week Ray but hopefully gonna be back the week after thanks for tuning in and see you next time um so I don't know what my head up bar is doing here it's definitely not rendering what I wanted to render so I will remove this from the tip bar but as you can see this would be the way to have platform specific modules uh not render a tab bar so that was certainly something off with the header area okay um we got that we also got CSS support so we can actually have CSS support we just need to add a Metro config like this so let's place the Metro config here in our folder with CSS support enabled now where can we place some CSS um now you'll need to clear the cache okay that's good to know so I will stop my server and bring it up again um and let's see this is what I wanted to do so I want to use CSS so let me create a file next to probably page one or page two and it doesn't actually matter [Music] that's CSS okay in that style uh I'm going to add some some random CSS like a container with a background color a span and some some body stuff now on that page I should be able to get that let's see import style.css uh this is oh this is the draw page [Music] okay yeah that means we should also have a if platform in here I actually don't know if this works very well now four I have no idea I think I used somewhere a diff component the problem is if I just throw in a diff component here it will get really mad at me uh this contain a bit so because then the mobile application will say hey what are you doing like I don't want to have this um let's see but let's bring it up and let's see some errors although always good to see the actual arrows oh I'm compiling really slow browsers already not yet ready so Global styles are web only usage will cause your application to diverge yeah this is going to mess this up um you can use the class name in our component okay let's actually try this one out but I think the is going to fail here horrible because there's no div but let's check it out on the web so on the web uh I'm here and I got this so on the web it works automatically now there's of course a problem now we have one platform working web and one platform completely messed up MOBA not good not good idea not good so how can we fix this well we should probably not do it like this and just randomly throw in some some CSS into our pages in our export router what we should do instead is probably have some custom code for the different platforms and it will also make our app a lot more structured now uh as you might know you can have like a page.ios.tsx or dot Android as a specific file that does not work with Expo router in this folder but the export way to do this would be like this you can have a components folder and in that components folder I will Define my container.js first of all yeah it's a JS file so this will be the default implementation for that draw one page and now I will go back to my draw one page which was this one here and instead of rendering the stuff in here I will call this I'm going to comment this out and put in export default from so the right pass you could also use like relative routes if you set this up from my components container and let's see what happens oh I'm Gonna Save everything uh no this is like reloading or if I yeah I added a file oh it works again draw one default is showing up draw one default is coming up that is good so this is my page and now I can edit it in here so test you see this is definitely the page what we can do uh now is funny so I can now create another file next to this and I will call this container.web.js I tried Ts that did not work very well but probably there will be a fix for that as well also I want to bring in my style here I want to place my style next to this and for the code of my container web implementation I can now actually use the funny web stuff I can use the head component we're going to talk about that in a second and I can use everything I want I can use H2 I can use class name I can still use style like before and with that split in place and with our Xbox default using container on mobile we're using the default implementation we could actually have like an iOS special on web we're also using that uh let's see is it not yet picking it up um did I not edit a container Dot web.js probably has not picked up the page correctly oh come on that was the important moment don't do this to me Expo router why you do this ah come on that was the whole The Big Show that was your big moment for the web exploratory you destroyed it uh do you have to like reload this so it picks up the right files Maybe maybe not who knows um who knows please how about dot TSX or J that's a good question um Let Me Wait Until the foreign problem it was a catching problem all along ah okay let's talk about what we got here we have a solution we have both a solution uh with the different modules like using a if platform web then please use this dialect so you can like Define the the setup the structure of your page and we have a solution for using completely custom components for web and mobile so if I go here I have everything I have the side draw and I have the the pages here using the stuff from the JS file and here we're using all the web goodies do other file extensions work that's a good question um try yeah the TSX looks good um let's I'm going to close this one once again and restart it I probably shouldn't have to clear the cache all the time um but I just want to really see there's an action if that works that would be pretty cool because I really did not like the JS files so in that case thank you red that would be really really amazing let's see thank you red that was a good one thank you thank you thank you um so that's even better so now I can have my own components I could probably structure this a bit better what I used in here as well is interesting I used some head and meter information because if you want to build for the web with explore router you're gonna have to think about that part as well and what happens if we use a component like this and actually we can use the head component we can use this in a regular page if we wanted to so just giving you an example let's go back to the page two of the draw and in here I could also throw in the head components so let's call this uh News 2 page and meter description uh whatever so on the web I should be able to see on page one uh some meter let's go in there a bit closer uh title Simon's cool page um description check out Galaxy's Dev so meet her description and tag was rendered on the web correctly if I go to page two uh we see description whatever so we are able to also get like the good SEO stuff uh uh set up if we want to Additionally you can have like a global file for this that is also usually included in the default setup which is the plus.html I'm just going to bring this in this is the default setup you get where you can Define the stuff for your page so you can have like a default title or things set up the viewport this is always included with the Expo router for file based routing if you set it up like that okay I think this is actually pretty much everything we wanted to build we have a universal app that looks great on Native uses file based routing uses tabs uses a draw uh can do everything we want and we have a way to customize this for the web for the layout we have some sort of solution for the hover events which is really really ugly sorry and we also are able to actually use CSS in here now to wrap this up uh let's do one thing and that is export for the web so for native of course we can build with Expo and stuff let's see how we can do this for the web in that case I can just run bunex export export dash dash platform web and that should generate a static export of our application that I should be able to hopefully host with something let's see all right [Music] all good in here okay we have a dist folder with an index file we have some assets bundle some static styling we got some what is this oh well I probably don't want to know have I used any kind of http [Music] is it HTTP server dist and voila here's our static export working just like beat four uh whatever thing we have included and I could now easily throw this into whatever kind of Hosting for cell netley fire you name it let me try to quickly do this for you to give you an idea of this um so here's my netley file and I can just drop in as a folder I open this and I want to drag in my texts like really the ugliest way to deploy your website please don't do this in a real world but sometimes sometimes that's okay are you already good complete skip skipped and our Pages live foreign so this page should be available for everyone to use we got locked in we got the different screens so you can navigate around and see the stuff we have built over the wall last one and a half hour together uh that should yes everything seems to work just fine on the web so yes you can use um next JS alongside Expo and then you can use Solita to share your routes and especially use tamagui which works great for the different platforms but maybe this is also the future I really like this approach and if I want to build like a SAS or site project in the future I think I'm going to use the Expo router because it is already pretty good and as teased in the beginning with explorato version 3 we will also have API routes so that means potentially I will have some some API folder here um from I still get this like Ms um right so as we can see from the screenshot I will probably have like something plus API where I can do something cool um and within those API functions I could then see in a safe environment use for example yeah the open API key um use open AI or any other uh stuff that I don't want to use in my app so even if I use an environment firewall Expo it is not secure it will be bundled with my front end but in this case the API or the environment variables will be bundled only with that server environment and you can make requests to that endpoint so I can have everything in here which would be really really great for a lot of authentication scenarios um so that would make my life definitely a lot easier I don't know about you um so that should work so if can you try to implement safe area on web what exactly would be the safe area on the web uh I haven't tried that yet wouldn't you do it like with CSS and CSS variables and use the environment variables for CSS I don't think I would use the safe area view on the web I would probably only use that component for a native app also just a little pluck here at the end uh if you came this far if you enjoyed this content you will definitely love what I've created in galaxies um a lot of courses about interesting topics that you want to check out so here's the course Library again you can check it out at galaxies.dev you can actually become a member for free and then upgrade to a pro account and get these awesome stars in the background that's really the greatest thing we got I even plan to have like more stars in there we really need to double down on the on the whole Stars theme so if Brett is watching uh we need more stars we need more Galactic stars and and everything stars in there I mean Max width for a page um you you should probably use just like media queries and CSS for that and uh them for setting the maximum width of a page um let me check so for that page I wonder if that is my draw web let's see um this is I wonder if I can style the body here I should be able to write background red I don't have the live reload have I who killed this let's quickly bring this up again [Music] okay yeah so we can't just set the body background with or is it background color um we are yeah we are on the right page so that is the page that is rendered for the web um [Music] and I put in class name Simon here and wrap my app inside that what will happen that's a good question let's see I will say Simon is like this I mean for Simon I could probably have a mix with setup right um so I could do that and usually I would use a flex layout display flex and then Flex one is it justify content Center online items oops actually it's not Center like this um yeah I'm really the flex master um I just set it up with a width would it be then yeah well I'm I'm an idiot at that but you should definitely be able to do it with CSS I have a feeling that if you use media queries it should work um additionally we're probably gonna do like with uh with X baraja let me know in the chat if you're interested in because usually we focus on on the native app which we've built nicely with a draw and the tab navigation but let me know if you're interested in like building a cool website with export router just put a thumbs up or something in the chat and if you watch this afterwards um leave a comment below the video I think that would be really interesting because yeah I mean to be honest this is not a great website like this step bar down here you definitely don't want to have that on the web so we would probably have to come up with a custom layout maybe we're gonna have like a side menu bar or have it at the header and then um yeah something Yeah just something I would have to come somewhere okay Angela website with explorado would be cool red says thumbs up says thumbs up okay looks like this might be one of our next streams um maybe if I get to work on this during the cruise uh during the vacation next week uh then we can do this and otherwise that's it for today I hope you enjoyed the stream I enjoyed working with you thank you all for your support uh actually we passed this week a big milestone we passed 60 000 subscribers on this YouTube channel it's growing rapidly uh I assume we won't make it to 100K by the end of the year but I have hope that over the next two years maybe next three years we're gonna get to 100K so that has always been my live stream maybe we can finally reach it all right thank you again thanks for tuning in thanks for the support uh thanks for helping me out with all the bugs that I encountered uh have you got any problems afterwards let me know in the comments or check out the Discord channel of galaxies or find me on Twitter you gonna catch me somewhere I hope you have a great week thanks everyone for tuning in and as always happy coding

Channel: Simon Grimm

Views: 23,016

Keywords:

Id: IhzrgITqOWE

Length: 84min 15sec (5055 seconds)

Published: Fri Sep 22 2023