Skip to content

Latest commit

 

History

History
130 lines (92 loc) · 6.34 KB

CONTRIBUTING.md

File metadata and controls

130 lines (92 loc) · 6.34 KB

Contributing

Contributions are always welcome, no matter how large or small!

We want this community to be friendly and respectful to each other. Please follow it in all your interactions with the project. Before contributing, please read the code of conduct.

Screen.Recording.2025-01-25.at.6.23.58.PM.mov

How to run the React Native Mobile 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.

Detailed explanation on how WearOS (Jetpack Compose) communicates with React Native (Android Mobile)

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.

Sending a pull request

Working on your first pull request? You can learn how from this free series: How to Contribute to an Open Source Project on GitHub.

When you're sending a pull request:

  • Prefer small pull requests focused on one change.
  • Review the documentation to make sure it looks good.
  • Follow the pull request template when opening a pull request.
  • For pull requests that change the API or implementation, discuss with maintainers first by opening an issue.

Publishing to npm

We use release-it to make it easier to publish new versions. It handles common tasks like bumping version based on semver, creating tags and releases etc.

To publish new versions, run the following:

yarn release