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 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
Updated about 2 months ago