Intro To React Navigation:

React Navigation is the go-to library to add responsive navigation to React Native apps. It provides features like Top/Bottom tabs, drawers and Stack navigators. It also works on web which is awesome 🔥. If you want to know about React Navigation in depth, read more here.

React-navigation Route Builder

This tool aims to quickly set up navigation routes in your app. It is based on the fact that APIs for all navigators are almost the same, which makes manual work seem extra and deems this automation really easy to achieve.

To demonstrate how the tool works, let's make a simple version of the routes used by Twitter's web app. The diagram below charts out the typical route that each major element in the Twitter Web App takes. Rectangles are screens and ellipses are navigators:

Why I felt the need for this?

I had been using React Navigation for a while now and generally, before working on the app, I get myself familiar with the designs. So, I know all the possible routes for within the app. I also tend to keep my folder structure the same. i.e. Navigators and Screens for every app, which makes setting this up a mundane and redundant process. I won't lie about the fact that I needed a tool that could quickly get the initial setup done for me. Needless to say, I rolled up my sleeves and went to build it myself.

Demonstration

Rather than typing long sentences about it, I reckoned it's better to show you how it works.

Try it out here.

Working

• This tool is built using NextJS and deployed on Vercel. In this tool, you first need to define your route structure along with your screens.
• On clicking Generate, it sends the JSON to the API (deployed on the same NextJS app) which generates the files, ZIPs them and sends back to the browser.
• I thought it would be tricky to generate files on Vercel but it isn't. It lets you use a directory named tmp for read/write. 🙏

What's next?

• A feature in the roadmap that I think could be useful is to debug deep links and preview the screens in the browser. I'm working on it currently.
• I would love to hear from you and know what should be added next to make it better!

Preview

Footnotes

• Try it out
• Source code

Thanks so much for reading/watching. See you next time.