Skip to main content
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:

How it works

  1. When a partner opens the app, it fetches the current UI schema from the server for their program.
  2. The Dynamic Page Renderer reads the schema and assembles the screen from registered components.
  3. Data (balance, schemes, claims) is fetched from the Loyalife API and injected into the rendered components.
  4. 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: 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:
1

Submit a new claim

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

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

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

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

Login and KYC flow

Login

The app uses mobile OTP authentication:
  1. Partner enters their registered mobile number.
  2. An OTP is sent via SMS.
  3. 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: 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:

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: 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: Custom sections can be added by configuring component names and data sources in the JSON.

Bottom navigation

Each user type has its own set of bottom navigation tabs. Tabs are configured with icon, label, and destination screen. Predefined bottom nav items: 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.

Side menu

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:

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

Push notifications

The app supports FCM-powered push notifications for transactional events: 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.