Thread by @Baconbrix

🚀 With the new File-based @expo Router, you can create some powerful app layouts––for mobile & web––in a couple lines of code!

I put together an example repo with a bunch of my favorites... and open sourced a brand new layout!

🧵 Check them out in the thread ↓

Replicate Twitter and Instagram profiles with this Collapsing Top Tab Bar layout (NEW).

Uses the Layout Route to render a shared profile, and child routes for the different pages. Just render children with scroll views, and the layout handles the rest ↓
github.com/EvanBacon/expo…

Bottom sheets are great for user-reachability––especially on larger devices!

Layout Routes in @expo can render the initial route as the main screen and a child route as the drawer.

Uses @gorhom's bottom sheet & adds automatic deep linking support!

github.com/EvanBacon/expo…

The default <Stack /> Layout is incredible! Powered by React Native Screens from @swmansion, you can render the native iOS stack with built-in search functionality, in just a few lines of code... Feels smooth as butter! 🧈

github.com/EvanBacon/expo…

Expo Router is so powerful for universal web⇄native because you can easily swap out native navigators for lightweight, custom layouts, per-platform.

Here's a basic web-styled layout that I created entirely custom github.com/EvanBacon/expo…

And here's how it looks on web. Just a couple of anchors in a div, and you're moving between pages––go as light as you want, wherever you want! 🪶

Material top tabs without a collapsing header is another great layout solution! Combining gestures with linking works out of the box in @expo Router.

github.com/EvanBacon/expo…

Tabs are not limited to the top of the screen either...

Here is another beautifully animated Material tab bar that works on iOS, Android, and web! Props to @satya164 for his great work on this component.

Here's how you use it with Expo Router ↓
github.com/EvanBacon/expo…

And of course, drawer navigation is another great pattern on native. This can easily be achieved using React Navigations drawer navigator ↓

github.com/EvanBacon/expo…

✨ End of thread ✨

I'm excited to see what you'll build! Check out all the example layouts here ↓

github.com/EvanBacon/expo…

Back to the top:

Try it today! ↓