When React Native for Android came out I was excited to investigate it more at one of Liips monthly innovation days. Liip already developed a React Native app for iOS and we wanted to know how it works for Android. We were: Andrey, Germain, Lukasz and me. Germain is currently working on a cross platform app written with Xamarin.
For this hackday we tried to port an existing React Native iOS app to Android.
TL;DR: We are waiting for WebViews to be supported. See the pull request for changes. We didn't need to dive deep into Android APIs like XML Layouts for views.
How code sharing works
An idea was to use inheritance with ES6 classes to not redefine properties etc. We didn't explore this idea further yet.
What we needed to changeFor navigating between screens on Android we introduced the Navigator component. We used the existing route definition we used for the iOS navigator and fed it into the Navigator component. That went quite well, only a few lines of code were needed to make the navigation work on Android. Binding the back button we stole from the HackerNews React Native app. On iOS we still use the NavigatorIOS to keep the native look and feel.
Since we used the ActivityIndicatorIOS directly which only works on iOS, we had to create a new component “LoadingIndicator” which uses a ProgressBarAndroid on Android and the ActivityIndicatorIOS on iOS.
Like described above we also needed to add an implementation for the ProgressCircle component on Android.
What is not working
Our main issue was that WebViews are not yet supported on Android. We currently use WebViews for authentication on a website. Unless we find another solution to do this, we will wait for Facebook's implementation which should arrive soon.
Another topic worth to mention is the app states lifecycle. During our tests we couldn't find a way to interact with these events on android, although it exists for iOS. Hopefully Android will come along in a coming release.
Translations (new feature added to our app)To test out a feature which was not easy to implement with Xamarin, we looked at translations. For that we found a package which works on Android and iOS. We translated a few buttons as an example and it works well on both platforms. The device language is automatically detected, in the screenshot you see the french version.
All changes are in our pull request.
The idea of React Native is to learn once how to write React components and use this knowledge on different platforms. Knowing the APIs of those platforms becomes less important. For this first effort we didn't have to dive into Android APIs at all.
React Native for Android has potential, but we are missing some features like WebViews and ART which will come with time. In a few month from now we expect the Android version to have caught up to the iOS version.