Note: This is an ongoing series of blog posts detailing how we made an iOS & Android mobile app in 10 days. Feel free to follow me here or on Twitter to get updated when the other articles are published.

The not quite finalized list:

Building a Mobile App in 10 Days with React Native Building a Node API with Express & Google Cloud SQL Easy React Native Authentication: Auth0 React Native: Barcode Scanning & Autocomplete Using AirBnB’s Lottie Animations with React Native Deploying a React Native App to the App Store & Google Play

Summary

My friend Connor Maddox and I built this app together. He’s an embedded systems engineer with Boeing and I lead the product team at Realeflow, a real estate investor SaaS company. We are not Javascript wizards. That is to say, if you see something that could be improved, please feel free to let us know!

We *actually* built the app in 10 days. It nearly killed us. We had to learn a lot within a short period of time but we had an incredibly good time doing it. I primarily handled the iOS side, while Connor did the Android part. A lot of pizza and beer were consumed (Leinenkugel grapefruit shandy is life!)

You can find the app here for iOS and here for Android. Quick note: the app available on the App Store / Play Store is not the 10 day version. We have continued to push updates and are trying to make the product better.

This is what the app looked like when we launched it at 10 days:

Getting Started

I wish we could say that we started formally and had Sketch designs of where we wanted to end up, but honestly the project sort of evolved from one night of messing around. We didn’t even decide to set the goal of finishing in ten days until day three. I’d definitely recommend having, at a minimum, some back-of-the-napkin sketches before embarking on an app build. It would have saved us a lot of time.

Install React

First things first, go peruse the React Native “Get Started” documentation. There’s some things you’re going to need to download, like Node.

Now, I hate to step into controversy right out of the gate, but you have a decision point right when you start creating a react native project. You can either:

A. Use the Create React Native App

B. Build React Native from CLI. Essentially, react-native init AwesomeProject

The difference between these two paths is laid out a bit confusingly on the “Get Started” documentation. What it boils down to is whether you’re building your React Native project with Expo or not. Expo is a toolchain that was baked into the create-react-native-app library that removes some barriers up front, but in our own experience, adds barriers on the back end.

We originally started building the project on the Expo route but after the first day, we realized we wanted to implement certain libraries that were either not supported or only had alpha support via Expo. Additionally, we chose a fresh install instead of getting as far as possible and then ejecting. Sorry to all the Expo fan people out there.

Folder Structure

After you’ve finished installing, you should have the following files:

To start, I would recommend doing a little bit of housekeeping:

Add a folder in the root called “app”

Move the App.js file into the root of app

file into the root of Update the index.js import statement to import App from ./app/App.js

import statement to Create folders inside app

assets — We have two folders in this directory, images & animations.

components — This is where you’ll place all your shared components.

config — We set up our app’s color scheme in a colors.js file to keep things consistent.

screens — These are our main views.

Screens

In our app, we have five main screens

Bookcase

Explore

Add Book

Lists

Profile

To get started, we’ll stub those out with placeholder text:

Navigation

Once we have those five screens set up, we can get the first part of our navigation created — the tab navigation at the bottom of the screen. We’re going to be using the React Navigation library. We’ll add a router.js file to the root of our app folder and then install a couple of libraries:

npm install react-navigation --save

React Native Elements for icons & such. Follow the react-native-elements install instructions here

You should now have something that looks like this:

Adding Books

Now that we have the bones in place, the fun part starts. We’ll save the dynamic data part for a future blog post and use a static data object to build out a list of books. For our initial bookcase display we only need a couple of data points: id, title, author, and thumbnail.

Note: Keep in mind, you can and should break everything possible into shareable components. We were not the best at this due to being noobs and due to time. We’ve learned a lot refactoring all this after the fact.

We’re going to be using React Native’s FlatList component. This is a really neat component that works out of the box to loop through and display data. The reason it’s so neat is because it has a ton of functionality built in, things like: scroll loading, pull to refresh, etc.

Our bookcase.js file is going to look like this:

If you’re paying attention, you’ll notice that we need to add another file, BookcaseItem.js which is what our _renderItem function is rendering. This is what that file looks like:

Cool. Now we have books:

Editing Books

However, we’re not building this app to just list out books. We want to be able to edit these books, rate them, and write notes. To do this, we need to add a click event when someone taps a book, add a new screen for the edit area, and add a new route to our router.

We’ll add the TouchableOpacity and onPress function to our BookcaseItem.js file. It’ll look like this:

For the time being, we’re going to add a EditBook.js to our app/screens directory with some bare bones placeholder text and a back button. At this point, we’re just verifying it works.

In our router.js file we’re going to add a StackNavigator. I visualize the TabNavigator like five poker cards laying down on a table horizontally next to each other. When you add a StackNavigator, you’re essentially laying cards on top of one of those five cards, adding depth.

Now we have a simple list of books, we’re able to click onto it, see the edit page, and go back to the list. Woot! This is an important pattern to understand since it’s the same one we use for our Explore & Reading Lists areas.

This is just the start, but we’ve got the beginnings of the app set up and we’re ready to really start adding functionality. Stay tuned and we’ll keep publishing updates & adding walk throughs. Again, hit me up if you have any suggestions or thoughts. We’d love to get some feedback!