React Native Pain Points ReactJS Bangkok 1.1.0

Me ● Manatsawin Hanmongkolchai (@awkwin) ● Currently studying at Software & Knowledge Engineering, KU ● Former Intern at Wongnai (Jun - Dec 2016)

Wongnai is launching a new product! ● Restaurant management system ○ Food delivery from your phone with LINE MAN application ○ Restaurant accept orders via RMS application ○ Written in React Native ○ Available for Android and iOS

React Native Pros ● It's native ● Cross platform ● Reuse your JavaScript logic ○ Many of the code in RMS were reused in Wongnai's ReactJS project ● The community is great ● but...

Cross platform pains ● React Native saves a lot of time developing cross platform application ● At Wongnai, I worked alone on both Android and iOS version of RMS ● … but it's not completely free

Cross platform pains ● Many things in React Native is not available across Android and iOS ○ MapView is not available on Android ○ Android Alert can only have 3 buttons ○ ActionSheet have no Android alternative ○ DatePicker in iOS is a component ○ DatePicker in Android is an API ○ Elevation CSS is only available in Android ○ Shadow CSS is only available in iOS ○ Push notification is only available in iOS

Cross platform pains ● Many of these things are solved in third party libraries ○ React-native-maps ○ React-native-push-notification ○ rn-date-picker

Cross platform pains ● ...but React Native third party API is sooooo unstable ○ React Native Push Notification used to notify the application twice on Android, one when notification is received, another when notification is tapped ○ There is no way to detect whether the user actually tapped the notification ○ I had to fork it to disable background notification to make both platforms have the same behavior ○ In version 2.0.1 userInteraction and background flag were added

Cross platform pains ● …but third party widgets aren't exactly that great ○ rn-date-picker's iOS buttons hitboxes are exactly the same size as the text. No padding at all. ○ So I have to fork it in RMS

Cross platform pains ● … but sometimes there aren't just any third party solution ○ There is no ActionSheet alternative for Android ○ There is react-native-dialogs, which is only available for Android ○ I had to write my own wrapper to Dialogs/ActionSheet

Cross platform pains ● ...and so now we have to test everything in both iOS and Android! ● React-native-maps requires linking with Google APIs/MapKit ○ Requires native application development knowledge

Breaking changes ● React Native used to releases biweekly (it is now monthly) ● It is not 1.0 yet ● … therefore breaking changes!

Layout woes ● The layout engine had multiple breaking changes ○ 0.28: Flex styling property behavior now behaves slightly differently ■ A few flex: 1 breaks in iOS ○ 0.36: Fix unconstrained sizing in main axis ■ This one breaks the whole app layout in iOS ■ I have to tell our testers "Check everywhere we have a button, because it will break" ○ 0.36: Default scrollview to flexShrink to allow views below it ○ 0.39: Android now use C-based layout engine ■ Now Android breaks the same way iOS do!

Breaking changes ● And this is just React Native. Every sprint I have to read changelogs of every packages. ● Semantic versioning doesn't help. Everything is not 1.0, therefore breaking changes is expected.

Automated testing ● At Wongnai we use Appium to test ● Appium is a WebDriver (Selenium) for mobile application ● As React Native is a native app, you can use native testing tools!

Automated testing ● ...but don't expect it to be cross platform ● Appium is cross platform, however the underlying way of finding elements is different ● React Native have testID, but Appium doesn't support that (RN #7135) ● We have to use accessibilityLabel for testing

Automated testing ● … but iOS doesn't allow accessibilityLabel within clickable stuff ● Also, you have to scroll your view manually. Good luck!

Automated testing ● In the end we use Android emulator with very large screen to test (so we don't have to scroll) ● With hacks to make information available within one accessibilityLabel ● And later the iOS tests were neglected ● And the tests run very slowly ● In the end I ignored the tests and only cares about testing Redux reducers

Knockoffs ● React Native is native ● … but it's not using the native widgets you're expecting ● So, same as WebViews you're responsible for making them feel native

Knockoffs ● React Native only offered button component in later versions ● But in any case, button is a styled View

Knockoffs ● More painful: Action bar ● It looks like one, but it's not actually one ● This one put tab in the bottom

Knockoffs

Android lag ● React Native is really fast on iOS ● … but not on Android ● Android LayoutAnimation is behind an experimental flag ● It is extremely noticeable in debug mode. React Native Redux Router have only a few frames moving from page to page.

Many elements ● React is a virtual DOM implementation ● We swap the DOM to native elements, and we get React Native ● And so having a lot of elements slow down the application to a crawl.

Many elements ● Take calendar, for example ● We used react-native-calendar ● As each date is a View, switching month takes a few seconds to complete ● In the end, we have to use native date picker

Many elements ● Sometimes it can't be avoided ● Our restaurant information list is reallyyyy long ● It freeze the app for a few seconds while it loads ● Every time you make a change it freeze ● In the end I hacked ListView together, it is now twice as fast (but still freeze) ● But if you scroll really fast the ListView will not end at the end of the page

Conclusion ● React Native is great for cross platform development ● … but it's not completely free like Cordova/PhoneGap ● Learn to live with its gotchas, and you'll save a lot of time ● We launched RMS in 6 months

Thank you