It's hard to ignore the success that React Native has achieved in a short year. With the neck-breaking development in its ecosystem, React Native is looking increasingly promising. Is it mature enough for production use? How does its mantra "learn once, write everywhere" affect developer productivity? How does it compare with other solutions (such as Xamarin)? To answer questions like these, I decided to try it with my own hands and share whatever I'll learn in the journey.
I'll try to build a new app with React Native every one or two months (~ 1-2 hours per day), and write a post every week: silly mistakes, road blocks, gotchas and pitfalls, tips and tricks, cool tools, third-party components, useful resources and of course the full source code.
My background is primarily in Android (built a tool, wrote a Treehouse course) but I've used JavaScript and React in a couple of recent projects. Whether you have similar experience or not, I'm hoping you could learn one thing or two by watching me stumbling through the process.
Let's get started with building a todo list app that I've always wanted. I know, there are a million todo list apps already, but trust me it's very valuable for learning with UI paradigms that almost every app uses, sending and retrieving data to/from a server, user accounts etc. So bear with me.
On the completion of this app, we should be able to cover the following:
- Navigator
- Lists
- Tabs
- Touch gestures (Drag & Drop, swipe to dismiss)
- Google / Facebook sign in
- Firebase integration
- Android first, iOS next
Here are some wireframes of how I imagine the app would look like.
[TODO one wireframe]
I'm going to treat this as a formal project, so I'm sharing my schedules and deliverables here. :) You are my client and I'll be responsible for the time you've invested in reading this far. I'll try my best to follow the schedule and write about useful things.
- Project setup (and accumulate enough motivation to write this post). Here are some highlights from my notes so far: TODO.
- Hi-fi Prototype (with only mock data)
- Navigator
- Log in screen (only collect email address, does not actually sign in)
- Priority & Duration tabs
- Task lists
- Hi-fi Prototype (with only mock data)
- Create / edit task
- Drag & Drop
- Done tab
- Firebase integration
- iOS
- Google / FB sign in
Here are some highlights from my notes since I started working on this project in May. If you are really curious, feel free to check out the raw notes (I'm updating it live every day).
- On Android's new emulator: use
cmd+Mto bring up the dev menu - Debugging on a device:
adb reversedoes not produce any error message if the port on the host is already being occupied. If you see the red screen that complains about connectivity, make sure to free up the 8081 port on your computer. - Hot reloading sounds cool, but it still seems unstable as of 0.25.1. Often times it yells at you with incomprehensible error messages (see the raw notes). I had to manually reload JS.
- There is no
<Button>out of the box! You'd have to build your own with things like<TouchableHighlight>, but I'm still scratching my head why<TouchableNativeFeedback>does not give any feedback at all in my code! The fact that I haven't found anything yet on SO indicates that I must have made a really silly mistake. I'll shamelessly write about it when I figure it out. - For connecting screens together,
<Navigator>is the choice of weapon for now, but it seems it'll be replaced soon by something featuring single-directional data flow. I only read about it here and haven't found any proof of it, so take it with some salt.