Mobile app for clients

Loyalife provides a white-label mobile app that client organisations deploy for their channel partners (retailers, distributors, sales agents). The app gives partners visibility into their points balance, available schemes, claim submission, and rewards redemption — directly from their phone.

Architecture

The Loyalife mobile app uses a Server-Driven UI architecture built on React Native. Rather than shipping separate apps for every client, a single React Native codebase renders any client’s app by reading a JSON UI schema from the server at runtime. This means:

Benefit	What it means in practice
No app store releases for UI changes	Updating a screen layout, adding a new section, or changing colours takes effect immediately — no app store submission required
One codebase, many clients	Each client gets their own branded experience (logo, colours, screens) configured in the admin portal
Component registry	All UI components (cards, lists, banners, buttons) are pre-built as a library. New screens are assembled from existing components via the JSON schema

How it works

When a partner opens the app, it fetches the current UI schema from the server for their program.
The Dynamic Page Renderer reads the schema and assembles the screen from registered components.
Data (balance, schemes, claims) is fetched from the Loyalife API and injected into the rendered components.
UI changes made in the admin portal take effect on the next app open — no reinstallation needed.

App screens

The app is structured around five primary sections accessible from the bottom navigation bar:

Home

The home screen is the primary dashboard for the partner. It displays:

Element	Description
Points wallet	Current redeemable points balance, prominently displayed
Active schemes	Cards showing ongoing earn opportunities available to the partner
Custom rewards	Highlight tiles for reward catalogue features (configurable per client)
Notifications	Badge count for unread alerts

The home screen layout — which sections appear, in what order, with what styling — is configurable per client via the App Config in the admin portal.

Schemes

Lists all active earning schemes the partner is eligible for, with:

Scheme name and description
Point multiplier or earn rate
Validity period
Eligible product categories

Partners can filter schemes by product category or status.

Claims

The claims section handles invoice-based point earning:

Submit a new claim

Partner taps New Claim, selects the claim type (invoice or warranty), and uploads invoice photos.

OCR extraction

The system uses OCR to extract line items from the invoice photo. The partner can review and correct the extracted data before submitting.

QR code scanning (if applicable)

For QR-linked claims, the partner scans the product QR code. The system validates the code and pre-fills product details.

Track claim status

After submission, the partner can monitor the claim through the approval pipeline — Submitted → Verified → Approved/Rejected.

Points

The points history screen shows the partner’s full transaction ledger:

Points earned per transaction with source details
Points redeemed with voucher or reward details
Pending points (approved but not yet posted)
Expiry schedule

Profile

Account management for the partner:

Registered name, phone, email
KYC status and documents
Support contact (configurable per client)
Terms & Conditions link (configurable per client)
Privacy Policy link (configurable per client)
Logout

The app uses mobile OTP authentication:

Partner enters their registered mobile number.
An OTP is sent via SMS.
Partner enters the OTP to complete login.

There is no username/password. The mobile number is the identity anchor for all partner accounts.

KYC verification

For programs that require identity verification, the app supports two KYC methods:

Method	How it works
DigiLocker integration	Partner authenticates with their DigiLocker account; Aadhaar and other government documents are pulled directly — no manual upload required
Manual document upload	Partner photographs and uploads required documents (e.g., Drug License, GST certificate, PAN card)

After KYC submission:

The documents enter a review queue in the admin portal.
If approved, the partner’s account is activated and they can begin earning.
If rejected, the partner is notified and can resubmit corrected documents.

Re-KYC: For programs that require periodic KYC renewal (e.g., after regulatory changes), the app supports a Re-KYC flow where existing partners re-verify their identity without losing their account history or points balance.

App configuration (admin)

Each client’s app is configured from Configuration → Channel Partner Config → App Config in the Loyalife admin portal. The configuration is a structured JSON document that controls the entire app experience.

App Config structure

The App Config is organized into the following top-level sections:

