React Native: First Impressions

Tasos Maroudas
Aug 17, 2017 · 4 min read

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:

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:

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!


Follow us on medium and join in on our journey of developing a math game — Math Warriors — with React-Native.

Wizope

Creating our first mobile app

Tasos Maroudas

Written by

❤ React Native. Part time blogger. CTO & Founder of Coded Lines Ltd

Wizope

Wizope

Creating our first mobile app

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