feat: support onFallbackAction prop on view and cleanup ios/android

example/ios/Podfile.lock

@@ -1,7 +1,7 @@
 PODS:
   - boost (1.76.0)
   - CocoaAsyncSocket (7.6.5)
-  - CommandBarIOS (1.0.5)
+  - CommandBarIOS (1.0.8)
   - DoubleConversion (1.1.6)
   - FBLazyVector (0.72.6)
   - FBReactNativeSpec (0.72.6):
@@ -376,8 +376,8 @@ PODS:
   - React-jsinspector (0.72.6)
   - React-logger (0.72.6):
     - glog
-  - react-native-commandbar (1.0.4):
-    - CommandBarIOS (~> 1.0.5)
+  - react-native-commandbar (1.0.7):
+    - CommandBarIOS (= 1.0.8)
     - RCT-Folly (= 2021.07.22.00)
     - React-Core
   - React-NativeModulesApple (0.72.6):
@@ -665,7 +665,7 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   boost: 57d2868c099736d80fcd648bf211b4431e51a558
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
-  CommandBarIOS: fa6fe132824f41fa8ade49143ed9de6b1d7802e0
+  CommandBarIOS: 268f292af97e920d8ced751f8e3721d285755a94
   DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
   FBLazyVector: 748c0ef74f2bf4b36cfcccf37916806940a64c32
   FBReactNativeSpec: 966f29e4e697de53a3b366355e8f57375c856ad9
@@ -697,7 +697,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 3bf18ff7cb03cd8dfdce08fbbc0d15058c1d71ae
   React-jsinspector: 194e32c6aab382d88713ad3dd0025c5f5c4ee072
   React-logger: cebf22b6cf43434e471dc561e5911b40ac01d289
-  react-native-commandbar: d28e45df4dfdabb7f994057e4ddf1a093964971c
+  react-native-commandbar: 0e04c6ef2f83cd8815d58f1fe554aa21ee47676b
   React-NativeModulesApple: 02e35e9a51e10c6422f04f5e4076a7c02243fff2
   React-perflogger: e3596db7e753f51766bceadc061936ef1472edc3
   React-RCTActionSheet: 17ab132c748b4471012abbcdcf5befe860660485

example/src/App.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { HelpHubView } from 'react-native-commandbar';
 
