Recently we were invited to help others to resolve compatibility issues between IOS and Android. They have started with React Native but have developed their application only for Android. And then they wanted to make it work also on IOS. Here are some tips.

Android only components

Well, this one is obvious. Try to avoid components like ToolbarAndroid and ToastAndroid. Even when you think you will use Android only, it is pretty easy to wrap Android specific components behind your component. This allows you to update code on one place if you change your mind in future. Simple solution like this helps.

Custom fonts

Fonts are working differently on Android and IOS. Android uses filename to recognize the font but IOS uses font “real name” (for more info see e.g. this stackoverflow question). So if possible use the same name for file also. It was not our case. Thus we have extracted simple constants file for this purpose and used simple switch.

Locate all such constants for fonts, colors etc. in one place is always good idea even though you don’t have the problems described above. You never know when someone (customer, designer,…) decides to change the font or color.

Touchables and negative margins

Strange problems came with touchables that were covered by transparent Image. They used transparent image to make nice background and used negative margin so that it goes also over Touchable on the top of the screen. It worked fine on Android but caused problems on IOS. Touchable was not receiving input. This tends to be also problem when you want to align multiple touchable icons e.g. in one row (left, middle, right). Don’t cover your touchable by other views etc. Solution to this problem is usually reordering of view (make touchable the last) and/or use only dimensions you need (e.g. that View you use just for layouting does not use whole line but use fixed width).

Others

Of course we had also other topics we had to cover. Clearly you need to take care of properly installing all native dependencies. Another topic is specific styles for screen headers as IOS status bar is over your application (in contrast to Android). Here also helps common rule – use reusable components – as you can resolve it on one place. In-between we have fixed few general performance problems. Please, never use height unconstrained ListView!

Conclusion

To answer our question – no, IOS and Android are not 100% compatible even with React Native. However the differences are pretty manageable and can be localized to few small places if you think about them in advance and follow best practices. In our experience React Native is way to go in most cases. Not all of course – there is no silver bullet solution. If you have any doubts, please contact us and maybe we can help also you with our experience.