Inspiration

Every time I needed to create a new React Native application, I was starting from scratch, with the architecting, designing and piecing everything together. I needed to create a reusable template with all that, and as well other things I might need.

What it does

It provides a template which one can use to quickly start building their React Native application.

How I built it

I bootstrapped a new React Native application, and put in all the pieces like global stores management with MobX, routing and navigation with React Navigation, and an encompassing architecture and design philosophy on the project, that can be followed as I build future React Native applications, off of this template.

Challenges I ran into

Before building this template, I had already built a similar one for web with React, React JS SPA App Starter Template Framework.

In web, I was persisting my global state (stores) to "localStorage" for offline functionality. Also, I could set automatic persistence of all stores with "onload" of the web app. However, here in React Native for mobile devices I have had to find a way to perform persistence, only when requested; and this actually ended up teaching me how to achieve the same for the web (earlier, once upon an interview, when I presented my web framework, the interviewer asked if I could be able to find a way for only "on-demand" persistence of the stores, when such a use case arises, and so I have finally been able to achieve that).

Accomplishments that I'm proud of

The design I have implemented for managing global app state (stores) and their persistence to AsyncStorage. This facilitates offline capability, and also retention of test data, across development reloads, which can really better the developer experience, by the developer not having to fill out data forms across development reloads.

I am using MobX for the global state management, but it can be replaced with any other library on top of this same architecture and design. Also my design and architecture for navigation in this template, being handled by React Navigation routing and navigation library, is also agnostic of the routing and navigation library, and one can use any of their desired React Native routing and navigation library, on top of my navigation design and logic. All of this, is the culmination of close to 4yrs of building applications with React Native.

What I learned

I learned a little more about React Hooks and also greatly improved my Typescript skills.

What's next for Architecting and Designing a React Native Application

I want to build a CLI and maybe even a desktop studio, which future users can use with "low-code" to build even quicker, their React Native applications, based off of the design and architecture from this template.

Share this project:

Updates

posted an update

I have started on the CLI roadmap using Infinite Red's (https://infinite.red/) Gluegun (https://github.com/infinitered/gluegun), thanks Jamon Holmgren (Twitter @jamonholmgren) for the heads-up. Infinite Red's Gluegun is a utility for easily creating a Node CLI for your project, and is used by big companies such Amazon Web Services (AWS) for their AWS Amplify CLI.

Log in or sign up for Devpost to join the conversation.