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
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!)
This is what the app looked like when we launched it at 10 days:
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.
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.
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.jsfile into the root of
- Update the
index.jsimport statement to
import App from ./app/App.js
- Create folders inside
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.
In our app, we have five main screens
- Add Book
To get started, we’ll stub those out with placeholder text:
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:
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.
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:
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
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.
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!