but if you’re here, you’re probably in my shoes, with nowhere to go to, or no one to turn to. walk with me lets tackle it together

How Expo Router handles your routes

Naturally Expo Router uses your folders as routes in your app, also, it always looks for index.ts(x) in your folders to render as a page, if it doesn’t find any, it renders a “Screen does not exist“ page, there’s one that always comes by default so this doesn’t happen upfront.

Now sometimes in your Mockup or Figma design, there could be multiple pages that look like they have the same layout, but you don’t want to them to be in the same subfolder, that’s where the “( )” syntax comes in. example /app/(main)/index.tsx

when navigating, you don’t need to do something like push(‘/app/(main)/index.tsx‘) you just need to do push(‘/‘), then your (main) folder can have a _layout.tsx file that would handle security access logic

when you use this syntax to name your folder group, it disappears from your navigation paths, and it helps you group pages with similar layout together such that they don’t affect or show up in the URL when you’re navigating

This is perfect for cases where you want to secure a group of pages for Authorization or Authentication purposes, or premium purposes, and you don’t want the URL to be affected

Solution?

• First thing to make sure is that

  Your app routing or nested routing is structured properly, also try to make sure that you app’s “/“ page leads directly to your apps dashboard page, or logged in page, or whatever it is, you can use the “()“ syntax for groupings if you app has nested pages and routes and complex layout logics

• Second is to make sure all your pages (or the affected page, i.e. the page you noticed fast refresh isn’t working) only have one single default export of the page, any page that has multiple exports would have fast refresh disabled automatically

In conclusion, addressing the issue of fast refresh not working in Expo Router can be straightforward with the right approach and unfortunately these things don’t throw errors or warnings, so they can be really hard to debug. But by ensuring proper routing structure and adhering to best practices like having a single default export per page, you can maintain a smooth and efficient development experience. Remember, small adjustments can lead to significant improvements in your development workflow. Thank you for reading, and I hope these insights prove helpful in your projects.

If I have more points, I’ll make sure to update,

Thank you for your time!