Human API Connect - React Native

index.ios.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  WebView
} from 'react-native';


var baseURL = 'https://connect.humanapi.co/embed?';
var clientID = '0589b8a68485746bd737a7a58f5c8e02aeac445f'; //Add your clientId here
var clientUserId = 'someuser@google.com';
var publicToken = null; //Set to publicToken value if previously retrieved or 'null' for new users
var finishURL = 'https://connect.humanapi.co/blank/hc-finish';
var closeURL = 'https://connect.humanapi.co/blank/hc-close';

//construct URL to launch Connect
var connectURL = baseURL + 'client_id=' + clientID + '&client_user_id=' + clientUserId + '&finish_url=' + finishURL + '&close_url='+ closeURL + (publicToken != null ? "&public_token="+ publicToken : '');


var WebViewExample = React.createClass({

  getInitialState: function() {
    return {
      url: connectURL,
      status: 'No Page Loaded',
      backButtonEnabled: false,
      forwardButtonEnabled: false,
      loading: true,
      scalesPageToFit: true,
    };
  },


  render: function() {
    this.inputText = this.state.url;

    return (
        <WebView
          ref={'webview'}
          automaticallyAdjustContentInsets={false}
          style={styles.webView}
          source={{uri: this.state.url}}
          javaScriptEnabled={true}
          domStorageEnabled={true}
          decelerationRate="normal"
          onNavigationStateChange={this.onNavigationStateChange}
          onShouldStartLoadWithRequest={this.onShouldStartLoadWithRequest}
          startInLoadingState={true}
          scalesPageToFit={this.state.scalesPageToFit}
        />
    );
  },


  onShouldStartLoadWithRequest: function(event) {
    // Implement any custom loading logic here, don't forget to return!
    console.log(event.url);

    if (event.url.indexOf('https://connect.humanapi.co/blank/') === 0) {
     if (event.url.indexOf('hc-finish') !== -1) {

       //Create sessionTokenObject from finish url parameters
       var paramString = event.url.replace(finishURL+"?","");
       var match = "";
       var params = {};
       var regex = /([^&=]+)=?([^&]*)/g;

       while (match = regex.exec(paramString))
         params[match[1]] = match[2];

       var sessionTokenObject = {
         "humanId": params["human_id"],
         "clientId": params["client_id"],
         "sessionToken": params["session_token"]
       }

       //Post `sessionTokenObject` to your server to finish

       console.log("Success!");
       console.log(sessionTokenObject);
       return false;

     } else if (event.url.indexOf('hc-close') !== -1) {
       console.log('Close callback called');
       //Do something on close
       return false
     }
    }
    return true;
  }
});

class ReactConnect extends Component {
  render() {
    return (
      <WebViewExample />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

AppRegistry.registerComponent('ReactConnect', () => ReactConnect);