React Native wrapper to bridge our iOS and Android SDK
🏠 Website
npm install @getcello/cello-react-nativeor
yarn add @getcello/cello-react-nativeIf you're using React Native v0.60 or above, the library will be linked automatically without any steps being taken.
react-native link @getcello/cello-react-native- Add below code to
android/settings.gradle
include ':cello-react-native'
project(':cello-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/@getcello/cello-react-native/android')- Then edit
android/app/build.gradle, insidedependenciesat very bottom add
implementation project(':cello-react-native')- Add below lines to
android/app/src/main/java/com/YOUR_APP/app/MainApplication.javainsideonCreatemethod, replacingproductIdandtokenwhich can be found in your settings page.
import com.celloreactnative.CelloReactNativeModule; // <-- Add this line
// ...
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
// ...
CelloReactNativeModule.initialize("productId", "token"); // <-- Add this line
// ...
}- Open
android/build.gradleand changeminSdkVersionto 21,compileSdkVersionto at least 34 andtargetSdkVersionto at least 34
buildscript {
// ...
ext {
buildToolsVersion = "29.0.2"
minSdkVersion = 21 // <-- Here
compileSdkVersion = 34 // <-- Here
targetSdkVersion = 34 // <-- Here
}
// ...
}- In
android/build.gradlemake sure thatcom.android.tools.build:gradleversion is greater than8.1.1
dependencies {
classpath("com.android.tools.build:gradle:8.1.1")
// ...
}You will need to include the INTERNET permission in android/app/src/main/AndroidManifest.xml:
<uses-permission android:name="android.permission.INTERNET" />Cello for iOS requires a minimum iOS version of 15.
cd ios
pod install
cd ..If you're using React Native v0.60 or above, the library will be linked automatically without any steps being taken.
See How to manually link IOS Cello SDK
-
Open
ios/AppDelegate.mthen add below code: -
At the top of file add the following:
#import "AppDelegate.h"
#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
// ...
#import <CelloReactNative.h> // <-- Add This- Inside
didFinishLaunchingWithOptionsbeforereturn YESadd, remember to replaceproductIdandtokenwhich can be found in your Cello Portal:
// ...
self.window.rootViewController = rootViewController;
[CelloReactNative initialize:for@"productId" with:@"token"]; // <-- Add this (Remember to replace strings with your product id and token)
return YES;
}If you are using Expo, you can use the built-in plugin.
After installing this package, add the config plugin to the plugins array of your app.json or app.config.js:
{
"expo": {
"plugins": ["@getcello/cello-react-native"]
}
}The plugin provides props to set environment. Every time you change the props or plugins, you'll need to rebuild (and prebuild) the native app. If no extra properties are added, defaults will be used.
env(string): Set to your desired environment, such asprod,sandbox. Optional. Defaults toprod.
{
"expo": {
"plugins": [
[
"@getcello/cello-react-native",
{
"env": "sandbox"
}
]
]
}
}Next, rebuild your app as described in the "Adding custom native code" guide.
Initializes the Cello Referral Component in your product
The initialize method supports two calling styles:
import Cello from '@getcello/cello-react-native';
const config = await Cello.initialize({
productId: 'your-product-id',
token: 'your-token',
productUserDetails: {
firstName: 'John',
lastName: 'Doe',
fullName: 'John Doe',
email: 'john.doe@example.com',
},
});const config = await Cello.initialize('your-product-id', 'your-token');| Property | Type | Required | Description |
|---|---|---|---|
| productId | string | yes | Your product ID from Cello Portal |
| token | string | yes | User authentication token |
| productUserDetails | ProductUserDetails | no | User details object (see below) |
Optional object with user information:
| Property | Type | Description |
|---|---|---|
| firstName | string | User's first name |
| lastName | string | User's last name |
| fullName | string | User's full name |
| string | User's email address |
Promise<configuration>
Shows the Floating action button or bookmark that launches the Referral Component
Hides the Floating action button or bookmark that launches the Referral Component
Opens Referral Component
Closes Referral Component
Closes Referral Component
A method to get an active ucc and invite link for the currently logged in user.
{ ucc, link }
A method to get the campaign configuration for your product.
Promise<campaignConfig | null>
Returns a campaign config object with the following properties:
primaryCurrency(string): Primary currency coderevenuePercentage(number): Percentage of attributed new revenue that will be paid as a rewardrewardCap(number): Maximum reward that can be earned per referralnewSignupBonus(number): Additional reward for signups to encourage more sharingnewPurchaseBonus(number): Additional reward for purchases to encourage more sharingnewUserDiscountMonth(number): How long new users get a discountnewUserDiscountPercentage(number): The discount new users get
Returns null if the SDK is not initialized or if campaign config is not available.
Updates the token and also verifies it.
| Type | Type | Required |
|---|---|---|
| token | string | yes |
Promise<configuration>
A method to change the language of the Referral component at runtime without re-initialising it.
| Type | Type | Required |
|---|---|---|
| language | string | yes |
-
- To enable
jetifier, add those two lines to yourgradle.propertiesfile:android.useAndroidX=true android.enableJetifier=true
- To enable
-
- Add those lines to
dependenciesin./android/app/build.gradle:implementation 'androidx.appcompat:appcompat:1.6.1'
- Add those lines to
-
- Make a
jest.mockfunction with the library:// jest/setup.ts jest.mock('@getcello/cello-react-native', () => jest.fn());
- Make a
👤 Cello (https://www.cello.so/)
Give a ⭐️ if this project helped you!
This project is MIT licensed.
Created with ❤️ by Cello