cobrowse-sdk-react-native 2.14.0 → 2.16.0

package/.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "eslint.enable": false,
+  "prettier.enable": false,
+  "standard.enable": true,
+  "standard.autoFixOnSave": true,
+  "standard.engine": "standard"
+}

package/android/build.gradle

@@ -30,5 +30,5 @@ android {
 
 dependencies {
     implementation 'com.facebook.react:react-native:+' // support react-native-v0.22-rc+
-    implementation 'io.cobrowse:cobrowse-sdk-android:2.23.0'
+    implementation 'io.cobrowse:cobrowse-sdk-android:2.25.1'
 }

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

@@ -5,9 +5,9 @@ import com.facebook.react.bridge.ReadableArray;
 
 import io.cobrowse.CobrowseIO;
 
-interface CobrowseIOCommonDelegates  extends io.cobrowse.CobrowseIO.Delegate, io.cobrowse.CobrowseIO.SessionRequestDelegate,
-  io.cobrowse.CobrowseIO.SessionLoadDelegate, io.cobrowse.CobrowseIO.RedactionDelegate,
-  io.cobrowse.CobrowseIO.RemoteControlRequestDelegate, CobrowseIO.FullDeviceRequestDelegate {
+interface CobrowseIOCommonDelegates  extends CobrowseIO.Delegate, CobrowseIO.SessionRequestDelegate,
+  CobrowseIO.SessionLoadDelegate, CobrowseIO.RedactionDelegate, CobrowseIO.UnredactionDelegate,
+  CobrowseIO.RemoteControlRequestDelegate, CobrowseIO.FullDeviceRequestDelegate {
 
   public void findNodeManager();
   public void setUnredactedTags(final ReadableArray reactTags, final Promise promise);

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

@@ -79,6 +79,19 @@ public class CobrowseIOModule extends ReactContextBaseJavaModule {
     CobrowseIO.instance().customData(customData.toHashMap());
   }
 
+  @ReactMethod
+  public void capabilities(ReadableArray capabilities) {
+    String[] capabilitiesArray = new String[capabilities.size()];
+    for (int i = 0; i < capabilities.size(); i++) {
+      try {
+        capabilitiesArray[i] = capabilities.getString(i);
+      } catch (UnexpectedNativeTypeException e) {
+        Log.w("CobrowseIO", "Failed to process capabilities: " + e.getMessage());
+      }
+    }
+    CobrowseIO.instance().capabilities(capabilitiesArray);
+  }
+
   @ReactMethod
   public void deviceToken(String token) {
     if (getReactApplicationContext().getCurrentActivity() != null)
@@ -240,4 +253,14 @@ public class CobrowseIOModule extends ReactContextBaseJavaModule {
 
     CobrowseIO.instance().setDelegate(delegatesWithSessionControls);
   }
+
+  @ReactMethod
+  public void addListener(String eventName) {
+    // Keep: Required for RN built in Event Emitter Calls.
+  }
+
+  @ReactMethod
+  public void removeListeners(Integer count) {
+    // Keep: Required for RN built in Event Emitter Calls.
+  }
 }

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

@@ -7,7 +7,6 @@ import android.view.ViewGroup;
 import android.view.ViewParent;
 
 import androidx.annotation.NonNull;
-import androidx.annotation.Nullable;
 import androidx.core.util.Predicate;
 
 import com.facebook.react.bridge.Promise;
@@ -40,7 +39,25 @@ class CommonDelegates implements CobrowseIOCommonDelegates {
     this.reactApplicationContext = context;
   }
 
-  private Set<View> getUnredactedViews(@NonNull final Activity activity) {
+  @Override
+  public void handleFullDeviceRequest(@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 Activity activity) {
+    HashSet<View> redacted = new HashSet<>(RedactedViewManager.redactedViews.keySet());
+    if (CobrowseIOModule.delegate instanceof io.cobrowse.reactnative.CobrowseIO.RedactionDelegate) {
+      List<View> views = ((io.cobrowse.reactnative.CobrowseIO.RedactionDelegate) CobrowseIOModule.delegate).redactedViews(activity);
+      if (views != null) redacted.addAll(views);
+    }
+
+    return new ArrayList<>(redacted);
+  }
+
+  @Override
+  public List<View> unredactedViews(@NonNull Activity activity) {
     synchronized (unredactedTags) {
       HashSet<View> unredacted = new HashSet<>();
       for (Integer i : unredactedTags) {
@@ -54,89 +71,9 @@ class CommonDelegates implements CobrowseIOCommonDelegates {
         List<View> views = ((io.cobrowse.reactnative.CobrowseIO.RedactionDelegate) CobrowseIOModule.delegate).unredactedViews(activity);
         if (views != null) unredacted.addAll(views);
       }
-      return unredacted;
-    }
-  }
 
-  private Set<View> getRedactedViews(@NonNull final Activity activity) {
-    HashSet<View> redacted = new HashSet<>(RedactedViewManager.redactedViews.keySet());
-    if (CobrowseIOModule.delegate instanceof io.cobrowse.reactnative.CobrowseIO.RedactionDelegate) {
-      List<View> views = ((io.cobrowse.reactnative.CobrowseIO.RedactionDelegate) CobrowseIOModule.delegate).redactedViews(activity);
-      if (views != null) redacted.addAll(views);
+      return new ArrayList<>(unredacted);
     }
-    return redacted;
-  }
-
-  @Override
-  public void handleFullDeviceRequest(@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 Activity activity) {
-    final Set<View> redacted = this.getRedactedViews(activity);
-    final Set<View> unredacted = this.getUnredactedViews(activity);
-
-    // Project all unredactions to the root to get the full set of unredacted nodes
-    HashSet<View> projectedUnredacted = new HashSet<>();
-    for (View view : unredacted) {
-      projectedUnredacted.add(view);
-      projectedUnredacted.addAll(TreeUtils.allParents(view));
-    }
-
-    // Work out which nodes are explicitly redacted but need to be unredacted
-    // due to a nested unredaction tag (these redactions will be moved towards the
-    // leaves of the view hierarchy instead)
-    HashSet<View> redactedProjectedUnredactions = new HashSet<>(redacted);
-    redactedProjectedUnredactions.retainAll(projectedUnredacted);
-
-    // Start to build the set of redactions we should actually apply. We start off with
-    // the set of explicitly redacted nodes
-    HashSet<View> toRedact = new HashSet<>(redacted);
-
-    // remove any redactions that have unredacted decendants (i.e. any that appear in the
-    // projection of the unredaction). These are the redacted nodes we need to move towards
-    // the leaves of the tree
-    toRedact.removeAll(redactedProjectedUnredactions);
-
-    // Work out the set of all nodes that are siblings of any projected unredacted node
-    HashSet<View> projectedUnredactionSiblings = new HashSet<>();
-    for (View view : projectedUnredacted) {
-      ViewParent parent = view.getParent();
-      if (parent instanceof ViewGroup)
-        projectedUnredactionSiblings.addAll(TreeUtils.directChildren((ViewGroup) parent));
-    }
-
-    // Subtract the projected unredactions from the set of all siblings of projected
-    // unredactions. i.e. subtract things that should be definitely unredacted to leave
-    // a set we're not sure yet whether to redact or not
-    HashSet<View> potentiallyRedactedUnredactedSiblings = new HashSet<View>(projectedUnredactionSiblings);
-    potentiallyRedactedUnredactedSiblings.removeAll(projectedUnredacted);
-
-    // for each node we're not sure about yet, check if the closest redacted or unredacted ancestor
-    // is a redacted node, if so this descendant should also be redacted
-    for (View view : potentiallyRedactedUnredactedSiblings) {
-      View closest = TreeUtils.closest(view, new Predicate<View>() {
-        @Override
-        public boolean test(View view) {
-          return redacted.contains(view) || unredacted.contains(view);
-        }
-      });
-      if (redacted.contains(closest)) toRedact.add(view);
-    }
-
-    // Remove any empty ViewGroup from the redacted set, they're often used for wrapping
-    // or sizing other elements, and do not usually need to be redacted
-    // If it's absolutely necessary they are redacted, they can always be replaced with
-    // a <Redacted> tag instead
-    for (View v : new HashSet<>(toRedact)) {
-      if (v instanceof ViewGroup && ((ViewGroup) v).getChildCount() == 0) {
-        toRedact.remove(v);
-      }
-    }
-
-    return new ArrayList<>(toRedact);
   }
 
   @Override

package/cobrowse-sdk-react-native.podspec

@@ -11,7 +11,7 @@ Pod::Spec.new do |s|
   s.homepage      = package["homepage"]
   s.source        = { :git => 'https://github.com/cobrowseio/cobrowse-sdk-react-native.git' }
   s.platform      = :ios, '11.0'
-  s.dependency      'CobrowseIO/XCFramework', '2.22.1'
+  s.dependency      'CobrowseIO/XCFramework', '2.25.0'
   s.dependency      'React'
   s.source_files =  'ios/*.{h,m}'
 end

package/ios/RCTCobrowseIO.m

@@ -67,28 +67,6 @@ RCT_EXPORT_MODULE();
     if (hasListeners) [self sendEventWithName:@SESSION_LOADED body:[session toDict]];
 }
 
--(NSSet<UIView*>*) redactedViews: (UIViewController*) vc {
-    NSMutableSet* views = [CBIOCobrowseRedactedManager.redactedViews mutableCopy];
-    if ([RCTCobrowseIO.delegate respondsToSelector:@selector(cobrowseRedactedViewsForViewController:)]) {
-        [views addObjectsFromArray: [RCTCobrowseIO.delegate cobrowseRedactedViewsForViewController:vc]];
-    }
-    return views;
-}
-
--(NSSet<UIView*>*) unredactedViews: (UIViewController*) vc {
-    NSMutableSet* views = [NSMutableSet set];
-    @synchronized(unredactedTags) {
-        for (id tag in unredactedTags) {
-            UIView* v = [self.bridge.uiManager viewForReactTag: tag];
-            if (v != nil) [views addObject:v];
-        }
-    }
-    if ([RCTCobrowseIO.delegate respondsToSelector:@selector(cobrowseUnredactedViewsForViewController:)]) {
-        [views addObjectsFromArray: [RCTCobrowseIO.delegate cobrowseUnredactedViewsForViewController:vc]];
-    }
-    return views;
-}
-
 -(void)cobrowseSessionDidUpdate:(CBIOSession *)session {
     if (hasListeners) [self sendEventWithName:@SESSION_UPDATED body:[session toDict]];
 }
@@ -107,60 +85,27 @@ RCT_EXPORT_MODULE();
 }
 
 -(NSArray<UIView *> *)cobrowseRedactedViewsForViewController:(UIViewController *)vc {
-    NSSet* redacted = [self redactedViews: vc];
-    NSSet* unredacted = [self unredactedViews: vc];
-    
-    // Project all unredactions to the root to get the full set of unredacted nodes
-    NSMutableSet* projectedUnredacted = [NSMutableSet set];
-    for (id view in unredacted) {
-        [projectedUnredacted addObject:view];
-        [projectedUnredacted addObjectsFromArray: [RCTCBIOTreeUtils allParents: view]];
+    NSMutableSet* views = [CBIOCobrowseRedactedManager.redactedViews mutableCopy];
+    if ([RCTCobrowseIO.delegate respondsToSelector:@selector(cobrowseRedactedViewsForViewController:)]) {
+        [views addObjectsFromArray: [RCTCobrowseIO.delegate cobrowseRedactedViewsForViewController:vc]];
     }
     
-    // Work out which nodes are explicitly redacted but need to be unredacted
-    // due to a nested unredaction tag (these redactions will be moved towards the
-    // leaves of the view hierarchy instead)
-    NSMutableSet* redactedProjectedUnredactions = [redacted mutableCopy];
-    [redactedProjectedUnredactions intersectSet: projectedUnredacted];
-    
-    // Start to build the set of redactions we should actually apply. We start off with
-    // the set of explicitly redacted nodes
-    NSMutableSet* toRedact = [redacted mutableCopy];
-    
-    // remove any redactions that have unredacted decendants (i.e. any that appear in the
-    // projection of the unredaction). These are the redacted nodes we need to move towards
-    // the leaves of the tree
-    [toRedact minusSet: redactedProjectedUnredactions];
-    
-    // Work out the set of all nodes that are siblings of any projected unredacted node
-    NSMutableSet* projectedUnredactionSiblings = [NSMutableSet set];
-    for (UIView* view in projectedUnredacted) {
-        [projectedUnredactionSiblings addObjectsFromArray: view.superview.subviews];
+    return [views allObjects];
+}
+
+- (NSArray<UIView *> *)cobrowseUnredactedViewsForViewController:(UIViewController *)vc {
+    NSMutableSet* views = [NSMutableSet set];
+    @synchronized(unredactedTags) {
+        for (id tag in unredactedTags) {
+            UIView* v = [self.bridge.uiManager viewForReactTag: tag];
+            if (v != nil) [views addObject:v];
+        }
     }
-    
-    // Subtract the projected unredactions from the set of all siblings of projected
-    // unredactions. i.e. subtract things that should be definitely unredacted to leave
-    // a set we're not sure yet whether to redact or not
-    NSMutableSet* potentiallyRedactedUnredactedSiblings = [projectedUnredactionSiblings mutableCopy];
-    [potentiallyRedactedUnredactedSiblings minusSet:projectedUnredacted];
-    
-    // for each node we're not sure about yet, check if the closest redacted or unredacted ancestor
-    // is a redacted node, if so this descendant should also be redacted
-    for (UIView* view in potentiallyRedactedUnredactedSiblings) {
-        UIView* closest = [RCTCBIOTreeUtils closest:^BOOL(UIView *v) {
-            return [redacted containsObject:v] || [unredacted containsObject:v];
-        } from: view];
-        if ([redacted containsObject: closest]) [toRedact addObject: view];
+    if ([RCTCobrowseIO.delegate respondsToSelector:@selector(cobrowseUnredactedViewsForViewController:)]) {
+        [views addObjectsFromArray: [RCTCobrowseIO.delegate cobrowseUnredactedViewsForViewController:vc]];
     }
     
-    // Remove any empty RCTViews from the redacted set, they're often used for wrapping
-    // or sizing other elements, and do not usually need to be redacted
-    // If it's absolutely necessary they are redacted, they can always be replaced with
-    // a <Redacted> tag instead
-    for (UIView* v in [toRedact copy])
-        if ([v isKindOfClass:RCTView.class] && v.subviews.count == 0) [toRedact removeObject: v];
-    
-    return toRedact.allObjects;
+    return [views allObjects];
 }
 
 - (bool) cobrowseShouldCaptureWindow:(UIWindow *)window {
@@ -216,6 +161,10 @@ RCT_EXPORT_METHOD(customData: (NSDictionary*) customData) {
     CobrowseIO.instance.customData = customData;
 }
 
+RCT_EXPORT_METHOD(capabilities: (NSArray*) capabilities) {
+    CobrowseIO.instance.capabilities = capabilities;
+}
+
 RCT_EXPORT_METHOD(deviceToken: (NSString*) token) {
     CobrowseIO.instance.device.token = [token dataUsingEncoding:NSUTF16StringEncoding];
 }

package/js/CBIOBroadcastPickerView.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Platform, requireNativeComponent, type ViewProps } from 'react-native'
+
+const CBIOBroadcastPickerViewNativeView = requireNativeComponent(
+  'CBIOBroadcastPickerView'
+)
+
+type CBIOBroadcastPickerViewProps = {
+  buttonColor: string
+} & ViewProps
+
+export default function CBIOBroadcastPickerView (props: CBIOBroadcastPickerViewProps): JSX.Element | null {
+  // this native component is only available on iOS
+  return Platform.OS === 'ios' ? <CBIOBroadcastPickerViewNativeView {...props} /> : null
+}

package/js/CobrowseAccessibilityService.ts

@@ -0,0 +1,15 @@
+import { NativeModules } from 'react-native'
+const CobrowseIONative = NativeModules.CobrowseIO
+
+export function showSetup (): void {
+  return CobrowseIONative.accessibilityServiceShowSetup()
+}
+
+export function isRunning (): boolean {
+  return CobrowseIONative.accessibilityServiceIsRunning()
+}
+
+export default {
+  showSetup,
+  isRunning
+}

package/js/CobrowseIO.ts

@@ -0,0 +1,156 @@
+import { Platform, Alert, NativeEventEmitter, EmitterSubscription, NativeModules } from 'react-native'
+import Session, { type CobrowseSessionEvents, type SessionLike } from './Session'
+const CobrowseIONative = NativeModules.CobrowseIO
+
+const emitter = new NativeEventEmitter(CobrowseIONative)
+
+// eslint-disable-next-line @typescript-eslint/no-extraneous-class
+export default class CobrowseIO {
+  private static sessionRequestShown = false
+  private static remoteControlRequestShown = false
+
+  /** @deprecated */
+  static get SESSION_UPDATED (): 'session.updated' {
+    return 'session.updated' as const
+  }
+
+  /** @deprecated */
+  static get SESSION_ENDED (): 'session.ended' {
+    return 'session.ended' as const
+  }
+
+  static handleSessionRequest (session: Session): void {
+    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
+          void session.end()
+        },
+        style: 'cancel'
+      }, {
+        text: 'Accept',
+        onPress: () => {
+          this.sessionRequestShown = false
+          void session.activate()
+        }
+      }], { cancelable: false })
+  }
+
+  static handleRemoteControlRequest (session: Session): void {
+    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
+          void session.setRemoteControl('rejected')
+        },
+        style: 'cancel'
+      }, {
+        text: 'Accept',
+        onPress: () => {
+          this.remoteControlRequestShown = false
+          void session.setRemoteControl('on')
+        }
+      }], { cancelable: false })
+  }
+
+  static addListener (event: CobrowseSessionEvents | 'session.requested', cb: (session: Session) => void): EmitterSubscription {
+    return emitter.addListener(event, (session: SessionLike) => cb(new Session(session)))
+  }
+
+  static start (): void {
+    CobrowseIONative.start()
+  }
+
+  static stop (): void {
+    CobrowseIONative.stop()
+  }
+
+  // eslint-disable-next-line accessor-pairs
+  static set api (api: string) {
+    CobrowseIONative.api(api)
+  }
+
+  // eslint-disable-next-line accessor-pairs
+  static set license (license: string) {
+    CobrowseIONative.license(license)
+  }
+
+  // eslint-disable-next-line accessor-pairs
+  static set customData (customData: Record<string, unknown>) {
+    CobrowseIONative.customData(customData)
+  }
+
+  // eslint-disable-next-line accessor-pairs
+  static set capabilities (capabilities: Array<'drawing' | 'full_device' | 'keypress' | 'laser' | 'pointer'>) {
+    CobrowseIONative.capabilities(capabilities)
+  }
+
+  // eslint-disable-next-line accessor-pairs
+  static set deviceToken (token: string) {
+    CobrowseIONative.deviceToken(token)
+  }
+
+  static currentSession (): Session | null {
+    return CobrowseIONative.currentSession().then((session: SessionLike | null) => (session != null) ? new Session(session) : null)
+  }
+
+  static createSession (): Session | null {
+    return CobrowseIONative.createSession().then((session: SessionLike | null) => (session != null) ? new Session(session) : null)
+  }
+
+  static getSession (codeOrId: string): Session | null {
+    return CobrowseIONative.getSession(codeOrId).then((session: SessionLike | null) => (session != null) ? new Session(session) : null)
+  }
+
+  /** @deprecated */
+  static activateSession (): Session | null {
+    return CobrowseIONative.activateSession().then((session: SessionLike | null) => (session != null) ? new Session(session) : null)
+  }
+
+  /** @deprecated */
+  static endSession (): void {
+    return CobrowseIONative.endSession()
+  }
+
+  static showSessionControls: Boolean | null = null
+  static handleFullDeviceRequest: null | ((s: Session) => void) = null
+}
+
+// the session.requested event is considered internal, it should
+// not be used outside these bindings
+CobrowseIO.addListener('session.requested', (session) => {
+  if (CobrowseIO.showSessionControls === false) {
+    CobrowseIONative.overwriteSessionIndicator()
+  }
+
+  if (Platform.OS === 'ios' && (CobrowseIO.handleFullDeviceRequest != null)) {
+    CobrowseIONative.overwriteFullControlUI()
+  }
+
+  CobrowseIO.handleSessionRequest(session)
+})
+
+CobrowseIO.addListener('session.updated', (session) => {
+  if (session.isActive() && session.remote_control === 'requested') {
+    CobrowseIO.handleRemoteControlRequest(session)
+  }
+
+  if (session.isActive() && session.full_device_state === 'requested') {
+    if (CobrowseIO.handleFullDeviceRequest != null) {
+      CobrowseIO.handleFullDeviceRequest(session)
+    } else if (Platform.OS === 'android') {
+      // accept the incoming connection by default
+      void session.setFullDevice('on')
+    }
+  }
+})

