The Cello React Native wrapper allows you to use Cello for iOS and Cello for Android in your React Native apps. With a plug-n-play mobile component, your users can easily share their invite link with their friends and network using mobile sharing options convenient for them, receive rewards and get paid out.

​
Installation

A basic installation takes around 15 minutes, but will take a little longer if you want to customize the way the Cello Referral Component is launched. Compatibility
  • The Cello React Native wrapper supports React Native 0.59 and above.
  • Cello for iOS supports iOS 15+.
  • Cello for Android supports API 21+.

​
Install Cello

yarn add @getcello/cello-react-native
# or
npm install @getcello/cello-react-native

​
Android Setup

​
Automatic Linking (RN v0.60+)

Library is automatically linked after installation.

​
React Native v0.59 (Automatic Linking)

react-native link @getcello/cello-react-native

​
React Native v0.59 (Manual Linking)

android/settings.gradle 
include ':cello-react-native'
project(':cello-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/@getcello/cello-react-native/android')
android/app/build.gradle 
dependencies {
  implementation project(':cello-react-native')
}

​
Android Initialization

Update your MainApplication.java: 
import com.celloreactnative.CelloReactNativeModule;

@Override
public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    CelloReactNativeModule.initialize(this, "productId", "token");
}
Also include internet permission in android/app/src/main/AndroidManifest.xml: 
<uses-permission android:name="android.permission.INTERNET" />

​
iOS Setup

​
Automatic Linking (RN v0.60+)

Library links automatically after pod install.

​
Manual Linking (RN v0.59)

  1. Open .xcworkspace or .xcodeproj.
  2. Insert the CelloSDK.xcframework into your project (enable “Copy items if needed”).
  3. In target settings, set it to Embed & Sign under Frameworks, Libraries, and Embedded Content.
For additional information on iOS manual linking please refer to the React Native developer docs.

​
iOS Initialization

In AppDelegate.m, add: 
#import "AppDelegate.h"
#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
// ...
#import <CelloReactNative.h> // <-- Add This
Next, in the method didFinishLaunchingWithOptions you’ll need to initialize Cello. Add the snippet below using the productId and token 
// ...
  self.window.rootViewController = rootViewController;

  [CelloReactNative initialize:for@"productId" with:@"token"]; // <-- Add this (Remember to replace strings with your product id and token)

  return YES;
  }

​
Choose an Environment

In your Cello SDK setup, you have the flexibility to select the environment in which your application will run. This feature is especially useful for different stages of development, such as testing in a development or staging environment before going live in production. The available environments are:
  • prod (Production) (default)
  • sandbox (Sandbox)
For iOS follow Cello for iOS configurational steps For Android follow Cello for Android configurational steps

​
Using Cello with Expo

If you are using Expo, you can use the built-in plugin. After installing the @getcello/cello-react-native 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 as prod, sandbox. Optional. Defaults to prod.
{
  "expo": {
    "plugins": [
      [
        "@getcello/cello-react-native",
        {
          "env": "sandbox"
        }
      ]
    ]
  }
}
Next, rebuild your app as described in the “Adding custom native code” guide.

​
Customize the Cello Referral Component

The Cello React Native allows for various levels of customization to better fit into your app’s design and flow. One of the main components you might want to customize is the Referral component

​
Choose Your Launcher

The library provides two ways to launch the Referral component: Default launcher If you choose to go with the default launcher, you can call the showFab() method from the Cello library to present a Floating Action Button (FAB) within your app. This FAB is pre-styled but may not perfectly match your app’s look and feel. 
import Cello from '@getcello/cello-react-native';
Cello.showFab();
Custom launcher If the default launcher does not fit your needs, you can implement your own custom launcher. This could be any UI element like a button, menu item, or even a gesture. To open the Referral component using a custom launcher, you can call Cello.openWidget(). 
import Cello from '@getcello/cello-react-native';

const MyButton = () => {
  return (
    <Button onPress={() => Cello.openWidget()}>
      Open Referral
    </Button>
  );
}

​
React Native API

​
Cello.initialize(productId, token): Promise<Configuration>

Initializes the Cello referral component.
NameTypeDescriptionRequired
productIdstringIdentifier of the product your users will referYes
tokenstringAccess token generated for the given userYes
Cello.initialize(productId, token)

​
Cello.showFab(): void

Shows the default Cello button that launches the Referral Component 
Cello.showFab();

​
Cello.hideFab(): void

Hides the default Cello button that launches the Referral Component 
Cello.hideFab();

​
Cello.openWidget(): void

Opens the referral component. 
Cello.openWidget();

​
Cello.hideWidget(): void

Hides the referral component. 
Cello.hideWidget();

​
Cello.getActiveUcc(): Promise<{ ucc: string; inviteLink: string; } | null>

A method to get an active ucc and invite link for the currently logged in user. 
const data = await Cello.getActiveUcc();

​
Cello.changeLanguage(langCode: string): void

A method to change the language of the Referral component at runtime without re-initialising it. 
Cello.changeLanguage("de");

​
Cello.shutdown(): void

Shuts down connection to Cello and unmounts the component 
Cello.shutdown();