React Native in GrabPay
Article Summary
Grab built their entire GrabPay merchant app in React Native, then used those learnings to rebuild core payment features in their main passenger app. The result? Half the maintenance resources with identical performance.
The GrabPay team at Grab's Bangalore R&D center shares how they adopted React Native for payment features across multiple apps. They detail their architecture decisions, bridge creation, and the technical challenges of convincing multiple teams to adopt a new framework.
Key Takeaways
- Single codebase reduced maintenance resources by 50% across iOS and Android
- Built custom Grablet architecture for plug and play modules in any framework
- Moved API calls from axios to native bridges for better performance
- Launched BillPay and Transaction History with 5 language support across regions
- Created reusable component library with 20+ stateless and stateful components
Grab successfully scaled React Native from a single merchant app to core payment features in their passenger app, achieving code reusability and faster development without compromising native performance.
About This Article
Teams at Grab across Southeast Asia and the US didn't want to adopt React Native. They worried the framework would bloat their app size, and that concern made it hard to get everyone on board.
Sushant Tiwari and Vinod Prajapati created fixed guidelines for how bridging libraries and communication protocols should work between React Native modules and native code. This gave teams a clear standard to follow and helped them agree on how to implement it.
Grab rolled out three React Native modules: Express, Transaction History, and Postpaid BillPay. BillPay launched in Indonesia, Vietnam, and Malaysia. The apps have been stable with almost no downtime.