React Native

Installation

To use Rollee Connect with React Native, we recommend the usage of Expo, a framework to create and test React Native apps.
The first step is to create a sample Expo project with Typescript.

$ expo init YourReactNativeProject -t expo-template-blank-typescript

Add Rollee Connect SDK

$ npm install --save @getrollee/connect-react-native-sdk

Usage

Now, you must import the Rollee Connect component and place it in your App's code.
The RolleeConnect component is a View that you can integrate into your App's flow, and the CONFIG and optional callback handlers are passed in as props.

import RolleeConnect from "@getrollee/connect-react-native-sdk";
.
.
.
<RolleeConnect config={CONFIG} onCompleted={onCompleted} onClose={onClose} />

Configuration

To define a User Session on Rollee Connect, you must provide the mandatory parameters token and sessionToken.

The setup parameters are optional.

▫️ The minimal configuration for setting up RolleeConnect component:

const CONFIG = {
  token: '<your-jwt-token>',
  sessionToken: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
};

▫️ The optional configuration for setting up RolleeConnect component:

const CONFIG = {
  token: '<your-jwt-token>',
  sessionToken: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
  setup: {
    production: false,
    introScreenSkip: false,
    introScreenTitle: 'Lets link your work accounts',
    ctaTextColor: 'white',
    ctaBackgroundColor: 'black',
    partnerLogoUrl: 'https://somedomain.com/your_logo.png',
    datasource: '<datasource-uuid>'
  },
};

Setup Parameters Descriptions

Bellow you have the description of all the parameters present in the Setup.
If you wish not to customize one of the parameters present in setup, you can just delete them and the SDK will use the respective default value.

Param	Description
sessionToken	`String` - defining user session on Rollee Connect application
production	`Boolean` - parameter for switching between sandbox and production env
introScreenSkip	`Boolean` - with this parameter set as true you can skip the first screen and load directly a Terms screen
introScreenTitle	`String` - Change intro screen title sentence
ctaTextColor	`String` - Changing CTA button “Get started” text color
ctaBackgroundColor	`String` - Changing CTA button “Get started” background color
partnerLogoUrl	`String` - Change header logo image with proper URL of image
datasource	`String` - add data source ID provided by Rollee

Callbacks

When you want to exit from Rollee Connect back to your application or to get information when user completed flow, you should use onClose and onCompleted callbacks

const onClose = () => {
    console.log('onClose');
};

const onCompleted = (data) => {
    console.log('onCompleted', data);
};

Running the SDK in the Production environment

By default, the SDK runs in a Sandbox environment, meant for testing.
To be able to test SDK in the Production environment, you should provide a setup parameter named production and set it to true.

const CONFIG = {
  token: '<your-jwt-token>',
  sessionToken: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
  setup: {
    production: true
  }
};

Example file

In order to quickstart your Rollee Connect experience with React Native, you can simply replace your App.tsx file with the following file. Please update the token and *sessionToken** values accordingly.

import * as React from 'react';

import {
  StyleSheet,
  View,
  Text,
  SafeAreaView,
  StatusBar,
  ScrollView,
  Dimensions,
} from 'react-native';

import RolleeConnect from '@getrollee/connect-react-native-sdk';
import type {RolleeConnectResult, RolleeConnectLoginResult} from 'src/types';

const windowHeight = Dimensions.get('window').height;

const CONFIG = {
  token: '<your-jwt-token>',
  sessionToken: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
  setup: {
    production: false,
    introScreenSkip: false,
    introScreenTitle: 'My custom intro screen title',
    ctaTextColor: 'white',
    ctaBackgroundColor: 'black',
    partnerLogoUrl: 'https://somedomain.com/your_logo.png',
    datasource: '<datasource-uuid>'
  },
};

export default function App() {
  const onCompleted = (data: RolleeConnectResult) => {
    console.log('onCompleted', data);
  };

  const onClose = () => {
    console.log('onClose');
  };
  

 return (
    <SafeAreaView>
      <StatusBar />
      <ScrollView contentInsetAdjustmentBehavior="automatic">
        <View style={styles.container}>
          <View style={{height: windowHeight - 128}}>
            <RolleeConnect
              config={CONFIG}
              onCompleted={onCompleted}
              onClose={onClose}
            />
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}


const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: '400',
    textAlign: 'center',
    color: '#fff',
    textTransform: 'uppercase',
  },
  sectionDescription: {
    marginBottom: 12,
    fontSize: 12,
    fontWeight: '400',
    textAlign: 'center',
    color: '#aaa',
  },
  highlight: {
    fontWeight: '700',
  },
  header: {
    backgroundColor: '#f2f2f2',
  },
  image: {
    flex: 1,
    width: 120,
    height: 32,
    resizeMode: 'contain',
  },
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  titleContainer: {
    height: 24,
    backgroundColor: '#333',
  },
});

Changelog

v1.0.5

onLoginSuccess callback added

v1.0.4

supporting multiple session customization

v1.0.3

bug fixing

v1.0.2

update documentation

v1.0.0

==Breaking changes - Important!==

you should use token instead of apiKey, parnterUUID and parnterName
updated to typescript
exported types

v0.1.3

bug fixes

v0.1.2

bug fixes

v0.1.1

added param for skipping datasources page
added param for removing "Close button" at header
improved "onCompleted" callback
other bug fixes

v0.1.0

bug fixes

v0.0.9

updated React Native version to 0.68.2

v0.0.8

Added "datasource" param for pre-selecting data source and skip "Search" screen

v0.0.7

Fixed form view on software keyboard opened

v0.0.6

Added new callback "onClose" when user confirm closing the Rollee Connect process.

v0.0.5

Added support for providing userUUID to match one session
added userUUID in "completed" callback
other fixes