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
- 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:
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
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:- Partner enters their registered mobile number.
- An OTP is sent via SMS.
- Partner enters the OTP to complete login.
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.
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 supportredirect_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 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.
- 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.