react-native-wear-connectivity

Allows you to connect React Native Mobile apps with WearOS.

Note: Refer to react-native-watch-connectivity for Apple Watch development.

Table of Contents

• Installation
• React Native API Documentation
• Jetpack Compose API Documentation
• How to run the example
• Alternative methods of installation
• FAQ on Troubleshooting Errors
• Contributing

Installation

React Native 0.82: install react-native-wear-connectivity@0.1.16.

yarn add react-native-wear-connectivity

or

npm install react-native-wear-connectivity

Add the following entry to your android/app/src/main/AndroidManifest.xml (full example of AndroidManifest available here):

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET" />

    <uses-permission android:name="android.permission.WAKE_LOCK"/>
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_DATA_SYNC" />
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_CONNECTED_DEVICE" />


    <uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />
    <uses-permission android:name="android.permission.BLUETOOTH_SCAN" />
    <uses-permission android:name="android.permission.BLUETOOTH_ADVERTISE" />


    <application>





        <service
          android:name="com.wearconnectivity.WearConnectivityTask"
          android:exported="false"
          android:foregroundServiceType="dataSync|connectedDevice"
          android:permission="android.permission.FOREGROUND_SERVICE_CONNECTED_DEVICE" />


    </application>
</manifest>

React Native API Documentation

The example of implementation available in the CounterScreen.

Send Messages

https://mtford.co.uk/projects/react-native-watch-connectivity/docs/communication/

import { sendMessage } from 'react-native-wear-connectivity';

sendMessage({ text: 'Hello watch!' }, (reply) => {
  console.log(reply); // {"text": "Hello React Native app!"}
});

Receive Messages

https://mtford.co.uk/projects/react-native-watch-connectivity/docs/communication/

import { watchEvents } from 'react-native-wear-connectivity';

const unsubscribe = watchEvents.on('message', (message, reply) => {
  console.log('received message from watch', message);
  /*
   * reply is not supported on Android
   * reply({ text: 'Thanks watch!' });
   */
});

Send Files

https://mtford.co.uk/projects/react-native-watch-connectivity/docs/files/

import { startFileTransfer } from 'react-native-wear-connectivity';

const metadata = {};

const { id } = await startFileTransfer('file:///path/to/file', metadata);

console.log(`Started a new file transfer with id ${id}`);

Monitor File Transfers

https://mtford.co.uk/projects/react-native-watch-connectivity/docs/files/

import { monitorFileTransfers } from 'react-native-wear-connectivity';

const cancel = monitorFileTransfers((event) => {
  const {
    type, // started | progress | finished | error
    completedUnitCount, // num bytes completed
    estimatedTimeRemaining,
    fractionCompleted,
    throughput, // Bit rate
    totalUnitCount, // total num. bytes
    url, // url of file being transferred
    metadata, // file metadata
    id, // id === transferId
    startTime, // time that the file transfer started
    endTime, // time that the file transfer ended
    error, // null or [Error] if the file transfer failed
  } = transferInfo;
});

cancel();

Jetpack Compose API Documentation

Send Messages

import androidx.activity.ComponentActivity
import com.google.android.gms.wearable.MessageClient
import com.google.android.gms.wearable.Wearable
import org.json.JSONObject
import com.google.android.gms.wearable.Node

class MainActivity : ComponentActivity(), MessageClient.OnMessageReceivedListener {

  // MainActivity implementation ...

  fun sendMessageToClient(node: Node) {
      val jsonObject = JSONObject().apply {
          put("event", "message")
          put("text", "hello")
      }
      val sendTask = Wearable.getMessageClient(applicationContext).sendMessage(
          node.getId(), jsonObject.toString(), null
      )
  }
}

Receive Messages

import androidx.activity.ComponentActivity
import com.google.android.gms.wearable.MessageClient
import com.google.android.gms.wearable.MessageEvent
import org.json.JSONObject
import androidx.compose.runtime.mutableStateOf

