feat: add WearOS connector

README.md

@@ -65,10 +65,50 @@ Add the following entry to your `android/app/src/main/AndroidManifest.xml` (full
           android:permission="android.permission.FOREGROUND_SERVICE_CONNECTED_DEVICE" />
         <!-- END OF THE CHANGES -->
 
-    </application>
+  </application>
 </manifest>
 ```
 
+### Wear OS application setup
+
+To communicate from a React Native Wear OS app, add the library to your watch
+project and declare the Wear OS feature in the manifest:
+
+```xml
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+  <uses-permission android:name="android.permission.INTERNET" />
+  <uses-feature android:name="android.hardware.type.watch" />
+</manifest>
+```
+
+Example component that sends a message to the paired phone and updates the UI
+when a message is received:
+
+```tsx
+import React, { useEffect, useState } from 'react';
+import { View, Text, Button } from 'react-native';
+import { sendMessage, watchEvents } from 'react-native-wear-connectivity';
+
+export default function WearApp() {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    const unsubscribe = watchEvents.on('message', () => {
+      setCount((c) => c + 1);
+    });
+
+    return () => unsubscribe();
+  }, []);
+
+  return (
+    <View>
+      <Text>The count is {count}</Text>
+      <Button title="press" onPress={() => sendMessage({ text: 'hello' })} />
+    </View>
+  );
+}
+```
+
 ## React Native API Documentation
 
 The example of implementation available in the [CounterScreen](example/src/CounterScreen/index.android.tsx).

src/index.tsx

@@ -2,6 +2,7 @@ import { AppRegistry } from 'react-native';
 import { NativeModules, Platform } from 'react-native';
 import { watchEvents } from './subscriptions';
 import { sendMessage } from './messages';
+import WearOSConnector from './wearos/WearOSConnector';
 import type {
   ReplyCallback,
   ErrorCallback,
@@ -37,7 +38,13 @@ const startFileTransfer: SendFile = (file, _metadata) => {
   return WearConnectivity.sendFile(file, _metadata);
 };
 
-export { startFileTransfer, sendMessage, watchEvents, WearConnectivity };
+export {
+  startFileTransfer,
+  sendMessage,
+  watchEvents,
+  WearConnectivity,
+  WearOSConnector,
+};
 export type { ReplyCallback, ErrorCallback };
 
 type WearParameters = {

src/wearos/WearOSConnector.ts

@@ -0,0 +1,49 @@
+import type { Payload, ReplyCallback, ErrorCallback } from '../NativeWearConnectivity';
+import { sendMessage } from '../messages';
+import { watchEvents } from '../subscriptions';
+
+/**
+ * Simple helper class that forwards messages between the React Native app and the Wear OS app.
+ *
+ * It wraps the existing `sendMessage` API and exposes a convenient method to
+ * subscribe to incoming messages coming from the Wear OS companion application.
+ */
+class WearOSConnector {
+  private unsubscribe?: () => void;
+
+  /**
+     * Register a listener for messages coming from the Wear OS app.
+     *
+     * @param listener Callback invoked every time a message is received.
+     * @returns Function to remove the registered listener.
+     */
+  connect(listener: (message: Payload) => void) {
+    this.unsubscribe = watchEvents.on('message', listener);
+    return this.unsubscribe;
+  }
+
+  /**
+     * Remove the current message listener, if any.
+     */
+  disconnect() {
+    if (this.unsubscribe) {
+      this.unsubscribe();
+      this.unsubscribe = undefined;
+    }
+  }
+
+  /**
+     * Send a message to the Wear OS app.
+     *
+     * @param message Message payload to send.
+     * @param cb Optional callback invoked on success.
+     * @param errCb Optional callback invoked on error.
+     */
+  send(message: Payload, cb?: ReplyCallback, errCb?: ErrorCallback) {
+    sendMessage(message, cb, errCb);
+  }
+}
+
+const connector = new WearOSConnector();
+export default connector;
+export type { Payload };

watch-example/package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "18.2.0",
-    "react-native": "0.73.4"
+    "react-native": "0.73.4",
+    "react-native-wear-connectivity": "file:.."
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",