package/js/CobrowseView.tsx

@@ -0,0 +1,150 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Text,
+  ActivityIndicator,
+  TouchableOpacity,
+  StyleSheet,
+  EmitterSubscription
+} from 'react-native'
+import CobrowseIO from './CobrowseIO'
+import type Session from './Session'
+
+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
+  }
+})
+
+interface CobrowseViewProps {
+  // @deprecated
+  license?: string
+  onEnded?: () => void
+}
+
+interface CobrowseViewState {
+  error: Error | null
+  session: Session | null
+}
+
+export default class CobrowseView extends Component<CobrowseViewProps, CobrowseViewState> {
+  private _updateListener: EmitterSubscription | null = null
+  private _endListener: EmitterSubscription | null = null
+
+  constructor (props: CobrowseViewProps) {
+    super(props)
+    this.state = { error: null, session: null }
+  }
+
+  async componentDidMount (): Promise<void> {
+    if (this.props.license != null) {
+      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 != null) this.setState({ session: current })
+      else {
+        const session = await CobrowseIO.createSession()
+        this.setState({ session })
+      }
+    } catch (error) {
+      this.setState({ error: error as Error })
+    }
+
+    this._updateListener = CobrowseIO.addListener('session.updated', (session) => {
+      this.setState({ session })
+    })
+    this._endListener = CobrowseIO.addListener('session.ended', () => {
+      if (this.props.onEnded != null) this.props.onEnded()
+      this.setState({ session: null })
+    })
+  }
+
+  componentWillUnmount (): void {
+    if (this._updateListener != null) this._updateListener.remove()
+    if (this._endListener != null) this._endListener.remove()
+  }
+
+  async endSession (): Promise<void> {
+    try {
+      const { session } = this.state
+
+      if (session == null) {
+        throw new Error('No session to end')
+      }
+
+      await session.end()
+      this.setState({ session: null })
+    } catch (error) {
+      this.setState({ error: error as Error })
+    }
+  }
+
+  renderError (error: Error): JSX.Element {
+    return (
+      <Text style={[styles.text]}>{error.message}</Text>
+    )
+  }
+
+  renderCode (): JSX.Element {
+    let code = this.state.session?.code
+    if (code != null) code = code.substr(0, 3) + '-' + code.substr(3)
+    return (
+      <View>
+        <Text style={[styles.code, { opacity: code != null ? 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>
+    )
+  }
+
+  renderManageSession (): JSX.Element {
+    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>
+    )
+  }
+
+  renderContent (): JSX.Element {
+    const { error, session } = this.state
+    if (error != null) {
+      return this.renderError(error)
+    } else if ((session == null) || (session.state === 'pending' || session.state === 'authorizing')) {
+      return this.renderCode()
+    } else {
+      return this.renderManageSession()
+    }
+  }
+
+  render (): JSX.Element {
+    return (
+      <View style={styles.container}>
+        {this.renderContent()}
+      </View>
+    )
+  }
+}

package/js/{Redacted.js → Redacted.tsx}

@@ -1,7 +1,8 @@
 import React from 'react'
-import { requireNativeComponent } from 'react-native'
+import { requireNativeComponent, type ViewProps } from 'react-native'
+
 const CBIOCobrowseRedacted = requireNativeComponent('CBIOCobrowseRedacted')
 
-module.exports = function (props) {
+export default function Redacted (props: ViewProps): JSX.Element {
   return <CBIOCobrowseRedacted {...props}>{props.children}</CBIOCobrowseRedacted>
 }