class MainActivity : ComponentActivity(), MessageClient.OnMessageReceivedListener {
  var count by mutableStateOf(0)

  // MainActivity implementation ...

  override fun onMessageReceived(messageEvent: MessageEvent) {
      val jsonObject = JSONObject(messageEvent.path)
      val event = jsonObject.getString("event")
      if (event.equals("message")) {
          count = count + 1;
      }
  }
}

How to run the example

I 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.

How to run the React Native Mobile App example

You need to clone the react-native-wear-connectivity project, build and run the mobile app example.

git clone https://github.com/fabOnReact/react-native-wear-connectivity
cd react-native-wear-connectivity
yarn
cd example
yarn
yarn android

How to run the Jetpack Compose WearOS example

1. Clone the WearOS Jetpack Compose example

git clone https://github.com/fabOnReact/wearos-communication-with-rn

1. Open the project with android studio, build and run it on an Android WearOS emulator.
2. Now you can pair the WearOS emulator with the Android Mobile Emulator as explained in these instructions.

Make sure you respect this requirements:

Both apps share the same package name and applicationId

Generate the app using the same package name and applicationId of the React Native Android App otherwise follow these instructions to rename package name (in AndroidManifest, build.gradle, the project files) and applicationId in build.gradle.

Both apps are signed with the same key

Make sure both apps use the same signing key. You can verify it as follows:

Jetpack Compose App WearOS app (no react-native)

• Verify that your build.gradle.kts on WearOS uses the same certificate from the Mobile App. The WearOS example configurations are here for our WearOS Jetpack Compose example.
• Make sure the two projects use the same keystore. The WearOS project uses the same debug.keystore of the Mobile App.

In 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.

Android Mobile React Native app

• Make sure both apps are using the same key, in our example the singingConfigs for the React Native Mobile App are configured here and the debug.keystore is the same from the WearOS app.

Detailed explanation of the Implementation

Sending messages from Jetpack Compose WearOS to React Native Mobile Device

sendMessageToClient is implemented on Jetpack Compose WearOS to send messages to the React Native Mobile App. sendMessageToClient is triggered on WearOS when clicking on the watch Button Component.

fun sendMessageToClient(node: Node) {
    val jsonObject = JSONObject().apply {
        put("event", "message")
        put("text", "hello")
    }
    try {
        val sendTask = Wearable.getMessageClient(applicationContext).sendMessage(
            node.getId(), jsonObject.toString(), null
        )
    } catch (e: Exception) {
        Log.w("WearOS: ", "e $e")
    }
}

The WearOS sendMessageToClient function retrieves the devices connected via bluetooth to the WearOS device, and sends a JSON payload to those devices.

The payload is:

{
   event: "message",
   text: "this is the message parameter",
}

The 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.

useEffect(() => {
  const unsubscribe = watchEvents.on('message', () => {
    setCount((prevCount) => prevCount + 1);
  });

  return () => {
    unsubscribe();
  };
}, []);

Sending messages from React Native Mobile Device to Jetpack Compose WearOS

The React Native Mobile App Example sends messages to the WearOS Jetpack Compose example with sendMessage.

const sendMessageToWear = () => {
  setDisabled(true);
  const json = { text: 'hello' };
  sendMessage(json, onSuccess, onError);
};

The Jetpack Compose WearOS app implements onMessageReceived and updates the Counter number on the screen when the message is received:

override fun onMessageReceived(messageEvent: MessageEvent) {
    val jsonObject = JSONObject(messageEvent.path)
    val event = jsonObject.getString("event")
    if (event.equals("message")) {
        count = count + 1;
    }
}

onMessageReceived modifies the count state variable and re-renders the Counter component with a new text.

You can copy the implementation from the example, or follow the instructions above to rename package name, application id and change the signing key to pair that example with your React Native App.

Alternative methods of installation

The instructions for writing the WearOS apps with react-native are available at 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.

FAQ on Troubleshooting Errors

While some error messages are displayed on the metro server for the mobile or wearOS d