React Native
Rollee Connect SDK is a plugin for integrating Rollee Connect process on Mobile applications based on 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 parameter sessionToken
.
The production
and customizationId
parameters are optional.
▫️ The minimal configuration for setting up RolleeConnect component:
const CONFIG = {
sessionToken: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
};
▫️ The optional configuration for setting up RolleeConnect component:
const CONFIG = {
sessionToken: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
production: false,
customizationId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
};
Setup Parameters Descriptions
Bellow you have the description of all the parameters available.
Param | Description |
---|---|
sessionToken | String - defining user session on Rollee Connect application |
production | Boolean - parameter for switching between sandbox and production env |
customizationId | String - parameter for adding customization defined in Rollee Dashboard |
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
, onCompleted
or onLoginSuccess
callbacks
const onClose = () => {
console.log('onClose');
};
const onCompleted = (data) => {
console.log('onCompleted', data);
};
const onLoginSuccess = (data: RolleeConnectLoginResult) => {
console.log('onLoginSuccess', 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 set parameter named production and to true.
const CONFIG = {
sessionToken: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
production: true,
};
Example file
In order to quick-start your Rollee Connect experience with React Native, you can simply replace your App.tsx file with the following file. Please update the sessionToken
value 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 = {
sessionToken: '<your-session-token>',
production: false, // optional - default is false
customizationId: 'eaf67def-5d66-4823-a14a-0c613ee8e12d', // optional
};
export default function App() {
const onCompleted = (data: RolleeConnectResult) => {
console.log('onCompleted', data);
};
const onClose = () => {
console.log('onClose');
};
const onLoginSuccess = (data: RolleeConnectLoginResult) => {
console.log('onLoginSuccess', data);
};
return (
<SafeAreaView>
<StatusBar />
<ScrollView contentInsetAdjustmentBehavior="automatic">
<View style={styles.container}>
<View style={styles.titleContainer}>
<Text style={styles.sectionTitle}>Rollee React Native1</Text>
</View>
<View style={{height: windowHeight - 128}}>
<RolleeConnect
config={CONFIG}
onCompleted={onCompleted}
onClose={onClose}
onLoginSuccess={onLoginSuccess}
onAnalytics={(data: any) => console.log('onAnalytics', data)}
/>
</View>
</View>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 16,
fontFamily: 'Thonburi',
fontWeight: '400',
textAlign: 'center',
color: '#fff',
textTransform: 'uppercase',
},
sectionDescription: {
marginBottom: 12,
fontSize: 12,
fontFamily: 'Thonburi',
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.1.0
==Breaking changes - Important!==
- adding
customizationId
parameter to configuration - removing
setup
parameter from configuration - removing
token
parameter from configuration
v1.0.6
- update configuration fixes
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
Updated 17 days ago