React Native: First Impressions

Published in

Wizope

4 min readAug 17, 2017

If you are still working with WebView based apps, then it’s high time you reconsidered! React-Native has disrupted the mobile app scene offering unrivaled features and capabilities casting a shadow over WebView.

For us, first impressions were very promising for both, Android and iOS devices; especially regarding performance. Check our experience unfolding below.

Image 1: React Native for iOS and Android

What is React Native?

If you are not familiar with React-Native already, here is a short introduction. React-Native is an open source User Interface library built by Facebook that enables web developers to build a native mobile app for iOS & Android without the need of coding Objective-C & Java. Instead, we are able to accomplish that by writing JavaScript. As per the React-Native docs:

With React Native, you don’t build a “mobile web app”, an “HTML5 app”, or a “hybrid app”. You build a real mobile app that’s indistinguishable from an app built using Objective-C or Java.

Image 2: JavaScript to native code through React Native bridge

First impression

Setting it up is really easy! Official instructions are short and easy to implement and on top of the traditional setup steps, react community has built the create-react-native-app project, which is a single repository that provides out of the box literally everything that someone needs to get started. Project initialization is as simple as an npm command.

Moving on, hands-on first experience feels nice and fast; working with the basic components such as View & Text seems fairly easy for the young Facebook project. Adding style to your views is a bit strange since CSS properties are written in JavaScript and as part of the StyleSheet object but this is overcomed now with the use of the styled-components package. Finally, navigation between views seems a bit harsh to understand in the beginning, but after a while it makes sense.

Last but not least, React-Native comes with some developer tools that make JavaScript debugging easier than actually expected.

Problems faced

As soon as you start getting involved in a real project, you will unavoidably find yourself in some problematic situations while coding. For me, it started while trying to convert visual designs to application views. Find below a few problems the team faced and how we managed to work around them:

CSS:

Not all values of a CSS property are always supported
For some properties not all values are supported, i.e. border-radius property does not work with percentage values. This is a limitation and in our case we managed to have a very similar result with the original design by trying a few different CSS implementations and using border-radius pixel value.
Text styling is not like in web
Configuring a single div that contains text is not as straight-forward as in web development. In React-Native we need a combination of 2 components to achieve that: a Text & a View. The Text component is needed for the actual text; text style properties such as font-size, font-family, color etc are configured there while the box model properties like padding, border etc, must be configured to a View component that will encapsulate the Text. In example:

<View style={styles.boxModel}>
  <Text style={styles.text}>
    {text}
  <Text>
</View>

Animations:

Performance is not always ideal
Animations’ performance can be improved with the use of the option useNativeDriver that utilizes native code only to run the animation. Unfortunately and as the documentation itself states:

Not everything you can do with Animated is currently supported by the native driver. The main limitation is that you can only animate non-layout properties: things like transform and opacity will work, but flexbox and position properties will not.

Workarounds can be found through trial and error, i.e. you can add timing delays to the animation in order not to look like it’s dropping frames or use the LayoutAnimation API if possible.

P.S. It is very important to always test animations’ performance on the device, emulators cannot provide accurate feedback.

Facebook SDK:

Hard to install for both Android & iOS
Our upcoming math game, Math Warriors, will support the Facebook login feature. It was a bit hard to install the package for iOS in comparison with Android and it was even harder to make the package work well for both platforms at the same time.

Is React-Native worth a try?

Definitely! There a few imperfections to be ironed out but as the React-Native project grows and the SDK matures, more and more features are becoming available. Most important of all is the performance it offers since the apps that are developed are actually transformed to native ones and if you exclude some problematic animations, the app runs blazingly fast.

What were your first impressions with React-Native? Feel free to share your thoughts. Any comment will be much appreciated and are more than welcome!