{"id":21765168,"url":"https://github.com/fabonreact/react-native-wear-connectivity","last_synced_at":"2025-06-13T18:36:21.581Z","repository":{"id":222091301,"uuid":"753980017","full_name":"fabOnReact/react-native-wear-connectivity","owner":"fabOnReact","description":"Connect Wear OS apps with react-native.","archived":false,"fork":false,"pushed_at":"2025-02-21T00:51:00.000Z","size":2027,"stargazers_count":130,"open_issues_count":4,"forks_count":7,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-05T08:16:47.809Z","etag":null,"topics":["android","react-native","renative","renative-wear","wear-api","wear-os","wearable","wearable-devices","wearos"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fabOnReact.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-02-07T06:46:24.000Z","updated_at":"2025-06-01T10:05:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"41769038-0000-44a5-a6d7-b4fb03293d4c","html_url":"https://github.com/fabOnReact/react-native-wear-connectivity","commit_stats":null,"previous_names":["fabonreact/react-native-wear-connectivity"],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/fabOnReact/react-native-wear-connectivity","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabOnReact%2Freact-native-wear-connectivity","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabOnReact%2Freact-native-wear-connectivity/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabOnReact%2Freact-native-wear-connectivity/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabOnReact%2Freact-native-wear-connectivity/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fabOnReact","download_url":"https://codeload.github.com/fabOnReact/react-native-wear-connectivity/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabOnReact%2Freact-native-wear-connectivity/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259699794,"owners_count":22898335,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","react-native","renative","renative-wear","wear-api","wear-os","wearable","wearable-devices","wearos"],"created_at":"2024-11-26T13:10:49.359Z","updated_at":"2025-06-13T18:36:21.555Z","avatar_url":"https://github.com/fabOnReact.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-wear-connectivity\n\nAllows you to connect React Native Mobile apps with WearOS.\n\nhttps://github.com/user-attachments/assets/100ee026-550f-4d84-b180-58874ae2b395\n\n**Note**: Refer to [react-native-watch-connectivity][2] for Apple Watch development.\n\n[1]: https://wearos.google.com\n[2]: https://github.com/mtford90/react-native-watch-connectivity\n\n# Table of Contents\n\n- [Installation](#installation)\n- [React Native API Documentation](#react-native-api-documentation)\n- [Jetpack Compose API Documentation](#jetpack-compose-api-documentation)\n- [How to run the example](#how-to-run-the-example)\n- [Alternative methods of installation](#alternative-methods-of-installation)\n- [FAQ on Troubleshooting Errors](#faq-on-troubleshooting-errors)\n- [Contributing](#contributing)\n\n## Installation\n\n```sh\nyarn add react-native-wear-connectivity\n```\n\nor\n\n```sh\nnpm install react-native-wear-connectivity\n```\n\nAdd the following entry to your `android/app/src/main/AndroidManifest.xml` (full example of AndroidManifest available [here](example/android/app/src/main/AndroidManifest.xml)):\n\n```xml\n\u003cmanifest xmlns:android=\"http://schemas.android.com/apk/res/android\"\u003e\n    \u003cuses-permission android:name=\"android.permission.INTERNET\" /\u003e\n    \u003c!-- ADD THIS PERMISSIONS --\u003e\n    \u003cuses-permission android:name=\"android.permission.WAKE_LOCK\"/\u003e\n    \u003cuses-permission android:name=\"android.permission.FOREGROUND_SERVICE\" /\u003e\n    \u003c!-- END OF THE CHANGES --\u003e\n\n    \u003capplication\u003e\n        \u003c!-- ADD THIS SERVICE --\u003e\n        \u003cservice android:name=\"com.wearconnectivity.WearConnectivityTask\"\n          android:permission=\"android.permission.BIND_JOB_SERVICE\"\n          android:exported=\"true\" /\u003e\n        \u003c!-- END OF THE CHANGES --\u003e\n    \u003c/application\u003e\n\u003c/manifest\u003e\n```\n\n## React Native API Documentation\n\nThe example of implementation available in the [CounterScreen](example/src/CounterScreen/index.android.tsx).\n\n### Send Messages\n\nhttps://mtford.co.uk/projects/react-native-watch-connectivity/docs/communication/\n\n```js\nimport { sendMessage } from 'react-native-wear-connectivity';\n\nsendMessage({ text: 'Hello watch!' }, (reply) =\u003e {\n  console.log(reply); // {\"text\": \"Hello React Native app!\"}\n});\n```\n\n### Receive Messages\n\nhttps://mtford.co.uk/projects/react-native-watch-connectivity/docs/communication/\n\n```js\nimport { watchEvents } from 'react-native-wear-connectivity';\n\nconst unsubscribe = watchEvents.on('message', (message, reply) =\u003e {\n  console.log('received message from watch', message);\n  /*\n   * reply is not supported on Android\n   * reply({ text: 'Thanks watch!' });\n   */\n});\n```\n\n### Send Files\n\nhttps://mtford.co.uk/projects/react-native-watch-connectivity/docs/files/\n\n```js\nimport { startFileTransfer } from 'react-native-wear-connectivity';\n\nconst metadata = {};\n\nconst { id } = await startFileTransfer('file:///path/to/file', metadata);\n\nconsole.log(`Started a new file transfer with id ${id}`);\n```\n\n### Monitor File Transfers\n\nhttps://mtford.co.uk/projects/react-native-watch-connectivity/docs/files/\n\n```js\nimport { monitorFileTransfers } from 'react-native-wear-connectivity';\n\nconst cancel = monitorFileTransfers((event) =\u003e {\n  const {\n    type, // started | progress | finished | error\n    completedUnitCount, // num bytes completed\n    estimatedTimeRemaining,\n    fractionCompleted,\n    throughput, // Bit rate\n    totalUnitCount, // total num. bytes\n    url, // url of file being transferred\n    metadata, // file metadata\n    id, // id === transferId\n    startTime, // time that the file transfer started\n    endTime, // time that the file transfer ended\n    error, // null or [Error] if the file transfer failed\n  } = transferInfo;\n});\n\ncancel();\n```\n\n## Jetpack Compose API Documentation\n\n### Send Messages\n\n```kotlin\nimport androidx.activity.ComponentActivity\nimport com.google.android.gms.wearable.MessageClient\nimport com.google.android.gms.wearable.Wearable\nimport org.json.JSONObject\nimport com.google.android.gms.wearable.Node\n\nclass MainActivity : ComponentActivity(), MessageClient.OnMessageReceivedListener {\n\n  // MainActivity implementation ...\n\n  fun sendMessageToClient(node: Node) {\n      val jsonObject = JSONObject().apply {\n          put(\"event\", \"message\")\n          put(\"text\", \"hello\")\n      }\n      val sendTask = Wearable.getMessageClient(applicationContext).sendMessage(\n          node.getId(), jsonObject.toString(), null\n      )\n  }\n}\n```\n\n### Receive Messages\n\n```kotlin\nimport androidx.activity.ComponentActivity\nimport com.google.android.gms.wearable.MessageClient\nimport com.google.android.gms.wearable.MessageEvent\nimport org.json.JSONObject\nimport androidx.compose.runtime.mutableStateOf\n\nclass MainActivity : ComponentActivity(), MessageClient.OnMessageReceivedListener {\n  var count by mutableStateOf(0)\n\n  // MainActivity implementation ...\n\n  override fun onMessageReceived(messageEvent: MessageEvent) {\n      val jsonObject = JSONObject(messageEvent.path)\n      val event = jsonObject.getString(\"event\")\n      if (event.equals(\"message\")) {\n          count = count + 1;\n      }\n  }\n}\n```\n\n# How to run the example\n\nI suggest you to try to run the example before doing your own implementation. You can try to modify the WearOS example and connect it to your React Native Mobile app following this instructions.\n\n**How to run the React Native Mobile App example**\n\nYou need to clone the `react-native-wear-connectivity` project, build and run the mobile app example.\n\n```\ngit clone https://github.com/fabOnReact/react-native-wear-connectivity\ncd react-native-wear-connectivity\nyarn\ncd example\nyarn\nyarn android\n```\n\n**How to run the Jetpack Compose WearOS example**\n\n1. Clone the WearOS Jetpack Compose [example](https://github.com/fabOnReact/wearos-communication-with-rn)\n\n```\ngit clone https://github.com/fabOnReact/wearos-communication-with-rn\n```\n\n2. Open the project with android studio, build and run it on an [Android WearOS emulator](https://github-production-user-asset-6210df.s3.amazonaws.com/24992535/303911079-f6cb9f84-dc50-492b-963d-6d9e9396f451.png?X-Amz-Algorithm=AWS4-HMAC-SHA256\u0026X-Amz-Credential=AKIAVCODYLSA53PQK4ZA%2F20250125%2Fus-east-1%2Fs3%2Faws4_request\u0026X-Amz-Date=20250125T110158Z\u0026X-Amz-Expires=300\u0026X-Amz-Signature=4bd2be95943124fe34fb13e6a54e9a2fe8a9c06d1eb8afdf005ce02cf43c90d1\u0026X-Amz-SignedHeaders=host).\n3. Now you can pair the WearOS emulator with the Android Mobile Emulator as explained in these [instructions](https://developer.android.com/training/wearables/get-started/connect-phone).\n\n**Make sure you respect this requirements:**\n\n### Both apps share the same package name and applicationId\n\nGenerate the app using the same package name and applicationId of the React Native Android App otherwise follow [these instructions](https://stackoverflow.com/a/29092698/7295772) to rename package name (in AndroidManifest, build.gradle, the project files) and applicationId in build.gradle.\n\n### Both apps are signed with the same key\n\nMake sure both apps use the same signing key. You can verify it as follows:\n\n**Jetpack Compose App WearOS app** (no react-native)\n\n- Verify that your build.gradle.kts on WearOS uses the same certificate from the Mobile App. The WearOS example configurations are [here](https://github.com/fabOnReact/wearos-communication-with-rn/blob/371e6c5862d49ccbff08ab951a26284a216daf97/app/build.gradle.kts#L21-L38) for our WearOS Jetpack Compose example.\n- Make sure the two projects use the same keystore. The WearOS project uses the same [debug.keystore](https://github.com/fabOnReact/wearos-communication-with-rn/blob/main/app/debug.keystore) of the Mobile App.\n\nIn our example, the gradle configs set the singingConfigs to use the same file debug.keystore from the React Native Mobile App. The same configuration needs to be done for the release/production key.\n\n**Android Mobile React Native app**\n\n- Make sure both apps are using the same key, in our example the singingConfigs for the React Native Mobile App are configured [here](https://github.com/fabOnReact/react-native-wear-connectivity/blob/2f936622422e197c22bef228b44eb24b46c878ae/example/android/app/build.gradle#L78-L104) and the [debug.keystore](https://github.com/fabOnReact/wearos-communication-with-rn/blob/371e6c5862d49ccbff08ab951a26284a216daf97/app/debug.keystore) is the same from the WearOS app.\n\n### Detailed explanation of the Implementation\n\n**Sending messages from Jetpack Compose WearOS to React Native Mobile Device**\n\n[sendMessageToClient](https://github.com/fabOnReact/wearos-communication-with-rn/blob/371e6c5862d49ccbff08ab951a26284a216daf97/app/src/main/java/com/wearconnectivityexample/presentation/MainActivity.kt#L75-L87) is implemented on Jetpack Compose WearOS to send messages to the React Native Mobile App. `sendMessageToClient` is triggered on WearOS when [clicking](https://github.com/fabOnReact/wearos-communication-with-rn/blob/371e6c5862d49ccbff08ab951a26284a216daf97/app/src/main/java/com/wearconnectivityexample/presentation/WearApp.kt#L31) on the watch Button Component.\n\n```kotlin\nfun sendMessageToClient(node: Node) {\n    val jsonObject = JSONObject().apply {\n        put(\"event\", \"message\")\n        put(\"text\", \"hello\")\n    }\n    try {\n        val sendTask = Wearable.getMessageClient(applicationContext).sendMessage(\n            node.getId(), jsonObject.toString(), null\n        )\n    } catch (e: Exception) {\n        Log.w(\"WearOS: \", \"e $e\")\n    }\n}\n```\n\nThe WearOS `sendMessageToClient` function retrieves the devices connected via bluetooth to the WearOS device, and sends a JSON payload to those devices.\n\nThe payload is:\n\n```javascript\n{\n   event: \"message\",\n   text: \"this is the message parameter\",\n}\n```\n\nThe React Native Mobile App uses `watchEvents.on(eventName, callback)` to listen to the `message` event and to increase the number displayed in the React Native Mobile App. The implementation in the React Native Mobile example is in [CounterScreen/index.android.tsx](https://github.com/fabOnReact/react-native-wear-connectivity/blob/2f936622422e197c22bef228b44eb24b46c878ae/example/src/CounterScreen/index.android.tsx#L14-L16).\n\n```javascript\nuseEffect(() =\u003e {\n  const unsubscribe = watchEvents.on('message', () =\u003e {\n    setCount((prevCount) =\u003e prevCount + 1);\n  });\n\n  return () =\u003e {\n    unsubscribe();\n  };\n}, []);\n```\n\n**Sending messages from React Native Mobile Device to Jetpack Compose WearOS**\n\nThe React Native Mobile App Example sends messages to the WearOS Jetpack Compose example with [sendMessage](https://github.com/fabOnReact/react-native-wear-connectivity/blob/2f936622422e197c22bef228b44eb24b46c878ae/example/src/CounterScreen/index.android.tsx#L29-L33).\n\n```javascript\nconst sendMessageToWear = () =\u003e {\n  setDisabled(true);\n  const json = { text: 'hello' };\n  sendMessage(json, onSuccess, onError);\n};\n```\n\nThe Jetpack Compose WearOS app implements [onMessageReceived](https://github.com/fabOnReact/wearos-communication-with-rn/blob/371e6c5862d49ccbff08ab951a26284a216daf97/app/src/main/java/com/wearconnectivityexample/presentation/MainActivity.kt#L89-L95) and updates the Counter number on the screen when the message is received:\n\n```kotlin\noverride fun onMessageReceived(messageEvent: MessageEvent) {\n    val jsonObject = JSONObject(messageEvent.path)\n    val event = jsonObject.getString(\"event\")\n    if (event.equals(\"message\")) {\n        count = count + 1;\n    }\n}\n```\n\nonMessageReceived modifies the [count state variable](https://github.com/fabOnReact/wearos-communication-with-rn/blob/371e6c5862d49ccbff08ab951a26284a216daf97/app/src/main/java/com/wearconnectivityexample/presentation/MainActivity.kt#L31) and re-renders the Counter component with a new [text](https://github.com/fabOnReact/wearos-communication-with-rn/blob/371e6c5862d49ccbff08ab951a26284a216daf97/app/src/main/java/com/wearconnectivityexample/presentation/WearApp.kt#L46).\n\nYou can copy the [implementation](https://github.com/fabOnReact/wearos-communication-with-rn/tree/main/app/src/main/java/com/wearconnectivityexample/presentation) from the example, or follow the [instructions above](https://github.com/fabOnReact/wearos-communication-with-rn?tab=readme-ov-file#both-apps-share-the-same-package-name-and-applicationid) to rename package name, application id and change the signing key to pair that example with your React Native App.\n\n## Alternative methods of installation\n\nThe instructions for writing the WearOS apps with react-native are available at [alternative-installation.md](docs/alternative-installation.md). React Native does not officially support WearOS, some essential components like CircularScrollView are not available in React Native. More info in Issues https://github.com/fabOnReact/react-native-wear-connectivity/issues/12 and https://github.com/andrew-levy/jetpack-compose-react-native/issues/9.\n\n## FAQ on Troubleshooting Errors\n\nWhile some error messages are displayed on the metro server for the mobile or wearOS device (port 8082), other warnings are only available through logcat.\nTo display them you need to open the android logcat tool from within Android Studio, where you can select the emulator and filter the messages by package name (more info in this [screenshot][41]).\n\n[41]: https://github.com/user-attachments/assets/87016f71-782d-4f28-88dc-2c5d013eae2f\n\n#### Wearable App not installed on Mobile Device\n\nThe error displays on the Metro Server if the mobile device did not install the Wear App, which is used to pair mobile device with wearOS device.\nThe Wear app is installed from Google Play and allows to pair the Wear Device with the Android Phone. Follow this [instructions][21] to pair WearOS emulator with Android Phone.\n\n```\nThe Android mobile phone needs to install the Google Play Wear app.\n```\n\n#### wearOS device too far for bluetooth connection\n\nLogcat (wearOS) shows the following log message when sending messages via bluetooth to a mobile device too far from the watch. The message is not displayed on the Metro Server.\n\n```\nPixel_8_Pro_API_35Device is too far for bluetooth connection.\n```\n\n#### Failed to deliver message to AppKey\n\nLogcat shows the error messages when the WearOS and Mobile apps are not signed with the same key, or they do not share the same package name and applicationId (more info [here](https://github.com/fabOnReact/react-native-wear-connectivity?tab=readme-ov-file#both-apps-share-the-same-package-name-and-applicationid)).\n\n```\nFailed to deliver message to AppKey\n```\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\nFeature requests are discussed in the [issue tracker][40].\n\n[40]: https://github.com/fabOnReact/react-native-wear-connectivity/issues\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffabonreact%2Freact-native-wear-connectivity","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffabonreact%2Freact-native-wear-connectivity","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffabonreact%2Freact-native-wear-connectivity/lists"}