# React Native in GrabPay

[Grab](https://yomu.fyi/company/grab) · Sushant Tiwari · May 30, 2019

**Type:** Problem & solution

## 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.

## Context

GrabPay needed reusable code across Android, iOS, and multiple Grab applications to reduce long-term maintenance overhead and engineering resource requirements while matching existing native app performance.

## Approach / What changed

GrabPay integrated React Native modules into native apps using the Grablet architecture, standardized native-to-JavaScript bridging protocols, encapsulated React Native binaries into a dedicated framework, and built a shared component library.

## Takeaways

- Moving API requests from axios to native bridges returning promises eliminated the need to pass access tokens directly into the JavaScript layer.
- Adopting React Native increased binary size but enabled half the maintenance resources by running identical codebases across iOS and Android.
- Encapsulating React Native binaries into an independent framework simplified the upgrade process across Grab's multi-team Grablet architecture.

**Tags:** [Android](https://yomu.fyi/topic/android), [Architecture](https://yomu.fyi/topic/architecture), [iOS](https://yomu.fyi/topic/ios), [TypeScript](https://yomu.fyi/topic/typescript)

[Read original post](https://engineering.grab.com/react-native-in-grabpay)