React Native for Cross-platform App — Android and iOS are not equal
When it comes to cross platform mobile App development, most people turn to React Native as it promotes itself: Learn once, write everywhere, or put it another way, write once, run everywhere! And it is true, with React native, you can use one code base for both Android and iOS App.
But my experience tells me that Android and iOS are not equal. Quite often something works perfectly in iOS which doesn’t work in Android. Android requires lots more efforts to make it work properly.
You may not agree with me, here are a few issues we encountered and some suggestions how to avoid them, hope that can help others.
JavaScript Run Time
JSC is the default JavaScript runtime that comes with React Native, but your better choice would be V8 or the newer Hermes if it is supported. Here are some issues we ran into with default JSC:
- Year 38 crash issue
Setting date beyond year 2038 can crash the whole App - Mobx observable array crash; some npm packages may not work as expected, for example, the popular cron-parser will throw errors with JSC
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***Build fingerprint: 'google/sdk_gphone_x86/generic_x86_arm:10/RSR1.200312.003/6304234:userdebug/dev-keys'Revision: '0'ABI: 'x86'Timestamp: 2021-02-07 11:13:56-0800pid: 11252, tid: 11387, name: mqt_js >>> mobi.autotext <<<uid: 10147signal 11 (SIGSEGV), code 1 (SEGV_MAPERR), fault addr 0x0Cause: null pointer dereferenceeax 00000000 ebx 00000004 ecx edd81c30 edx 38363032edi 00000000 esi bea67368ebp bea67458 esp bea67340 eip edd81c32
A little google will tell I am not alone, below are few links for your reference:
Large observable arrays do not play well with React Native Android · Issue #734 · mobxjs/mobx
Bundle size issue
The cost of using a V8 engine (Kudo/react-native-v8: Opt-in V8 runtime for React Native Android) will be the bundle size. After switching to V8, the bundle size of our App jumped from 40MB to 60MB, that’s a 50% increase! I think using Herme definitely will help, but we are using React Native Firebase which doesn’t support Herme yet, that leaves us V8 the only option. With V8, everything runs much smoother, we can even set schedules to 2068. I hope React Native will be still around at that time.
As React Native 0.64 will be released soon which supports Firebase. We will give it a try once it is available.
Keyboard layout
Keyboard layout is another simple thing that we struggle a lot with Android, and have been experiencing some weird behaviours.
For example, I had exactly the same problem as this one: header gets pushed up on Android when keyboard first appears. https://github.com/FaridSafi/react-native-gifted-chat/issues/1931
Below is the screenshot of my App. You can see the TextInput is in the middle of screen leaving a big gap between the keyboard. As soon as I start typing, it will drop down and display normal.
And even worse. I found that sometimes React Native code in the Emulator and real device would behave differently. This problem only happens on my Samsung and not in Emulator. I have to use real devices to do development.
Anyway, I was able to find a workaround after struggling for a couple days. Sometimes small things will kill you.