React Native in GrabPay

Summary

Following the release of the GrabPay Merchant App, Grab adopted React Native inside the Grab Passenger app to maintain a single cross-platform codebase across iOS and Android. Integrating the framework into native applications required establishing bridge communication guidelines and incorporating React Native modules into the Grablet architecture. To streamline network communication, API calls were migrated from axios to native bridges returning promises, which eliminated the need to pass access tokens into JavaScript. The team also established a shared internal library of approximately 20 UI components alongside Redux for state management and react-navigation for routing. Modules like BillPay and Transaction History successfully launched across Southeast Asia while maintaining the performance and feel of native software.

Takeaways

1. 1

   Moving API requests from axios to native bridges returning promises eliminated the need to pass access tokens directly into the JavaScript layer.

2. 2

   Adopting React Native increased binary size but enabled half the maintenance resources by running identical codebases across iOS and Android.

3. 3

   Encapsulating React Native binaries into an independent framework simplified the upgrade process across Grab's multi-team Grablet architecture.