Can JS create awesome mobile app experiences with React Native?

Animations are essential to the mobile user experience.
People have grown to expect user-friendly handheld interfaces.

“It can make animations, but… it’s… jumpy. Nothing’s better…” Does this sound like a familiar thought when building mobile apps with JavaScript?My experience in Titanium, Cordova and the likes has given me the impression that I must compromise on animations and design when using these frameworks.

However, when I built Utayomin (tanka Japanese poems SNS app) for iOS and Android last year, I loved using Facebook’s ReactNative. So this time round, I experimented with building my animations and interactions with ReactNative for my new project.

Phrasal Verbs Flashcard
Having recently come to London and makingfriends who are learning English, I was inspired to build a flashcard app. Before getting down to coding it, I worked on the designby myself. One of the advantages of JS-based frameworks is that you can save coding time by developing for multiple platforms (and invest that time in design).

Here’s a summary of the libraries and functions I applied. Using the Animated, PanResponder, ReactART, and OpenGL libraries, I created general animations, card interactions, dynamic charts, and background blurrings.

Animated

Used for almost every animation, including the menu toggle and the dynamic charts.. When you create animations with ReactNative, the Animated library is your best friend.

https://facebook.github.io/react-native/docs/animated.html

PanResponder

Used for applying touch gestures in the cards (except for the return-to-center gesture, which uses Animated). This library is provided for applying touch gestures easily.

https://facebook.github.io/react-native/docs/panresponder.html

ReactArt

Used for dynamic charts, applying its animated shapes instead of static images. The animation itself was implemented with the Animated library (see above).

ReactART is the bridge library for the ART drawing library. React Native includes the library which enables us to use ReactART in the ReactNative environment.

https://github.com/facebook/react-native/tree/master/Libraries/ART

There’s not much information about ReactART in the ReactNative documentation, so I’m also watching another library.

https://github.com/magicismight/react-native-svg

OpenGL

Used in the background blurrings behind the cards. I didn’t try to do something challenging, like passing animation values to the OpenGL Surface. Instead, I animated the parent view of the Surface.

This library allows us to use OpenGL from ReactNative.

https://github.com/ProjectSeptemberInc/gl-react-native

Summary

It’s fun to try animations and develop quickly using ReactNative’s hot-reloading.

Naturally, because the framework allows us to deploy for multiple platforms, I released an Android version of the app. A few functions were ommitted, but overall we can provide a pretty good experience on Android without problems.

If in the past you had a bad experience using JS mobile app frameworks, give ReactNative a try. I think you’ll be surprised.

Thank you for reading :) See you!

P.S. I’m new in London. I’d like to talk about programming, design, startups, Japanese poems, etc… with many people. Let’s be friends :)