Cello for React Native

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.

You can customize the Referral component in the following ways:

• Launcher – Use the default button or implement a custom launcher to open the Referral component.
• Hero Image – Set a custom image for the sharing screen.
• Copy – Customize the text displayed in the component.
• Brand Color – Apply your brand’s primary color to match your app’s style.
• Notification images - Choose which image is displayed in the new view and new reward notification.

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 version 0.59 of React Native and above.
• Cello for iOS supports iOS 15 and above.
• Cello for Android supports API 21 and above.

Install Cello

Step 1 - Adding the wrapper

To install Cello you'll need to add the wrapper to your React Native project using the following snippet:

yarn add @getcello/cello-react-native

There are separate steps for setting up Android and iOS. If your React Native app does not support Android skip to Step 3.

Step 2 - Android Setup

You'll need to take steps to link the wrapper in your project. These vary based on your apps React Native version.

Using React Native v0.60 and above

If you're using React Native v0.60 or above, the library will be linked automatically

Automatic linking with React Native v0.59

To automatically link the Cello React Native wrapper in v0.59 of React Native run the following command:

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

Manual linking with React Native v0.59

If you prefer to manually link libraries, add the following snippet to android/settings.gradle:

include ':cello-react-native'

project(':cello-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/@getcello/cello-react-native/android')

Inside the dependancies block of android/app/build.gradle add the following line:

dependencies {

  implementation project(':cello-react-native')

}

Initialize Cello

You'll need to update the MainApplication.java class. First add the import com.celloreactnative.CelloReactNativeModule at the top of the class.

Then in the onCreate method, add the snippet below using the productId and token

import com.celloreactnative.CelloReactNativeModule; //  <-- Add this line

​

// ...

​

@Override

public void onCreate() {

  super.onCreate();

  SoLoader.init(this, /* native exopackage */ false);

​

  // ...

​

  CelloReactNativeModule.initialize(this, "productId", "token"); // <-- Add this line

​

  // ...

}

Android Permissions

You will need to include the INTERNET permission in android/app/src/main/AndroidManifest.xml :

<uses-permission android:name="android.permission.INTERNET" />

Step 3 - iOS Setup

If you don't support iOS in your React Native app, you can skip to the configuration step.

Using React Native v0.60 and above

If you're using React Native v0.60 or above, the library will be linked automatically after running the pod install command.

Manual linking with React Native v0.59

1. Firstly open your apps .xcworkspace. If you don't have a .workspace file open the .xcodeproj.
2. Download Cello for iOS and extract the zip. (👉 Cello iOS zip download)
3. Drag CelloSDK.xcframework into your project. Make sure "Copy items if needed" is selected and click Finish.
4. In the target settings for your app, set the CelloSDK.xcframework to “Embed & Sign”. This can be found in the “Frameworks, Libraries, and Embedded Content” section of the “General” tab.

For additional information on iOS manual linking please refer to the React Native developer docs.

Initialize Cello

Open iOS/AppDelegate.m and import <CelloReactNative.h>

#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)
• sandbox (Sandbox)

By default, the SDK is set to the prod environment.

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.

Initialize Cello

In this step, you will need your product ID and a token you have generated for the user, similar when implementing the web based Referral component.

Initialize Cello by importing Cello from @getcello/cello-react-native

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 CustomFab = () => {

  return (

    <Button onClick={() => Cello.openWidget()}>

      Custom Fab Button

    </Button>

  );

}

API

Cello.initialize()

Initializes the Cello Referral Component in your product

import Cello from '@getcello/cello-react-native';

​

Cello.initialize(productId, token)

Cello.updateToken()

Updates the token and also verifies it.

import Cello from '@getcello/cello-react-native';

​

Cello.updateToken(token)

Cello.showFab()

Shows the default Cello button that launches the Referral Component

import Cello from '@getcello/cello-react-native';

​

Cello.showFab()

Cello.hideFab()

Hides the default Cello button that launches the Referral Component

import Cello from '@getcello/cello-react-native';

​

Cello.hideFab()

Cello.openWidget()

Opens Referral Component

import Cello from '@getcello/cello-react-native';

​

Cello.openWidget()

Cello.hideWidget()

Hides the Cello widget sheet

import Cello from '@getcello/cello-react-native';

​

Cello.hideWidget()

Cello.getActiveUcc()

A method to get an active ucc and invite link for the currently logged in user.

import Cello from '@getcello/cello-react-native';

​

Cello.getActiveUcc()

Cello.changeLanguage()

A method to change the language of the Referral component at runtime without re-initialising it.

import Cello from '@getcello/cello-react-native';

​

Cello.changeLanguage("de")

Cello.shutdown()

Shuts down connection to Cello and unmounts the component

import Cello from '@getcello/cello-react-native';

​

Cello.shutdown()