React Native: First Impressions
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.
What is React Native?
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.
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.
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:
- 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:
- 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.
- 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.