app            → App-level metadata (name, version, default language)
theme          → Brand colours, fonts, logo URLs
splash_screen  → Splash screen image and duration
user_type_screen → User type selection screen (shown at first login if multiple user types exist)
login          → Login screen configuration (OTP method, branding)
home           → Home screen sections, per user type
side_menu      → Side navigation links, per user type
bottom_nav     → Bottom navigation tabs, per user type

User types

The app supports multiple user types — each with its own home screen layout, side menu, and bottom navigation. The two built-in user types are:

User type	Typical use
Seller	Channel partners, retailers, distributors — focused on scheme visibility and claims
User	End consumers or members — focused on points balance, rewards, and redemption

Each user type has independent home, side_menu, and bottom_nav configurations.

Home screen sections

The home screen for each user type is built from slides (full-width banners) and sections (component blocks). Slides support redirect_url to navigate the partner to a specific screen or external URL when tapped. Predefined sections available to add to the home screen:

Section key	What it shows
`Current Scheme`	Live earning scheme card with current earn rate and validity
`Video Gallery`	Video content carousel (configured URLs per client)
`My Tools`	Quick-access tool tiles (links to app features)

Custom sections can be added by configuring component names and data sources in the JSON. Each user type has its own set of bottom navigation tabs. Tabs are configured with icon, label, and destination screen. Predefined bottom nav items:

Item	Description
Home	App home screen
Claims	Invoice and warranty claim submission
Scan	QR code scanner — configured as a special button (see below)
Redeem	Reward catalogue and redemption
Profile	Account settings, KYC, support
Catalogue	Product / reward catalogue

Special button (Scan): The Scan item uses the isSpecialButton: true flag, which renders it as a prominent center button in the bottom nav bar — visually elevated above the regular tabs. This makes the QR scan action immediately prominent for channel partners. The side menu provides overflow navigation not included in the bottom nav. Each user type has its own side menu link list. Predefined side menu links:

Link	Destination
Home	App home screen
Claims	Claim submission
Schemes	Active scheme listing
Redeem	Reward catalogue
Profile	Account and settings

Screen routes for push notifications

When configuring push notification templates in Engage → Communications → Push, you can specify which in-app screen opens when a partner taps the notification. The available screen routes come from your App Config’s registered screens. If no route is specified, the notification opens the Home screen.

Configurable appearance settings

Setting	Description
App name	Displayed in the app header and splash screen
Primary colour	Brand colour applied to buttons, highlights, and navigation elements
Logo	Client logo for splash screen and home header
Support contact	Phone number or email in Profile → Support
Terms & Conditions URL	Link to the client’s T&C document
Privacy Policy URL	Link to the client’s Privacy Policy

Push notifications

The app supports FCM-powered push notifications for transactional events:

Event	Default notification
Claim approved	”Your claim has been approved! Points have been credited.”
Claim rejected	”Your claim was rejected. Tap to view the reason.”
Account approved	”Your account registration has been approved.”
Account rejected	”Your account registration was rejected.”
New scheme launched	Announcement of a new earning opportunity

Notification templates (title, body, redirect screen) are configured in Engage → Communications → Push Notification channel.

Troubleshooting

Partner is not receiving OTP.

Confirm the mobile number is registered and formatted correctly (with country code).
Check that the SMS gateway is active and the partner’s carrier is not blocking automated SMS.

KYC documents are uploaded but the account is still pending.

KYC review is a manual admin process. Documents queue in the Approval Workflow for an admin to review.
Verify an admin with the Approve Onboarding Requests permission has actioned the request.

App is not reflecting layout changes made in App Config.

Server-Driven UI changes apply on the next app open after the config is saved.
If the partner has the app open in the background, they should close and reopen it.

​Architecture

​How it works

​App screens

​Home

​Schemes

​Claims

​Points

​Profile

​Login and KYC flow

​Login

​KYC verification

​App configuration (admin)

​App Config structure

​User types

​Home screen sections

​Bottom navigation

​Side menu

​Screen routes for push notifications

​Configurable appearance settings

​Push notifications

​Troubleshooting