Migrating from React Navigation to Expo Router

chances are high that you checked out Expo router version 3 which recently dropped and you now want to migrate your own application from react navigation to Expo router I did a video recently on why Expo router version 3 is epic including the API routes but today we just want to focus on the migration aspect and how you can transform your existing react native applications to now use file based routing for that we will take one of my dummy applications here from a course on Galaxies which is a simple Tap bar number navigation so we got a tab new home and feed we can swap the feed on click and we can also go into a Details page and we're going to open a model it's a pretty standard setup for an application maybe you also have like a initial login page that could also be easily done but we now want to achieve this with this application so I will actually rename this to old and we're going to start and see how we can add Expo router to this application the first thing is if we want to do the manual installation you could actually make this a bit easier if you just start with a blank template uh you can use a TS template which has already the file based routing or the blank typescript template but we're going to do it hardcore so I will go with the installation command here I'll close this because right now this stuff won't work and this will add a few packages here like Expo constant Expo router and we can basically uninstall all of these packages right now so let's see what did I use did I use npm yeah npm uninstall uh bottom tabs native and Native stti so we can remove all of these from our package Json as they are still used under the hood with Expo router but we don't need them specified in here anymore okay cool next thing is we need to set up an entry point this is done in our package Jason so let's open this up and at the top we're going to change this here from whatever to Expo router entry we have to add a scheme to our app Json okay no big problem app Jon scheme this is done for linking we won't really do any kind of deep linking in here uh for web you can also add the M Metro but we don't need that right now and our Babel config should look like this how does it look actually it looks already exactly like that then we need to clear the bundle cat and we're pretty much good to go let's see um at this point we can't really start anything we can also safely remove our ftsx that's not required anymore um so let's move that to trash and instead we're going to create a new file at app index. TSX okay we shouldn't do uppercase that's really not required for Expo router and we're going to call this index.ts x react native functional export page okay this should be it um what did I mess up I feel like I messed up something because otherwise yeah okay it was just the file so now let's hit npx Expo start- C and I will close this here press I for the iOS simulator and then we should hopefully see that our first page is served so the index is the first page and exactly this is coming up right here so we have now transformed our app from react navigation to use Expo router and now it's time to add all the cool things that we had previously in our application so we had um a tap navigation in that application so a simple setup with a bottom tap Navigator the first Home tab then had the root St navigation so all the typescript stuff you know uh with the styling and the home and The Details page and the model page so let's see how we can come up with that for our own needs first of all if we want to create a T Bar we need to create a layout so let's create an underscore layout file here and I'll call this uh tabs layout okay we can actually still copy part of this logic so I will just copy all of the T Navigator fun and bring this into my new layout file yes we can really do this in a crazy way then we will replace tab Navigator with just TS so TS is now the surrounding element from Expo router and everything in here is a TS screen we also don't need components anymore so these references can be deleted and if we want to use ionicons we can just bring them in from Expo Vector icons okay that's mostly fixes it uh the only problem is that the name in The Case of the Expo router should simply be the file name so my Home tab is now not Home tab this is index uh and also show the header for now and then we have the feed and I notice we don't have a feed page yet so let's just copy the feed over and we'll call this under just feed and hit save okay and voila our Tap bar is done this is how fast we can go from one to the other um there are a few things missing right here uh like home doesn't really have a good title but let's see let's just try and continue from here on uh we also wanted to have a model file so let's copy everything from the model and let's do a new model. TSX file uh we can keep it just like it is the problem we now face is that we only have a TS layout for our Expo app uh for our Expo router app and if we want to include a model with a presentation type model uh we previously have this in the root stack group here with screen options presentation model and we kind of need that as well and we don't really have that stack navigation yet so what we can do is we will now put everything that we had from TS in a group so we will group all the TS stuff in here put it all in here and then we're going to add a top level layout file okay and within that top level layout we will just return a stack from Expo router uh why did the important n work go ahead please thank you and for that stack we can then Define two screens um yeah well not really that one but the modal is the modal and now we can copy what we had before so now where's my presentation okay I could really I could have really typed that myself I was too lazy uh this goes here to the model um options equals presentation model nice now the first stack screen is of course not correct the first stack screen is now our TS folder so we can change this to this I named this with uh brackets for a reason if you use Expo for the web all of this becomes a route so something that a fold tabs would become SL tabs SL something and if you don't want this to end up in the route you just want to group stuff together you put these around it okay so that's grouping now we still have our stuff going on um let's see we might have to reload okay this is how the app looks we still have the Tap bar at the bottom but we do see at the top we have an additional um header so this always happens once we Nest the layout and you need to fix this at all sorts of levels so this is not the last time you will have to say header shown false that removes one of the headers and we might have to fix uh another header later as well now we should be able at this point to include our models so I will just take what we had in the home screen and put it in our index screen this will make stuff not work so I will remove the Imports I will add the typescript stuff we had for navigation and then we're going to fix this because under the hood Expo router still uses uh react navigation so we can simply access that cons navigation equals use navigation from Expo router which fixes the problems okay then we have navigation navigate and we usually don't want to do this with Expo router there are two ways how we can navigate the first is to access the router using use router and so I will bring it in and then we can use my router to navigate to the modal page so uh let's command out the buttons for now because that stuff isn't working yet uh but the model actually works okay nice we've replaced that and our application looks already close to what it was before we can't go to the details page and we can't open that other tab but most of the rest is actually working now at this point I want to tell you that we're actually not using all the cool benefits of Expo router especially typed routes so what you want to do is you want to go to your app Json now and add a new blog experiments and within here you want to say type route true okay now we're going to kill our life reload and start it again we actually don't have to do it with clear command again I think but just how I did it and what happens is that once we are now using Expo rter somewhere we can go ahead um put a type in here and actually why is it not working yet um that's a good question probably maybe I need to open it again um router maybe it's also only if I do router. push yeah so here we go static types it's picking up all the available routes of our application and gives us the option so we immediately know what we actually can choose and if we do a mistake here we would get that nice red line which tells us this is probably not the way how to do it okay so we are now using most of the methods again we're not using API routes in here because we didn't have them previously check out my other video about that now let's fix this uh I want to open the other feed tab so how can I open that feed tab uh well I can still call router. navigate and just use the URL so voila I'm able now to go instantly to the feed now we still got two uh buttons here so as I said I don't want to use uh navigation object so so I will use navigate and we don't really have that Details page yet uh that's a that's a problem that's certainly a problem uh so how can we get that Details page well basically every page that you want to access is a file in here now the problem with this is that we are already inside a tab bar and we're trying to push to a page that means in the previous case we had a root deack navigation so we defined a Tab screen and that Tab screen actually had another route or another stack Navigator uh which then contained the home and The Details page and that's exactly what we now need to do as well by the way where did I get the color from ah oh yeah we copied that exactly nice nice nice catch okay so uh we need to do an inside or nested stack navigation that's not the easiest thing and it's kind of messing up a bit here uh in our application but honestly it's not that hard so let's go ahead ahead um we want to now group everything of that first Home tab together again I will just use a folder like this but we could also call it home directly um it doesn't really matter too much at this point it's just grouping the stuff together so for my home uh stuff I will now put the index file in there and home will also get its own layout. TSX so the levels now might be a bit confusing to you but this is simply on the uh level right here um let's call this one layout again and what we need in here is once again a stack and by the way we don't have to specify the rest in here if we don't want to uh Expo will actually pick up everything that it needs automatically so next to the index page I now want to have my Details page um I think since I'm in that group I should be able to just create create a file and I will call this item id. TSX so if we have a placeholder like this in the name we can then resolve that on that page to get access to params previously this was our Details page and I will just copy this over and then we're going to fix this okay so we don't have Details page props anymore we can remove all of that uh we can fix the navigation stuff again by calling use navigation and then we're going to see how to grab that there's another hook called use local search perams from Expo router which helps us to extract the item id here which is specified in the in the name of the file to that file if you want to make the typings correct you can also add item id string in here and then we're making even typescript even more happy okay cool this needs to be listed or actually should be listed I think we messed up everything in here let's try that's actually not too bad that's better than I expected that's better than I expected okay so that means um we first see that we have this home that means again we should now hide the header for that screen and bring in the screen options for the new stack layout okay then uh header shown fults for index should normally fix the problem where where are we showing the header as well we're not showing the header for here and for index okay yeah the name of that Tab screen of the first tab is of course not index anymore this is no home okay so we fixed that as well still going strong here the tapa label will be displayed however we lost the title but the interesting thing is everything seems to work so far the routing is a bit off and we're not really getting um we're not really getting the detail details ID at this point but we can fix this pretty soon uh but before we do that I just want to highlight again that in our stick in our nested layout here we haven't defined the index or The Details page and the deck still works because again Expo router picks up the files automatically defining them here with stack. screen is kind of optional I I mostly do this um so I mostly do this because of um like making it explicit what we but you don't really have to I just wanted to clarify this okay so let's say tit it's always picking the wrong thing here uh this could be like let's say call inside home okay changes to inside home and then we have a second screen here and now it gets interesting this is really Item ID so we pick up the name of the file uh the title doesn't really matter we don't need that part okay y that's still not working but that's expected okay most of the stuff actually works so far now we just have to fix the two routes so we've seen before that we can use router navigate but in fact I usually use with Expo router the new link component uh for link we can then use an href and again we see everything that is available now where do I actually want to go I kind of lost track of my my own thought here um so that should be like TS home and then like 42 I think something like this let's wrap that around the button that means we don't need an unpress event anymore and we can pretty much or hopefully do the same for the second button but we're going to probably do this in a different way okay so open details with ID 42 not working yet if you've WRA a component you always have to specify as child here and and voila we are on the details page of our nested TS navigation with the link component the other way to do this would be uh to still use my router and we're going to have to check out what it expects I'm actually not completely sure so router uh has a few things router can go back can go back navigate push replace Set params uh in our case we of course want to push the next page which expect either just a link like this so that would work or what you could do as well is you could make an more complicated then you can have something like uh I think path name uh which would be tabs home uh I'm not exactly sure I think this is actually wrong and and perams would be item id 1337 okay uh I feel like at some point point we have too many brackets or we're missing a bracket yeah we're missing a bracket um but this is not entirely correct in the URL should now be the placeholder okay and now it works so you have multiple ways of navigation um you can either wrap the link component around your components and then just have like the full URL you could also use string letter results or you could also use the router and then push replace whatever and if you want to make it explicit you can have the path name which defines the generic path name and then in the perams object you have what you want to pass to that page that could actually be multiple things so um I think we actually covered everything we have now transformed our application from react navigation we can safely remove this our entry point is here if you have a context you would wrap this around the topmost layout file in here if you now wanted to break out of the tab bar and have a page pushed on top of it you would Define it up here so there's like a mental shift uh that you don't include things in here Under tabs you really need to think about uh who's the parent layout of of which page that's basically uh a thought process that you have to go through if you want to go from react navigation to expore router but on the upside you get a lot of benefits you get these type routes you can get rid of all the typescript interfaces and declarations you've seen that you usually do for Rea navigation if you use typescript and on top you got like bundle splitting API routes and so much more with expor router I highly recommend to migrate from react navigation to expor router as it's the future I will use it in most of my videos because I really love the Simplicity of how fast we can set things up how we can just structure our code in that app folder to me it initially felt hard I completely agree it feels kind of strange especially the nested stick like layout we've done but once you've done this a few times you will feel really really good and really really confident about this let me know have you migrated your applications to Expo router version 3 already and Expo SDK 50 leave a comment below and also if you want to see more layouts I've created a full live stream where I've built basically all the layouts with explorator including tabs and draw and inside navigation and lockin screen so go check that out or watch another video that YouTube recommends and I will catch you in the next one one so until then Happy coding [Music] Simon

Channel: Simon Grimm

Views: 6,961

Keywords: Migrating from React Navigation to Expo Router, migrate react navigation, expo router, expo router nested layout, migrate react native navigation, how to move from react navigation to expo router, how to start expo router, how to use expo router, differences react navigation and Expo router, how to migrate your React Navigation screens to Expo Router

Id: NHNb--ISlig

Length: 20min 37sec (1237 seconds)

Published: Tue Feb 13 2024