cobrowse-sdk-react-native 2.6.0 → 2.10.0

package/README.md

@@ -21,7 +21,7 @@ This will associate sessions from your mobile app with your Cobrowse account.
 ```javascript
 import CobrowseIO from 'cobrowse-sdk-react-native';
 
-CobrowseIO.license = "<your license key here>";
+CobrowseIO.license = "put your license key here";
 CobrowseIO.start();
 
 ```
@@ -53,3 +53,11 @@ Any questions at all? Please email us directly at [hello@cobrowse.io](mailto:hel
 
 * iOS 9.0 or later
 * Android API version 19 (4.4 KitKat) or later
+
+## Deployment
+
+This SDK is only available via NPM. To deploy a new version:
+
+```
+npm publish
+```

package/android/build.gradle

@@ -1,3 +1,13 @@
+buildscript {
+    repositories {
+        mavenCentral()
+        google()
+    }
+    dependencies {
+        classpath 'com.android.tools.build:gradle:3.1.0'
+    }
+}
+
 apply plugin: 'com.android.library'
 
 android {
@@ -20,5 +30,5 @@ android {
 
 dependencies {
     implementation 'com.facebook.react:react-native:+' // support react-native-v0.22-rc+
-    implementation 'io.cobrowse:cobrowse-sdk-android:2.11.3'
+    implementation 'io.cobrowse:cobrowse-sdk-android:2.16.0'
 }

package/android/src/main/java/io/cobrowse/reactnative/CobrowseIOModule.java

@@ -20,12 +20,15 @@ import java.util.Map;
 import androidx.annotation.NonNull;
 import io.cobrowse.CobrowseIO;
 import io.cobrowse.Session;
+import io.cobrowse.CobrowseAccessibilityService;
 
-public class CobrowseIOModule extends ReactContextBaseJavaModule implements CobrowseIO.Delegate, CobrowseIO.SessionRequestDelegate, CobrowseIO.RedactionDelegate {
+public class CobrowseIOModule extends ReactContextBaseJavaModule
+  implements CobrowseIO.Delegate, CobrowseIO.SessionRequestDelegate,
+    CobrowseIO.RedactionDelegate, CobrowseIO.RemoteControlRequestDelegate {
 
-    private static final String SESSION_UPDATED = "session_updated";
-    private static final String SESSION_ENDED = "session_ended";
-    private static final String SESSION_REQUESTED = "session_requested";
+    private static final String SESSION_UPDATED = "session.updated";
+    private static final String SESSION_ENDED = "session.ended";
+    private static final String SESSION_REQUESTED = "session.requested";
 
     CobrowseIOModule(ReactApplicationContext reactContext) {
         super(reactContext);
@@ -37,15 +40,6 @@ public class CobrowseIOModule extends ReactContextBaseJavaModule implements Cobr
         return "CobrowseIO";
     }
 
-    @Override
-    public Map<String, Object> getConstants() {
-        final Map<String, Object> constants = new HashMap<>();
-        constants.put("SESSION_UPDATED", SESSION_UPDATED);
-        constants.put("SESSION_ENDED", SESSION_ENDED);
-        constants.put("SESSION_REQUESTED", SESSION_REQUESTED);
-        return constants;
-    }
-
     @Override
     public void sessionDidUpdate(@NonNull Session session) {
         getReactApplicationContext()
@@ -67,6 +61,12 @@ public class CobrowseIOModule extends ReactContextBaseJavaModule implements Cobr
                 .emit(SESSION_REQUESTED, Utility.convert(session));
     }
 
+    @Override
+    public void handleRemoteControlRequest(@NonNull Activity activity, @NonNull Session session) {
+      // no-op, this will be handed on the JS side via an "updated" event handler
+      // this stub just disables the default native prompt in the SDK
+    }
+
     @Override
     public List<View> redactedViews(@NonNull final Activity activity) {
         return new ArrayList<>(RedactedViewManager.redactedViews.keySet());
@@ -136,14 +136,14 @@ public class CobrowseIOModule extends ReactContextBaseJavaModule implements Cobr
     }
 
     @ReactMethod
-    public void loadSession(final String idOrCode, final Promise promise) {
+    public void getSession(final String idOrCode, final Promise promise) {
         Handler handler = new Handler(getReactApplicationContext().getMainLooper());
         handler.post(new Runnable() {
             public void run() {
                 CobrowseIO.instance().getSession(idOrCode, new io.cobrowse.Callback<Error, Session>() {
                     @Override
                     public void call(Error error, Session session) {
-                        if (error != null) promise.reject("cbio_load_session_failed", error);
+                        if (error != null) promise.reject("cbio_get_session_failed", error);
                         else promise.resolve(Utility.convert(session));
                     }
                 });
@@ -193,4 +193,55 @@ public class CobrowseIOModule extends ReactContextBaseJavaModule implements Cobr
         });
     }
 
+    @ReactMethod
+    public void updateSession (final ReadableMap options, final Promise promise) {
+        Handler handler = new Handler(getReactApplicationContext().getMainLooper());
+        handler.post(new Runnable() {
+            public void run() {
+                Session current = CobrowseIO.instance().currentSession();
+
+                if (current == null) {
+                    promise.resolve(null);
+                    return;
+                }
+
+                if (options.hasKey("full_device")) {
+                    boolean fullDevice = options.getBoolean("full_device");
+
+                    current.setFullDevice(fullDevice, new io.cobrowse.Callback<Error, Session>() {
+                        @Override
+                        public void call(Error error, Session session) {
+                            if (error != null) promise.reject("cbio_full_device_failed", error);
+                            else promise.resolve(null);
+                        }
+                    });
+
+                    return;
+                }
+
+                if (options.hasKey("remote_control")) {
+                    String remoteControl = options.getString("remote_control");
+
+                    current.setRemoteControl(Utility.remoteControl(remoteControl), new io.cobrowse.Callback<Error, Session>() {
+                        @Override
+                        public void call(Error error, Session session) {
+                            if (error != null) promise.reject("cbio_remote_control_failed", error);
+                            else promise.resolve(null);
+                        }
+                    });
+                }
+            }
+        });
+    }
+
+    @ReactMethod
+    public void accessibilityServiceShowSetup (final Promise promise) {
+        CobrowseAccessibilityService.showSetup(getReactApplicationContext());
+        promise.resolve(null);
+    }
+
+    @ReactMethod
+    public void accessibilityServiceIsRunning(final Promise promise) {
+        promise.resolve(CobrowseAccessibilityService.isRunning(getReactApplicationContext()));
+    }
 }

package/android/src/main/java/io/cobrowse/reactnative/Utility.java

@@ -5,6 +5,7 @@ import com.facebook.react.bridge.WritableMap;
 
 import io.cobrowse.Agent;
 import io.cobrowse.Session;
+import io.cobrowse.Session.RemoteControlState;
 
 final class Utility {
 
@@ -15,6 +16,7 @@ final class Utility {
         map.putString("state", session.state());
         map.putString("id", session.id());
         map.putBoolean("full_device", session.fullDevice());
+        map.putString("remote_control", Utility.remoteControl(session.remoteControl()));
 
         Agent agent = session.agent();
         if (agent != null) {
@@ -32,4 +34,34 @@ final class Utility {
         return error.getMessage();
     }
 
+    static String remoteControl (RemoteControlState state) {
+        switch (state) {
+            case On:
+                return "on";
+            case Requested:
+                return "requested";
+            case Rejected:
+                return "rejected";
+            case Off:
+                return "off";
+        }
+
+        return "off";
+    }
+
+    static RemoteControlState remoteControl (String state) {
+        switch (state) {
+            case "on":
+                return RemoteControlState.On;
+            case "requested":
+                return RemoteControlState.Requested;
+            case "rejected":
+                return RemoteControlState.Rejected;
+            case "off":
+                return RemoteControlState.Off;
+        }
+
+        return RemoteControlState.Off;
+    }
+
 }

package/cobrowse-sdk-react-native.podspec

@@ -12,7 +12,7 @@ Pod::Spec.new do |s|
   s.source        = { :git => 'https://github.com/cobrowseio/cobrowse-sdk-react-native.git' }
   s.platform      = :ios, '9.0'
 
-  s.dependency      'CobrowseIO/Framework', '2.13.3'
+  s.dependency      'CobrowseIO/Framework', '2.16.2'
   s.dependency      'React'
   s.source_files =  'ios/*.{h,m}'
 end

package/ios/CBIORCTUtil.h

@@ -0,0 +1,8 @@
+#import <Foundation/Foundation.h>
+@import CobrowseIO;
+
+@interface CBIORCTUtil : NSObject
+
++(NSString*) remoteControl: (CBIORemoteControlState) state;
+
+@end

package/ios/CBIORCTUtil.m

@@ -0,0 +1,15 @@
+#import "CBIORCTUtil.h"
+
+@implementation CBIORCTUtil
+
++(NSString *) remoteControl: (CBIORemoteControlState)state {
+    switch(state) {
+        case kCBIORemoteControlStateOn: return @"on";
+        case kCBIORemoteControlStateOff: return @"off";
+        case kCBIORemoteControlStateRejected: return @"rejected";
+        case kCBIORemoteControlStateRequested: return @"requested";
+        default: return @"off";
+    }
+}
+
+@end

package/ios/CBIOSession+Bridging.h

@@ -5,3 +5,9 @@
 -(NSDictionary*) toDict;
 
 @end
+
+@interface CBIOSession (Protected)
+
+-(void) update:(NSDictionary*) state callback: (CBErrorSessionBlock)callback;
+
+@end

package/ios/CBIOSession+Bridging.m

@@ -1,4 +1,6 @@
 @import CobrowseIO;
+#import "CBIORCTUtil.h"
+
 
 @implementation CBIOSession (Bridging)
 
@@ -8,6 +10,7 @@
         @"code": self.code ? self.code : NSNull.null,
         @"state": self.state ? self.state : NSNull.null,
         @"full_device": @(self.fullDevice),
+        @"remote_control": [CBIORCTUtil remoteControl: self.remoteControl],
         @"agent": self.hasAgent ? @{
             @"name": self.agent.name,
             @"id": self.agent.id

package/ios/RCTCobrowseIO.m

@@ -7,9 +7,9 @@
 #import <React/RCTBridge.h>
 #import "RCTCobrowseIO.h"
 
-#define SESSION_UPDATED "session_updated"
-#define SESSION_ENDED "session_ended"
-#define SESSION_REQUESTED "session_requested"
+#define SESSION_UPDATED "session.updated"
+#define SESSION_ENDED "session.ended"
+#define SESSION_REQUESTED "session.requested"
 
 @import CobrowseIO;
 
@@ -35,14 +35,6 @@ RCT_EXPORT_MODULE();
   return dispatch_get_main_queue();
 }
 
--(NSDictionary *)constantsToExport {
-    return @{
-        @"SESSION_UPDATED": @SESSION_UPDATED,
-        @"SESSION_ENDED": @SESSION_ENDED,
-        @"SESSION_REQUESTED": @SESSION_REQUESTED
-    };
-}
-
 -(void)startObserving {
     hasListeners = YES;
 }
@@ -52,7 +44,7 @@ RCT_EXPORT_MODULE();
 }
 
 -(NSArray<NSString *> *)supportedEvents {
-    return self.constantsToExport.allValues;
+    return @[@SESSION_UPDATED, @SESSION_ENDED, @SESSION_REQUESTED];
 }
 
 -(void)cobrowseSessionDidUpdate:(CBIOSession *)session {
@@ -67,6 +59,11 @@ RCT_EXPORT_MODULE();
     if (hasListeners) [self sendEventWithName:@SESSION_REQUESTED body:[session toDict]];
 }
 
+- (void)cobrowseHandleRemoteControlRequest:(CBIOSession *)session {
+    // no-op, this will be handed on the JS side via an "updated" event handler
+    // this stub just disables the default native prompt in the SDK
+}
+
 -(NSArray<UIView *> *)cobrowseRedactedViewsForViewController:(UIViewController *)vc {
     NSMutableArray* views = [NSMutableArray array];
     for (UIView* v in CBIOCobrowseRedactedManager.redactedViews.allObjects) {
@@ -134,7 +131,7 @@ RCT_REMAP_METHOD(getSession,
                  resolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject) {
     [CobrowseIO.instance getSession:idOrCode callback:^(NSError *err, CBIOSession *session) {
-        if (err) return reject(@"cbio_load_session_failed", err.localizedDescription, err);
+        if (err) return reject(@"cbio_get_session_failed", err.localizedDescription, err);
         return resolve([session toDict]);
     }];
 }
@@ -161,4 +158,16 @@ RCT_REMAP_METHOD(endSession,
     }];
 }
 
+RCT_REMAP_METHOD(updateSession,
+                 updaetSession: (NSDictionary*) state
+                 resolver:(RCTPromiseResolveBlock)resolve
+                 rejecter:(RCTPromiseRejectBlock)reject) {
+    CBIOSession* current = CobrowseIO.instance.currentSession;
+    if (!current) return resolve(nil);
+    [current update: state callback: ^(NSError *err, CBIOSession *session) {
+        if (err) return reject(@"cbio_update_session_failed", err.localizedDescription, err);
+        return resolve([session toDict]);
+    }];
+}
+
 @end

package/ios/RCTCobrowseIO.xcodeproj/project.xcworkspace/contents.xcworkspacedata

@@ -2,6 +2,6 @@
 <Workspace
    version = "1.0">
    <FileRef
-      location = "self:RCTCobrowseIO.xcodeproj">
+      location = "self:">
    </FileRef>
 </Workspace>

package/js/CobrowseAccessibilityService.js

@@ -0,0 +1,11 @@
+const CobrowseIONative = require('react-native').NativeModules.CobrowseIO
+
+export default class CobrowseAccessibilityService {
+  static showSetup () {
+    return CobrowseIONative.accessibilityServiceShowSetup()
+  }
+
+  static isRunning () {
+    return CobrowseIONative.accessibilityServiceIsRunning()
+  }
+}

package/js/CobrowseIO.js

@@ -1,93 +1,124 @@
-'use strict';
+import { Alert } from 'react-native'
+import Session from './Session'
+const CobrowseIONative = require('react-native').NativeModules.CobrowseIO
+const NativeEventEmitter = require('react-native').NativeEventEmitter
 
-import { Alert } from 'react-native';
-const CobrowseIONative = require('react-native').NativeModules.CobrowseIO;
-const NativeEventEmitter = require('react-native').NativeEventEmitter;
-
-const emitter = new NativeEventEmitter(CobrowseIONative);
+const emitter = new NativeEventEmitter(CobrowseIONative)
 
 export default class CobrowseIO {
-
-    static get SESSION_UPDATED() {
-        return CobrowseIONative.SESSION_UPDATED;
-    }
-
-    static get SESSION_ENDED() {
-        return CobrowseIONative.SESSION_ENDED;
-    }
-
-    static get SESSION_REQUESTED() {
-        return CobrowseIONative.SESSION_REQUESTED;
-    }
-
-    static handleSessionRequest(session) {
-        Alert.alert(
-            'Support Request',
-            'A support agent would like to use this app with you. Do you accept?',
-            [
-                {
-                    text: 'Reject',
-                    onPress: () => this.endSession(),
-                    style: 'cancel',
-                },
-                {
-                    text: 'Accept',
-                    onPress: () => this.activateSession()
-                },
-            ],
-            {cancelable: true},
-        );
-    }
-
-    static addListener(event, cb) {
-        return emitter.addListener(event, cb);
-    }
-
-    static start() {
-        return CobrowseIONative.start();
-    }
-
-    static stop() {
-        return CobrowseIONative.stop();
-    }
-
-    static set api(api) {
-        CobrowseIONative.api(api);
-    }
-
-    static set license(license) {
-        CobrowseIONative.license(license);
-    }
-
-    static set customData(customData) {
-        CobrowseIONative.customData(customData);
-    }
-
-    static set deviceToken(token) {
-        CobrowseIONative.deviceToken(token);
-    }
-
-    static currentSession() {
-        return CobrowseIONative.currentSession();
-    }
-
-    static createSession() {
-        return CobrowseIONative.createSession();
-    }
-
-    static activateSession() {
-        return CobrowseIONative.activateSession();
-    }
-
-    static getSession(codeOrId) {
-        return CobrowseIONative.getSession(codeOrId);
-    }
-
-    static endSession() {
-        return CobrowseIONative.endSession();
-    }
+  /** @deprecated */
+  static get SESSION_UPDATED () {
+    return 'session.updated'
+  }
+
+  /** @deprecated */
+  static get SESSION_ENDED () {
+    return 'session.ended'
+  }
+
+  static handleSessionRequest (session) {
+    if (this._sessionRequestShown) return
+    this._sessionRequestShown = true
+    Alert.alert(
+      'Support Request',
+      'A support agent would like to use this app with you. Do you accept?',
+      [{
+        text: 'Reject',
+        onPress: () => {
+          this._sessionRequestShown = false
+          session.end()
+        },
+        style: 'cancel'
+      }, {
+        text: 'Accept',
+        onPress: () => {
+          this._sessionRequestShown = false
+          session.activate()
+        }
+      }], { cancelable: false })
+  }
+
+  static handleRemoteControlRequest (session) {
+    if (this._remoteControlRequestShown) return
+    this._remoteControlRequestShown = true
+    Alert.alert(
+      'Remote Control Request',
+      'A support agent would like to take remote control of this app. Do you accept?',
+      [{
+        text: 'Reject',
+        onPress: () => {
+          this._remoteControlRequestShown = false
+          session.setRemoteControl('rejected')
+        },
+        style: 'cancel'
+      }, {
+        text: 'Accept',
+        onPress: () => {
+          this._remoteControlRequestShown = false
+          session.setRemoteControl('on')
+        }
+      }], { cancelable: false })
+  }
+
+  static addListener (event, cb) {
+    return emitter.addListener(event, (session) => cb(new Session(session)))
+  }
+
+  static start () {
+    return CobrowseIONative.start()
+  }
+
+  static stop () {
+    return CobrowseIONative.stop()
+  }
+
+  static set api (api) {
+    CobrowseIONative.api(api)
+  }
+
+  static set license (license) {
+    CobrowseIONative.license(license)
+  }
+
+  static set customData (customData) {
+    CobrowseIONative.customData(customData)
+  }
+
+  static set deviceToken (token) {
+    CobrowseIONative.deviceToken(token)
+  }
+
+  static currentSession () {
+    return CobrowseIONative.currentSession().then((session) => session ? new Session(session) : null)
+  }
+
+  static createSession () {
+    return CobrowseIONative.createSession().then((session) => session ? new Session(session) : null)
+  }
+
+  static getSession (codeOrId) {
+    return CobrowseIONative.getSession(codeOrId).then((session) => session ? new Session(session) : null)
+  }
+
+  /** @deprecated */
+  static activateSession () {
+    return CobrowseIONative.activateSession().then((session) => session ? new Session(session) : null)
+  }
+
+  /** @deprecated */
+  static endSession () {
+    return CobrowseIONative.endSession()
+  }
 }
 
-CobrowseIO.addListener(CobrowseIO.SESSION_REQUESTED, (session) => {
-    CobrowseIO.handleSessionRequest(session);
-});
+// the session.requested event is considered internal, it should
+// not be used outside these bindings
+CobrowseIO.addListener('session.requested', (session) => {
+  CobrowseIO.handleSessionRequest(session)
+})
+
+CobrowseIO.addListener('session.updated', (session) => {
+  if (session.isActive() && session.remote_control === 'requested') {
+    CobrowseIO.handleRemoteControlRequest(session)
+  }
+})

package/js/CobrowseView.js

@@ -1,129 +1,128 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react'
 import {
-    View,
-    Text,
-    ActivityIndicator,
-    TouchableOpacity,
-    StyleSheet,
-    Linking
-} from 'react-native';
-import CobrowseIO from './CobrowseIO';
+  View,
+  Text,
+  ActivityIndicator,
+  TouchableOpacity,
+  StyleSheet
+} from 'react-native'
+import CobrowseIO from './CobrowseIO'
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'flex-end'
-    },
-    text: {
-        textAlign: 'center',
-        margin: 15,
-        fontSize: 15,
-        lineHeight: 20
-    },
-    code: {
-        fontSize: 29,
-        padding: 20,
-        fontWeight: 'bold',
-        textAlign: 'center'
-    },
-    button: {
-        color: 'rgb(0, 122, 255)',
-        fontSize: 18,
-        margin: 10
-    }
-});
+  container: {
+    flex: 1,
+    justifyContent: 'flex-end'
+  },
+  text: {
+    textAlign: 'center',
+    margin: 15,
+    fontSize: 15,
+    lineHeight: 20
+  },
+  code: {
+    fontSize: 29,
+    padding: 20,
+    fontWeight: 'bold',
+    textAlign: 'center'
+  },
+  button: {
+    color: 'rgb(0, 122, 255)',
+    fontSize: 18,
+    margin: 10
+  }
+})
 
 export default class CobrowseView extends Component {
+  constructor () {
+    super()
+    this.state = { error: null, session: null }
+  }
 
-    constructor() {
-        super();
-        this.state = { error: null, session: null };
+  async componentDidMount () {
+    if (this.props.license) {
+      console.warn('Passing license to view is deprecated. Use CobrowseIO.license = "..." instead')
+      CobrowseIO.license = this.props.license
     }
 
-    async componentDidMount() {
-        if (this.props.license) {
-            console.warn('Passing license to view is deprecated. Use CobrowseIO.license = "..." instead');
-            CobrowseIO.license = this.props.license;
-        }
-
-        try {
-            const current = await CobrowseIO.currentSession();
-            if (current) this.setState({ session:current });
-            else {
-                const session = await CobrowseIO.createSession();
-                this.setState({ session });
-            }
-        } catch (error) {
-            this.setState({ error })
-        }
-
-        this.updateListener = CobrowseIO.addListener(CobrowseIO.SESSION_UPDATED, (session) => {
-           this.setState({ session });
-        });
-        this.endListener = CobrowseIO.addListener(CobrowseIO.SESSION_ENDED, (session) => {
-            if (this.props.onEnded) this.props.onEnded();
-        });
+    try {
+      const current = await CobrowseIO.currentSession()
+      if (current) this.setState({ session: current })
+      else {
+        const session = await CobrowseIO.createSession()
+        this.setState({ session })
+      }
+    } catch (error) {
+      this.setState({ error })
     }
 
-    componentWillUnmount() {
-        if (this.updateListener) this.updateListener.remove();
-        if (this.endListener) this.endListener.remove();
-    }
+    this.updateListener = CobrowseIO.addListener('session.updated', (session) => {
+      this.setState({ session })
+    })
+    this.endListener = CobrowseIO.addListener('session.ended', (session) => {
+      if (this.props.onEnded) this.props.onEnded()
+    })
+  }
 
-    async endSession() {
-        try {
-            await CobrowseIO.endSession();
-            this.setState({session: null});
-        } catch(error) {
-            this.setState({error});
-        }
-    }
+  componentWillUnmount () {
+    if (this.updateListener) this.updateListener.remove()
+    if (this.endListener) this.endListener.remove()
+  }
 
-    renderError() {
-        return (
-            <Text style={[styles.text]}>{this.state.error.message}</Text>
-        );
+  async endSession () {
+    try {
+      const { session } = this.state
+      await session.end()
+      this.setState({ session: null })
+    } catch (error) {
+      this.setState({ error })
     }
+  }
 
-    renderCode() {
-        let code = this.state.session && this.state.session.code;
-        if (code) code = code.substr(0, 3) + '-' + code.substr(3);
-        return (
-            <View>
-                <Text style={[styles.code, {opacity:code?1:0.2}]}>{code || '000-000'}</Text>
-                <Text style={[styles.text]}>Provide this code to your support agent to begin screen sharing.</Text>
-                <ActivityIndicator/>
-            </View>
-        );
-    }
+  renderError () {
+    return (
+      <Text style={[styles.text]}>{this.state.error.message}</Text>
+    )
+  }
 
-    renderManageSession() {
-        return (
-            <View>
-                <Text style={[styles.text]}>You{"'"}re sharing screens from this app with a support agent.</Text>
-                <TouchableOpacity onPress={()=>this.endSession()}>
-                    <Text style={[styles.text, styles.button]}>End Session</Text>
-                </TouchableOpacity>
-            </View>
-        );
-    }
+  renderCode () {
+    let code = this.state.session && this.state.session.code
+    if (code) code = code.substr(0, 3) + '-' + code.substr(3)
+    return (
+      <View>
+        <Text style={[styles.code, { opacity: code ? 1 : 0.2 }]}>{code || '000-000'}</Text>
+        <Text style={[styles.text]}>Provide this code to your support agent to begin screen sharing.</Text>
+        <ActivityIndicator />
+      </View>
+    )
+  }
 
-    renderContent() {
-        const { error, session } = this.state;
-        if (error) {
-            return this.renderError();
-        } else if ((!session) || (session.state === 'pending' || session.state === 'authorizing')) {
-            return this.renderCode();
-        } else {
-            return this.renderManageSession();
-        }
-    }
+  renderManageSession () {
+    return (
+      <View>
+        <Text style={[styles.text]}>You{"'"}re sharing screens from this app with a support agent.</Text>
+        <TouchableOpacity onPress={() => this.endSession()}>
+          <Text style={[styles.text, styles.button]}>End Session</Text>
+        </TouchableOpacity>
+      </View>
+    )
+  }
 
-    render() {
-        return (
-            <View style={styles.container}>
-                {this.renderContent()}
-            </View>
-        );
+  renderContent () {
+    const { error, session } = this.state
+    if (error) {
+      return this.renderError()
+    } else if ((!session) || (session.state === 'pending' || session.state === 'authorizing')) {
+      return this.renderCode()
+    } else {
+      return this.renderManageSession()
     }
+  }
+
+  render () {
+    return (
+      <View style={styles.container}>
+        {this.renderContent()}
+      </View>
+    )
+  }
 }

package/js/Redacted.js

@@ -1,17 +1,19 @@
-import React, { useContext } from 'react';
-import { View, requireNativeComponent } from 'react-native';
-const CBIOCobrowseRedacted = requireNativeComponent('CBIOCobrowseRedacted');
+import React, { useContext } from 'react'
+import { View, requireNativeComponent } from 'react-native'
+const CBIOCobrowseRedacted = requireNativeComponent('CBIOCobrowseRedacted')
 
-const RedactionContext = React.createContext(false);
+const RedactionContext = React.createContext(false)
 
-module.exports = function(props) {
-    const alreadyRedacted = useContext(RedactionContext);
-    if (!alreadyRedacted) return (
-        <RedactionContext.Provider value={true}>
-            <CBIOCobrowseRedacted style={props.style}>
-                <View>{props.children}</View>
-            </CBIOCobrowseRedacted>
-        </RedactionContext.Provider>
-    );
-    return props.children;
+export default function (props) {
+  const alreadyRedacted = useContext(RedactionContext)
+  if (!alreadyRedacted) {
+    return (
+      <RedactionContext.Provider value>
+        <CBIOCobrowseRedacted style={props.style}>
+          <View>{props.children}</View>
+        </CBIOCobrowseRedacted>
+      </RedactionContext.Provider>
+    )
+  }
+  return props.children
 }

package/js/Session.js

@@ -0,0 +1,103 @@
+const CobrowseIONative = require('react-native').NativeModules.CobrowseIO
+const NativeEventEmitter = require('react-native').NativeEventEmitter
+
+const emitter = new NativeEventEmitter(CobrowseIONative)
+
+export default class Session {
+  constructor (session) {
+    this._session = session || {}
+    this._listen()
+  }
+
+  _update (session, onMatch) {
+    if (this._session.id === undefined || (session && this._session.id === session.id)) {
+      this._session = session
+      if (typeof onMatch === 'function') onMatch()
+    }
+  }
+
+  _listen () {
+    const updates = emitter.addListener('session.updated', (session) => this._update(session))
+    const ended = emitter.addListener('session.ended', (session) => {
+      this._update(session, () => {
+        updates.remove()
+        ended.remove()
+      })
+    })
+  }
+
+  addListener (eventType, listener) {
+    // TODO: this class should extend EventEmitter and forward
+    //       on the non-namespaced versions of these events
+    switch (eventType) {
+      case 'ended':
+        eventType = 'session.updated'
+        break
+      case 'updated':
+        eventType = 'session.ended'
+        break
+    }
+
+    return emitter.addListener(eventType, (session) => {
+      this._update(session, () => {
+        listener(this)
+      })
+    })
+  }
+
+  get id () {
+    return this._session.id
+  }
+
+  get code () {
+    return this._session.code
+  }
+
+  get state () {
+    return this._session.state
+  }
+
+  get full_device () {
+    return this._session.full_device
+  }
+
+  get remote_control () {
+    return this._session.remote_control
+  }
+
+  get agent () {
+    return this._session.agent
+  }
+
+  activate () {
+    return CobrowseIONative.activateSession().then(() => {})
+  }
+
+  end () {
+    return CobrowseIONative.endSession()
+  }
+
+  isActive () {
+    return this._session.state === 'active'
+  }
+
+  isAuthorizing () {
+    return this._session.state === 'authorizing'
+  }
+
+  isPending () {
+    return this._session.state === 'pending'
+  }
+
+  isEnded () {
+    return this._session.state === 'ended'
+  }
+
+  setFullDevice (state) {
+    return CobrowseIONative.updateSession({ full_device: state })
+  }
+
+  setRemoteControl (state) {
+    return CobrowseIONative.updateSession({ remote_control: state })
+  }
+}

package/js/SessionControl.js

@@ -1,25 +1,26 @@
-import React, { Component } from 'react';
-import CobrowseIO from './CobrowseIO';
+import React from 'react'
+import CobrowseIO from './CobrowseIO'
 
-export default class SessionControl extends Component {
+export default class SessionControl extends React.Component {
+  constructor () {
+    super()
+    this.state = { session: null }
+  }
 
-    constructor() {
-        super();
-        this.state = { session: null };
-    }
+  async componentDidMount () {
+    this.setState({ session: await CobrowseIO.currentSession() })
+    this.updateListener = CobrowseIO.addListener(CobrowseIO.SESSION_UPDATED, (session) => {
+      this.setState({ session })
+    })
+  }
 
-    componentDidMount() {
-        this.updateListener = CobrowseIO.addListener(CobrowseIO.SESSION_UPDATED, (session) => {
-           this.setState({ session });
-        });
-    }
+  componentWillUnmount () {
+    if (this.updateListener) this.updateListener.remove()
+  }
 
-    componentWillUnmount() {
-        if (this.updateListener) this.updateListener.remove();
-    }
-
-    render() {
-        if (this.state.session && this.state.session.state === 'active') return this.props.children;
-        else return null;
-    }
+  render () {
+    const { session } = this.state
+    if (session && session.isActive()) return this.props.children
+    else return null
+  }
 }

package/js/index.js

@@ -1,6 +1,5 @@
-'use strict';
-
-export { default as default } from './CobrowseIO'
+export { default } from './CobrowseIO'
 export { default as CobrowseView } from './CobrowseView'
 export { default as Redacted } from './Redacted'
 export { default as SessionControl } from './SessionControl'
+export { default as CobrowseAccessibilityService } from './CobrowseAccessibilityService'

package/package.json

@@ -1,8 +1,14 @@
 {
   "name": "cobrowse-sdk-react-native",
-  "version": "2.6.0",
+  "version": "2.10.0",
   "description": "Cobrowse SDK for React Native",
-  "main": "./js/index.js",
+  "main": "js/index.js",
+  "types": "ts/index.d.ts",
+  "scripts": {
+    "lint-fix": "ts-standard ts/*.d.ts --fix",
+    "watch": "node scripts/watch.mjs",
+    "start:dev": "nodemon --exec ./scripts/copy.sh"
+  },
   "author": {
     "name": "Andy Pritchard"
   },
@@ -21,5 +27,18 @@
     "cobrowseio"
   ],
   "license": "Apache-2.0",
-  "dependencies": {}
+  "optionalDependencies": {
+    "@types/react": "^17.0.38",
+    "@types/react-native": "^0.66.15"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@types/react": "^17.0.38",
+    "@types/react-native": "^0.66.15",
+    "managed-service-daemon": "^1.2.1",
+    "nodemon": "^2.0.15",
+    "ts-standard": "^11.0.0",
+    "typescript": "^4.5.5",
+    "watchr": "^6.11.0"
+  }
 }

package/ts/CobrowseAccessibilityService.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/no-extraneous-class,accessor-pairs */
+export default class CobrowseAccessibilityService {
+  static showSetup (): Promise<void>
+
+  static isRunning (): Promise<boolean>
+}

package/ts/CobrowseIO.d.ts

@@ -0,0 +1,29 @@
+/* eslint-disable @typescript-eslint/no-extraneous-class,accessor-pairs */
+import type { EmitterSubscription } from 'react-native'
+import Session from './Session'
+
+export type NativeSessionEvent = 'session.updated' | 'session.ended'
+
+export default class CobrowseIO {
+  static handleSessionRequest (session?: Session): void
+
+  static addListener (eventType: NativeSessionEvent, listener: (session: Session) => void): EmitterSubscription
+
+  static start (): void
+
+  static stop (): void
+
+  static set api (api: string)
+
+  static set license (license: string)
+
+  static set customData (customData: Record<string, any>)
+
+  static set deviceToken (token: string)
+
+  static currentSession (): Promise<Session>
+
+  static createSession (): Promise<Session>
+
+  static getSession (codeOrId: string): Promise<Session>
+}

package/ts/CobrowseView.d.ts

@@ -0,0 +1,20 @@
+import type { Component } from 'react'
+import type { View, Text } from 'react-native'
+
+export default class CobrowseView extends Component {
+  componentDidMount (): Promise<void>
+
+  componentWillUnmount (): void
+
+  endSession (): Promise<void>
+
+  renderError (): Text
+
+  renderCode (): View
+
+  renderManageSession (): View
+
+  renderContent (): Text | View
+
+  render (): View
+}

package/ts/Redacted.d.ts

@@ -0,0 +1,7 @@
+import type { Provider, ReactNode } from 'react'
+
+type Props = Readonly<{}> & Readonly<{
+  children?: ReactNode
+}>
+
+export default function (props: Props): Provider<boolean>

package/ts/Session.d.ts

@@ -0,0 +1,56 @@
+/* eslint-disable @typescript-eslint/no-extraneous-class,accessor-pairs */
+import type { EmitterSubscription } from 'react-native'
+
+export type SessionEvent = 'updated' | 'ended'
+
+export type SessionState = 'active' | 'authorizing' | 'ended' | 'pending'
+
+export type RemoteControlState = 'on' | 'requested' | 'rejected' | 'off'
+
+export interface Agent {
+  id: string
+  name: string
+}
+
+export interface SessionLike {
+  id: string
+  code: string
+  state: SessionState
+  full_device: boolean
+  remote_control: RemoteControlState
+  agent: Agent
+}
+
+export default class Session {
+  constructor (sessionLike: SessionLike)
+
+  addListener (eventType: SessionEvent, listener: (session: Session) => void): EmitterSubscription
+
+  get id (): string
+
+  get code (): string
+
+  get state (): SessionState
+
+  get full_device (): boolean
+
+  get remote_control (): RemoteControlState
+
+  get agent (): Agent
+
+  activate (): Promise<void>
+
+  end (): Promise<void>
+
+  isActive (): boolean
+
+  isAuthorizing (): boolean
+
+  isPending (): boolean
+
+  isEnded (): boolean
+
+  setFullDevice (state: boolean): Promise<void>
+
+  setRemoteControl (state: RemoteControlState): Promise<void>
+}

package/ts/SessionControl.d.ts

@@ -0,0 +1,9 @@
+import type { Component, ReactNode } from 'react'
+
+export default class SessionControl extends Component {
+  componentDidMount (): void
+
+  componentWillUnmount (): void
+
+  render (): ReactNode | null
+}

package/ts/index.d.ts

@@ -0,0 +1,5 @@
+export { default } from './CobrowseIO'
+export { default as CobrowseView } from './CobrowseView'
+export { default as Redacted } from './Redacted'
+export { default as SessionControl } from './SessionControl'
+export { default as CobrowseAccessibilityService } from './CobrowseAccessibilityService'

package/CHANGELOG.md

@@ -1,24 +0,0 @@
-# Changelog
-
-All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
-
-## [2.6.0](https://github.com/cobrowseio/cobrowse-sdk-react-native/compare/v2.5.2...v2.6.0) (2021-06-14)
-
-
-### Features
-
-* allow styling of redacted component ([614b64e](https://github.com/cobrowseio/cobrowse-sdk-react-native/commit/614b64e56a127aec693077f336935c628b609117))
-
-
-### Bug Fixes
-
-* fix for Undefined symbols error (_OBJC_CLASS_$_RCTEventDispatcher) ([d66ef6d](https://github.com/cobrowseio/cobrowse-sdk-react-native/commit/d66ef6d6767b567db524865e002867718ca6301a))
-
-## [2.1.0] - 2019-04-26
-- Added `handleSessionRequest` API to `CobrowseIO`
-
-## [2.0.0] - 2019-04-24
-### Changed
-- Switched to promises for all methods that previously took callback (e.g. `createSession`, `endSession`, `currentSession`)
-- Updated example project to RN 0.59
-- Renamed `loadSession` to `getSession` to match other SDKs