-const commandbarOptions = { orgId: '641ade4d', launchCode: 'preview_4686' };
+const commandbarOptions = { orgId: 'your_org_id', spinnerColor: '#7B64C3' };
 
 export default function App() {
   const handleFallbackAction = (action: any) => {

ios/HelpHubViewManager.swift

@@ -1,24 +1,63 @@
 import CommandBarIOS
 
-@objc(HelpHubViewManager)
-class HelpHubViewManager: RCTViewManager {
-    @objc var options: NSDictionary?
-    @objc var onFallbackAction: RCTDirectEventBlock?
 
-    override func view() -> UIView! {
-        let options = CommandBarOptions(dictionary: self.options as! [String : Any])
-        let helpHubWebView = HelpHubWebView(frame: CGRect.zero, options: options)
-        helpHubWebView.delegate = self
-        return helpHubWebView
+@objc(RNEventEmitter)
+class RNEventEmitter : RCTEventEmitter {
+
+  public static var emitter: RCTEventEmitter!
+
+  override init() {
+    super.init()
+    RNEventEmitter.emitter = self
+  }
+
+  override func supportedEvents() -> [String] {
+      ["onFallbackAction"]
     }
+
+  public override static func requiresMainQueueSetup() -> Bool {
+      return true
+  }
+}
 
-    override static func requiresMainQueueSetup() -> Bool {
-        return true
+class RNHelpHubView : UIView {
+    @objc var options: NSDictionary? {
+        didSet {
+            self.helpHubWebView.options = CommandBarOptions(options as! [String : Any])
+        }
+    }
+
+    override init(frame: CGRect) {
+      super.init(frame: frame)
+      self.addSubview(helpHubWebView)
+    }
+
+    required init?(coder: NSCoder) {
+        super.init(coder: coder)
     }
+
+    lazy var helpHubWebView: HelpHubWebView = {
+        let webview = HelpHubWebView(frame: CGRect.zero)
+        webview.delegate = self
+        webview.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+      return webview
+    }()
 }
 
-extension HelpHubViewManager: HelpHubWebViewDelegate {
+extension RNHelpHubView: HelpHubWebViewDelegate {
     func didReceiveFallbackAction(_ action: [String : Any]) {
-        self.onFallbackAction?(action)
+        RNEventEmitter.emitter.sendEvent(withName: "onFallbackAction", body: action)
+    }
+}
+
+
+@objc(HelpHubViewManager)
+class HelpHubViewManager: RCTViewManager {
+    override func view() -> UIView! {
+        return RNHelpHubView()
+    }
+
+    override static func requiresMainQueueSetup() -> Bool {
+        return true
     }
 }

ios/RNCommandBar.mm

@@ -1,11 +1,11 @@
 #import <React/RCTBridgeModule.h>
 #import <React/RCTViewManager.h>
+#import <React/RCTEventEmitter.h>
 
 @interface RCT_EXTERN_MODULE(RNCommandBar, NSObject)
   RCT_EXTERN_METHOD(
-    openHelpHub: (NSString *)orgId
-    resolver: (RCTPromiseResolveBlock)resolve
-    rejecter: (RCTPromiseRejectBlock)reject
+    openHelpHub: (NSDictionary *)options
+    onFallbackAction: (RCTResponseSenderBlock)fallbackAction
   )
 
   + (BOOL)requiresMainQueueSetup
@@ -16,8 +16,21 @@ + (BOOL)requiresMainQueueSetup
 
 
 @interface RCT_EXTERN_MODULE(HelpHubViewManager, RCTViewManager)
+    RCT_EXPORT_VIEW_PROPERTY(options, NSDictionary)
 
-RCT_EXPORT_VIEW_PROPERTY(options, NSDictionary)
-RCT_EXPORT_VIEW_PROPERTY(onFallbackAction, RCTDirectEventBlock)
+    + (BOOL)requiresMainQueueSetup
+    {
+      return YES;
+    }
+@end
+
+
+@interface RCT_EXTERN_MODULE(RNEventEmitter, RCTEventEmitter)
+
+RCT_EXTERN_METHOD(supportedEvents)
 
+    + (BOOL)requiresMainQueueSetup
+    {
+      return YES;
+    }
 @end

ios/RNCommandBar.swift

@@ -5,10 +5,28 @@ import CommandBarIOS
 @objc(RNCommandBar)
 class RNCommandBar : NSObject {
     @objc
-    func openHelpHub(_ options: NSDictionary, onFallBackAction fallbackAction: RCTResponseSenderBlock? = nil) -> Void {
-        let options = CommandBarOptions(dictionary: options as! [String : Any])
-        let commandbar = CommandBar(options: options)
-        commandbar.openHelpHub(resolve: nil, reject: nil)
-        resolve(true)
+    func openHelpHub(_ options: NSDictionary, onFallbackAction fallbackAction: RCTResponseSenderBlock? = nil) -> Void {
+        let options = CommandBarOptions(options as! [String : Any])
+        let handler = CommandBarHandler(options, onFallbackAction: fallbackAction)
+        handler.openHelpHub()
+    }
+
+    private class CommandBarHandler : HelpHubWebViewDelegate {
+        var commandbar: CommandBar
+        var onFallbackAction: RCTResponseSenderBlock? = nil
+
+        init(_ options: CommandBarOptions, onFallbackAction fallbackAction: RCTResponseSenderBlock? = nil) {
+            self.commandbar = CommandBar(options: options)
+            commandbar.delegate = self
+            self.onFallbackAction = fallbackAction
+        }
+
+        func openHelpHub() {
+            self.commandbar.openHelpHub()
+        }
+
+        func didReceiveFallbackAction(_ action: [String : Any]) {
+            self.onFallbackAction?([action])
+        }
     }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-commandbar",
-  "version": "1.0.4",
+  "version": "1.0.7",
   "description": "Copilot & HelpHub in React Native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

react-native-commandbar.podspec

@@ -16,7 +16,7 @@ Pod::Spec.new do |s|
 
   s.source_files = "ios/**/*.{h,m,mm,swift}"
 
-  s.dependency 'CommandBarIOS', '~> 1.0.5'
+  s.dependency 'CommandBarIOS', '= 1.0.8'
 
   # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
   # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.

src/CommandBar.ts

@@ -1,6 +1,46 @@
+import { NativeModules, Platform } from 'react-native';
+import type { HelpHubView } from './HelpHubView';
+
 export type CommandBarOptions = {
   orgId: string;
   userId?: string;
   spinnerColor?: string;
   launchCode?: string;
 };
+
+// Define type for the LINKING_ERROR constant
+const LINKING_ERROR: string =
+  `The package 'react-native-commandbar' doesn't seem to be linked. Make sure: \n\n` +
+  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
+  '- You rebuilt the app after installing the package\n' +
+  '- You are not using Expo Go\n';
+
+export type RNCommandBar = {
+  openHelpHub(
+    options: CommandBarOptions,
+    onFallbackAction?: (action: any) => void
+  ): void;
+  HelpHubView: typeof HelpHubView;
+};
+
+export const RNCommandBar = NativeModules.RNCommandBar
+  ? NativeModules.RNCommandBar
+  : new Proxy(
+      {},
+      {
+        get() {
+          throw new Error(LINKING_ERROR);
+        },
+      }
+    );
+
+export const RNEventEmitter = NativeModules.RNEventEmitter
+  ? NativeModules.RNEventEmitter
+  : new Proxy(
+      {},
+      {
+        get() {
+          throw new Error(LINKING_ERROR);
+        },
+      }
+    );

src/HelpHubView.tsx

@@ -1,29 +1,41 @@
 import React, { useEffect } from 'react';
-import { DeviceEventEmitter, requireNativeComponent } from 'react-native';
+import {
+  DeviceEventEmitter,
+  requireNativeComponent,
+  NativeEventEmitter,
+  Platform,
+} from 'react-native';
 import type { CommandBarOptions } from './CommandBar';
 import type { ViewStyle } from 'react-native';
+import { RNEventEmitter } from './CommandBar';
 
 export type HelpHubViewProps = {
   options: CommandBarOptions;
   onFallbackAction?: (action: any) => void;
   style?: ViewStyle;
 };
 
+const EventEmitter =
+  Platform.OS === 'ios'
+    ? new NativeEventEmitter(RNEventEmitter)
+    : DeviceEventEmitter;
+
 export const HelpHubViewNative: React.ComponentClass<HelpHubViewProps> =
   requireNativeComponent('HelpHubView');
 
 export const HelpHubView: React.FC<HelpHubViewProps> = (props) => {
   useEffect(() => {
-    const subscription = DeviceEventEmitter.addListener(
+    const subscription = EventEmitter.addListener(
       'onFallbackAction',
       (action) => {
         props.onFallbackAction?.(action);
       }
     );
 
     return () => {
-      subscription.remove();
+      subscription?.remove();
     };
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

src/index.tsx

@@ -1,32 +1,5 @@
-import { NativeModules, Platform } from 'react-native';
 import { HelpHubView } from './HelpHubView';
-import type { CommandBarOptions } from './CommandBar';
-
-// Define type for the LINKING_ERROR constant
-const LINKING_ERROR: string =
-  `The package 'react-native-commandbar' doesn't seem to be linked. Make sure: \n\n` +
-  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
-  '- You rebuilt the app after installing the package\n' +
-  '- You are not using Expo Go\n';
-
-const RNCommandBar = NativeModules.RNCommandBar
-  ? NativeModules.RNCommandBar
-  : new Proxy(
-      {},
-      {
-        get() {
-          throw new Error(LINKING_ERROR);
-        },
-      }
-    );
-
-type RNCommandBar = {
-  openHelpHub(
-    options: CommandBarOptions,
-    onFallbackAction?: (action: any) => void
-  ): void;
-  HelpHubView: typeof HelpHubView;
-};
+import { RNCommandBar } from './CommandBar';
 
 export * from './HelpHubView';