Mega Bundle Sale is ON! Get ALL of our React Native codebases at 95% OFF discount 🔥

We’ve recently launched a free React Native Starter Kit, and I thought it’d be a good idea to document the entire process of designing a react native starter app, from inception to the final product. Hopefully, this can help people looking to create a mobile app and have no idea how to start and what the product design process looks like.

react native starter app

1. Why are you building this product?

In our case, we realized that all the apps we’ve built in the past have a similar set of features in terms of both user onboarding experience as well as tech stack. Starting from scratch can be both intimidating and boring even for experienced developers. Nobody likes to reinvent the wheel and getting started with a new project is a tough milestone. That’s why we decided to solve these common problems (which we have as well) with a complete React Native Starter Kit. Once we’ve identified these pain points, we then jumped into defining the product more concretely. Before you do any coding at all ask yourself these two questions:

  • What’s the main pain point my product will fix?
  • Who’s going to benefit from my solution?
2. What are the critical features that will define my MVP?

Now that we identified the problem, we took a stab at finding solutions. An MVP (minimum viable product) represents the minimum required set of features that support the basic functionality of a product. Fortunately, we were our own customers, so we knew exactly what there needs to be done. Almost every React Native developer in the world did these at least once:

  • Added a Walkthrough to their app
  • Coded the UI for Login, Sign Up and Welcome Screens
  • Implemented Login with Facebook in React Native
  • Integrated Firebase Auth & Firebase Database in React Native

These were the four main features I was planning to tackle for the first product iteration. Can you imagine how many developers in the entire world built those features all over again? That’s insane! I needed to fix this – that’s why I was building this react native starter app.

3. Design & Write the Code

Like for any mobile app, I had to go through the usual mobile app development steps: design, code, test. Since the app is going to be used by many developers, I had to keep a high bar when it came to code modularization, and at the same time, I had to keep the design light and clean, so that it’s easy to make any customizations to it. After all, nobody wants their app to look like a thousand others, so all the users of my react native starter app will eventually make their own customizations.

Coming up with a nice design was pretty straightforward. Look for inspiration on design websites such as Dribbble or Behance, and then come up with your own approach. If you’re not a designer, developer and have no product design experience, then it’d probably be a good idea to hire someone.

When writing the code, keep a high bar for quality right from the start. It’ll save you a lot of time down the road. Also, try to leverage open-source libraries (such as Instamobile, wink wink) with flexible licenses, to avoid reinventing the wheel and save a ton of time. Other than that, there’s not much to say here: just write the frickin’ code.

4. Publish & Get Feedback quickly

Once your MVP is ready, publish the mobile app to the Play Store/App Store and get a few users. Make sure the critical features work as expected and users have a way to contact you. Get in touch with your early adopters and ask them questions about your product. You should be able to gauge the general feeling of your community after a few conversations.

5. Iterate based on feedback

For our React Native Starter App, we’ve built several features, that were nice-to-have, after we spoke with a few people who forked our repo. That’s how we ended up adding Firestore support, Persistent Login Info support, and Logout functionality. Try to prioritize the features that are requested by your users the most, and don’t focus on anything that only you personally like – unless your goal is only to have fun – then you can go crazy on useless features.

Keep in mind that there are no overnight successes and driving adoption to any product takes a long time. So don’t get discouraged and keep hustling.


2 Comments

amarildo · April 15, 2019 at 1:29 pm

Congratulations on the initiative, but I did not find the documentation, like for example I go to my firebase, thanks

Amarildo Correa de Souza · May 19, 2019 at 1:32 am

How can I remove the top and bottom navigation bars from the HomeScreem screen in “app Starter App”, Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

Shopping Cart