@customerglu/react-native-customerglu

CustomerGlu React Native SDK

In-app gamification, rewards, and engagement campaigns for React Native — unified API across iOS and Android.

All CustomerGlu SDKs share the same version number.
iOS 4.1.2 · Android 4.1.2 · React Native 4.1.2

Table of Contents

• Requirements
• Installation
• Quick Start
• Banner Widgets
• Features
• What's New in 4.1.2
• Troubleshooting
• Native SDKs
• Documentation

Requirements

Platform	Minimum
React Native	0.71+
iOS	14.0+ / Xcode 13+
Android	API 21 (Android 5.0)+
Node.js	16+

Installation

npm

npm install @customerglu/react-native-customerglu

Yarn

yarn add @customerglu/react-native-customerglu

iOS Setup

Install the native CocoaPods dependency:

cd ios && pod install && cd ..

The React Native SDK automatically pulls in the native iOS SDK (CustomerGlu 4.1.2) via CocoaPods.

Android Setup

The native Android SDK (com.customerglu:CustomerGluLibrary:4.1.2) is resolved automatically via Maven Central.

Ensure mavenCentral() is in your project-level build.gradle (or settings.gradle):

// build.gradle (project)
allprojects {
    repositories {
        mavenCentral()
    }
}

// OR settings.gradle (newer projects)
dependencyResolutionManagement {
    repositories {
        mavenCentral()
    }
}

No additional Android configuration is required.

Quick Start

1. Configure Your Write Key

iOS — Info.plist

<key>CUSTOMERGLU_WRITE_KEY</key>
<string>YOUR_WRITE_KEY</string>

Android — AndroidManifest.xml

<meta-data
    android:name="CUSTOMERGLU_WRITE_KEY"
    android:value="YOUR_WRITE_KEY" />

You can find your write key in the CustomerGlu Dashboard under Settings → SDK Keys.

2. Register a User

import { CustomerGlu } from '@customerglu/react-native-customerglu';

// Register user (call once after login / app launch)
await CustomerGlu.registerDevice('user-123');

3. Common Operations

// Open the rewards wallet
CustomerGlu.openWallet();

// Load all campaigns
CustomerGlu.loadAllCampaigns();

// Send a custom event
CustomerGlu.sendEventData({
  eventName: 'purchase',
  eventProperties: { amount: 99 },
});

// Update user attributes
CustomerGlu.updateProfile({ plan: 'premium' });

Banner Widgets

Embed native banner widgets in your React Native views using CGBannerWidget:

import { CGBannerWidget } from '@customerglu/react-native-customerglu';

function HomeScreen() {
  return (
    <CGBannerWidget
      bannerId="home_rewards_banner"
      style={{ width: '100%' }}
    />
  );
}

The SDK handles rendering, styling, native widget inflation, and click actions automatically based on your dashboard configuration. Banner height is managed dynamically — native widgets measure their content and resize the React Native container.

Features

Feature	Description
Cross-platform	Single TypeScript API for iOS and Android
Entry Points	Floating buttons, banners, embedded views
Native Widgets	DYNAMIC_MULTISTEP progress widgets rendered natively (no WebView)
Campaigns	Bottom sheets, popups, full-screen campaigns
Real-time	SSE-based live nudges and state updates
Deep Linking	Campaign navigation handling
Analytics	Event tracking and diagnostics
Multi-region	ME, US, and default API endpoints — resolved automatically

What's New in 4.1.2

• DYNAMIC_MULTISTEP native rendering — three widget variants (MS1, MS2, MS3) rendered natively on both iOS and Android instead of WebView for better performance and native feel
• Auto-height bridge — native widgets broadcast measured height via CGBANNER_FINAL_HEIGHT to resize React Native containers dynamically
• iOS overflow support — clipsToBounds = NO on the bridge view enables MS3 expand/collapse animation overflow
• 19 configurable nativeStyle fields — colors, fonts, border radius, shimmer, and more — all controlled via dashboard

Troubleshooting

Issue	Solution
pod install fails	Run pod repo update then retry; ensure Xcode CLT is installed
Android build error	Verify mavenCentral() in repositories; ensure Java 17+
Banner not showing	Check bannerId matches dashboard config; ensure registerDevice succeeded
Height not updating	Confirm CGBannerWidget has overflow: 'visible' in its style if using MS3 expand
Module not found	Clear caches: npx react-native start --reset-cache

Native SDKs

The React Native SDK wraps the native SDKs. For advanced customization or standalone native apps:

Platform	Package	Install
iOS	CustomerGlu	CocoaPods · SPM
Android	com.customerglu:CustomerGluLibrary:4.1.2	Maven Central

Documentation

Full SDK docs, guides, and API reference:

https://docs.customerglu.com/sdk/mobile-sdks#react-native

License

MIT