WorkCase study 06

Radian Online Mobile App

A native iOS and Android shopping app for a Magento store

React Native, TypeScript, Magento

Quick facts

Industry: Consumer electronics and general-merchandise e-commerce (Southern Africa)
Our role: Took over a legacy React Native app, rebuilt it on current platforms, and shipped it to both app stores
Timeline: About 10 weeks
Stack: React Native, TypeScript, Magento

Summary

A native shopping app for a Magento-powered online store. Customers browse, search, filter, buy, pay and track orders from their phones, with everything the web store offers.

The problem

The retailer's existing app was plain JavaScript built on libraries that were no longer maintained, and it no longer built against current Android (API 33) and iOS toolchains, so it could not be updated in the stores. The client wanted a modern, maintainable app that matched the web store: full catalogue, cart, checkout with local payment gateways, loyalty points, gift cards and customer self-service.

What we built

Key features

Full shopping flow

home page with banners, deals and featured products; category browsing with layered filters, price slider, sorting and search.

Rich product pages

image gallery, configurable products with colour and size swatches, custom options, gift cards, related products, ratings and reviews.

Cart and multi-step checkout

discount codes, gift cards, a reward-point redemption slider, shipping estimates, and a review step.

Payment gateways

CyberSource card payments and DPO (Direct Pay Online), embedded securely in checkout.

Customer account

login and registration (including Facebook), address book, order history with invoices and shipments, order tracking, wishlist sharing and reward-point balance.

Engagement

live chat, store locator, newsletter signup, contact form and CMS content pages, with dark-mode support.

How we solved it

Challenges

01
Challenge
Modernising an old JavaScript codebase without breaking a live commerce app.
Solution
Converted the project to TypeScript in stages and got it running before refactoring anything. The old UI library was replaced one screen at a time and navigation moved to React Navigation through a central navigation service, keeping the app shippable throughout.
02
Challenge
Staying in sync with a complex Magento backend: configurable products, reward points, gift cards and multi-step checkout.
Solution
A single request module over a dedicated Magento API layer, plus a model layer (quote, product, customer, wishlist, with an observer registry) that keeps cart and session state consistent on every screen.
03
Challenge
Getting builds working on current platforms with native payment and social-login SDKs.
Solution
Upgraded Android to API 33, resolved CocoaPods conflicts for iOS, then integrated the Facebook SDK and both payment gateways on each platform and fixed dark-mode rendering across checkout and menus.

Results

One TypeScript codebase that builds for both iOS and Android (API 33).
Upgraded to React Native 0.72, with the unmaintained UI and navigation libraries removed.
30+ screens and about 50 Magento API endpoints, matching what the web store offers.
From legacy code to a working iOS build in about 10 weeks.

Stack

Mobile: React Native 0.72, React 18, TypeScript
UI / navigation: Gluestack UI, React Navigation 6, custom drawer, dark mode
Backend: Magento, via a custom API layer of about 50 endpoints
Payments: CyberSource and DPO (Direct Pay Online)
Integrations: Facebook Login, Tawk.to live chat, store-locator map, CMS content rendering
Tooling: ts-migrate, ESLint, Prettier, Jest, CocoaPods, Gradle