Todo App with React Native — Part 1

Warm up

Peter Lazar
Jul 22, 2017 · 3 min read

My history with RN

I have been playing around with React Native ever since the Android version came out some time in 2015. I had the opportunity to write a production app which did not have a long life for various reasons.
I thoroughly enjoyed working on RN even though there were a lot of frustrating bits. As far as I remember the major pain points were:

  • Navigation
  • Push Notifications
  • Animation performance

I’m sure there were even more issues but these are the one’s I remember. Out of these the jury is still out on a proper Navigation solution, react-navigation is the de-facto choice but people complain the animations still fall in the uncanny valley. Another popular solution is react-native-navigation from wix which is a native implementation, meaning performance is better. It seems like react-navigation + native-navigation from Airbnb is the sweet spot as demonstrated by Eric Vicenti ,when it comes to navigation in RN. Sadly the development on native-navigation has stalled since their focus has turned elsewhere. So for now, looks like react-navigation is the leader.

Push Notifications are still a pain from what I see. The leading choice is Onesignal. To be honest I have not done my due diligence here so I’ll come back and update this section.

Animation performance is much better now with native driver support for animations, which essentially performs animations on the native thread. Again I have to play around with animation before updating this section

Now I have the opportunity to work on another React Native app and have time to figure out how I want to do things. So what best way to figure out the lay of the land other than by building a non-trivial app.

Enter Todo app

I know, I know, a todo app doesn’t sound like a non trivial app, but with a very polished UI and cloud storage it could probably qualify as non-trivial. Uplabs has become my go to site for design inspirations and I’ve found one which I think is pretty good and simple.

I’ll be doing a blog post series on how the learning and the development process goes. I’ll document the decisions behind selecting a particular library or tool. I’ll try to go into depth about UI layout and animations which is where I usually struggle. This will be recorded as a blog post series.

A little bit of pre-planning

Alright, first things first, my text editor of choice is VS Code(Kudos to MS). It just feels solid and is performant. There are plugins for almost everything.
As for the app, my initial thoughts were to go with a generator tool like Ignite or Pepperoni App Kit but now I have decided to go with Create React Native App and pick my libraries à la carte.

My current thinking is that I will eject from CRNA if and when required. GitPoint is an OSS RN project that has caught my eye and I’ll be taking a lot of inspiration and configurations from that project.

So what tools/libraries am I going to use? As of now the list is very small:

ESLint with Prettier: for all linting/formatting purposes

Jest with Enzyme: for testing

In the next post we will go through setting up ESLint and Prettier. We will also setup pre-commit hooks so that only linter compliant code can be committed.

If you want to be notified when the next post comes out, follow me.
Please put in any suggestions and questions in the comments below.

Peter Lazar

Written by

Programmer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade