Background

Walmart had an iOS app built as a hybrid of native and webviews. The performance of the app was less than satisfactory - it was slow to load and the hybrid setup kept it from feeling like a true app. Walmart was happy with the performance of the native components of the app, but the webviews needed to go. Walmart worked with Formidable previously to update portions of their website in React, so they called us back in to help get their app up to speed.

Challenge

Since Formidable didn’t need to reconstruct the entire Walmart app - just the webview portions - the Pharmacy app was selected as a starting point for the long term project. Formidable needed to rebuild the Pharmacy App using React Native and reintegrate it into the existing iOS app to achieve better loading times, performance, and user experience. While React Native is great for mobile apps, it’s commonly used to build standalone apps, which meant Formidable needed to figure out the process of shoehorning a React Native app into an iOS app to get it properly embedded. Formidable also needed to train the Walmart team on best practices for React Native for mantainability.

Solution

Formidable began the process of rebuilding the Pharmacy app by creating a prototype with React Native to show Walmart its capabilities. Once Walmart approved, Formidable set out to build the app, dividing and conquering to build the different sections. Since there would undoubtedly be many common components within the app, the build for each section began with planning the UI so the common components could be shared. Once the main components of the app were created, the Formidable team needed to expose native functionalities like barcode scanners, hook up the real data to the real services to ensure the app was functioning correctly, and finally embed the new React Native Pharmacy app into the Walmart iOS app. During the process, Formidable worked closely with the Walmart Mobile team to train them on best practices for React Native.

Results

Formidable was able to successfully rebuild the Pharmacy app with React Native and reintegrate it into the existing Walmart iOS app, training the Walmart Mobile team in the process. The new Pharmacy app runs faster, performs better, and has improved overall user experience and their developers are prepared to maintain the app going forward.

Benefits

Previously, separate iOS and Android teams were needed to maintain and update the Pharmacy app. Now, because React Native is usable for both, any developer well-versed in JavaScript can make updates to the Pharmacy app and fewer specialists are needed to maintain it. Additionally, since JavaScript is easily transferable, the Pharmacy app only needs one code base that can be used for multiple platforms. With React Native, Walmart can also now push updates to the Pharmacy app without the long review process that comes with traditional iOS development. This means things like templating, layout, and certain bugs can be addressed in real time, without having to wait for people to update their apps. React Native has proved itself as an integral part of the Walmart stack and will set the tone for future mobile architecture.

Conclusion

Using React Native to update the Pharmacy portion of the Walmart app led to faster load times, improved performance, and better user experience.