Learn React Native + Firebase

wrannaman
SugarKubes
Published in
2 min readSep 7, 2019

I remember learning react native by staring at the docs for hours and hours only to find out that in order to build a real app I would need routing, authentication, app intros, state management etc. I’ve felt for a long time now that there are a ton of coding schools and blog posts on the very basics of coding and then a great big gap where projects are either too small to be of practical use or too big to understand. Even after knowing how to do all of it, the idea of having to do it for the 50th time is annoying.

That’s why I created this starter kit. It’s small enough to fully understand, yet big enough that it can give you a head start on your next project or just a way to learn how to structure a project that may grow very large over time. Save at least 20 hours of development time!

Save at least 20 hours of development time!

Seemingly simple things like routing in React Native can easily take a day or two if you haven’t done it before. Why spend the time deciphering documentation when it would be much more productive to learn immediately from a well-structured project?

So what comes with this starter project?

  • Firebase — Complete authentication example with email and password, easily replace this with social authentication!
  • React Navigation — There are authenticated and unauthenticated routes as well as a signup and login flow.
  • App Demo Walkthrough — Check out the GIF below. It’s a few cards that users can scan through to get familiar with the app before they sign up or log in.
  • Drawer Navigation — See an example of a typical app setup with the hamburger menu in the top left that pops out a drawer of selection items like in the Uber or Lyft app.
  • Nested Pages (Master / Detail) — See an example of a typical flow from a master page (think a table with a bunch of items in it) to a detail page (more information on that single item).
  • Custom Fonts — See how the custom font (Raleway) is set up and easily swap it for your own.

App Walkthrough:

Oh and if you want a fully functional demo just download the expo app and scan this! If you’re unfamiliar with Expo, it’s an awesome open-source tool that allows you to build React Native apps faster.

Expo QR Code

So what are you waiting for? Hop over to SugarKubes and get started!

--

--