I’m currently developing an app for an class on my CS course using the expo for the first time and I’m having a lot of trouble to understand how the shared route would fit my app and how I should define my _layout’s (the way I’m doing I get just a blank screen, but it worked before adding nested routes to the (home)).
Right now I have the following structure:
https://gist.github.com/CPeluti/c8178fe61663b3fb8db331f59d792d3d
The problem lies in two points
-
The index.tsx is a screen that’s shared between the (auth) and (home) groups without any modification.
-
The animalListing.tsx screen is shared between the (profile) and (shortcuts), but this time the component receive an initialParam to define in which context it’s defined (either is a list of “my pets” or is a list of pets to adopt)
The way I’m currently trying to solve that puzzle is to have an array declaration (auth,home) and have the index.tsx there while having the declaration of the layouts individually. But for the animalListing, I followed the example on the shared routes documentation and made an _layout on the (profile,shortcuts) directory with all the declaration of the <Drawer.screen/> and I also have an if statement to decide which animalListing I should render based on the segment prop.
That said, the logic from my point of view seems almost right even though I still quite confused, since it worked until I added the (profile) and (shortcuts) groups. I suppose the problem lies in the use of the since I read somewhere that it chooses the first child, and I don’t think my current approach works with it.
Caio Peluti is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.