Initial Thoughts on React Native from a UI Developers Perspective

I have been wanting to try out React Native for quite some time now. I’m constantly on my phone looking at how my favorite apps perform, and thinking to myself how fun it would be to build it for the web. Since we are going to need an app soon for Yaguara, I decided to dive into React Native this past weekend and see what I thought about it. There were some things that very easy to pickup, and some that will require deeper thought.

Dealing with Xcode

I would love React Native even more if I didn’t have to deal with Xcode. If only it was as simple as hitting an “Add to Home Screen” button. Like most developers, I want to get into the code as quickly as possible, so having to setup a developer account and then deal with all of the certificates and provisioning profiles was not a fun way to start.

However, the fact that I don’t have to learn Objective-C or Swift makes up for that in a big way. I’m sure actually getting it published to the App Store will be another hurdle but luckily we have a CTO who is smarter than me and can assist with that (Sorry Chad).

The Syntax

Once I was able to get everything building and showing up on my iPhone, I started playing around with some of the components. The first thing I noticed is that there are no web elements. No div’s or span’s getting used here. This is not a big issue, there’s a component for everything these days and Facebook always has great documentation.

The next thing that came up that I’m not too happy about is the styles in JavaScript. CSS architecture is my passion and really do enjoy getting that minified stylesheet as small as possible. I know there are benefits of CSS in JS, mainly forcing you to keep everything very modular but not having access to all of the great benefits of CSS pre-processors like mixins and functions will be a hard thing to get used to.

Scalability and Maintainability

One thing I’m going to keep in mind is component continuity. We take advantage of public libraries, so trying to find ones that have a web and native component with the same API will make updates much quicker and easier. For example, we started off using ChartJS for our visualizations but have now switched to VictoryCharts so that our code bases will be a little more similar.

Simulator inspector screenshot

I also wish I could use Chrome Dev Tools for debugging. I haven’t done much research so there might be something out there but the inspector that is built into the simulator isn’t that great. It has an element tree and shows you the styles but being able to work directly in the inspector to style elements instead of going back and forth really speeds up my development time.

Overall, I had a lot of fun with React Native and was able to move pretty fast with it. If you’ve build React applications in the past, and are familiar with ES6, then you should be able to pick up React Native rather quickly.

If you have any questions about React Native that you would like for me to go into more detail, shoot me a question on Twitter.