You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
**Note**: This library allows you to write your Android WearOS and Mobile apps in React Native, refer to [react-native-watch-connectivity][2] for Apple Watch development.
-[Connecting a Jetpack Compose WearOS app to a React Native Mobile App]()
15
-
-[Using renative to build WearOS and Mobile App](#using-renative-to-build-wearos-and-mobile-app)
16
-
-[Using react-native to build WearOS and Mobile App](#installation-with-react-native)
17
-
-[Example of implementation](#example-of-implementation)
18
-
-[API Documentation](#api-documentation)
14
+
-[Installation](#installation)
15
+
-[React Native API Documentation](#react-native-api-documentation)
16
+
-[How to run the example](how-to-run-the-example)
19
17
-[FAQ on Troubleshooting Errors](#faq-on-troubleshooting-errors)
20
18
-[Contributing](#contributing)
21
19
22
-
## Using renative to build WearOS and Mobile App
23
-
24
-
The app generated with this implementation is available [here](https://github.com/fabOnReact/react-native-wear-connectivity-renative-example).
25
-
26
-
Create a new renative app for android and wearos:
27
-
28
-
```sh
29
-
npx rnv new
30
-
```
31
-
32
-
Change folder to the newly created app and run yarn install:
20
+
## Installation
33
21
34
22
```sh
35
-
cd YourFolder
36
-
yarn install
23
+
yarn add react-native-wear-connectivity
37
24
```
38
25
39
-
Run the app on the Android Emulator:
26
+
or
40
27
41
28
```sh
42
-
yarn rnv run -p android
29
+
npm install react-native-wear-connectivity
43
30
```
44
31
45
-
Run the app on the WearOS Emulator:
32
+
## React Native API Documentation
46
33
47
-
```sh
48
-
yarn rnv run -p androidwear
49
-
```
34
+
### Send Messages
50
35
51
-
Add the dependency `react-native-wear-connectivity` to your [renative.json](https://github.com/fabOnReact/react-native-wear-connectivity-renative-example/blob/main/renative.json):
- Pair the Android emulator with the Wear OS emulator ([instructions][21]).
62
-
- Implement the [example](#example-of-implementation) in [src/app/index.tsx](https://github.com/fabOnReact/react-native-wear-connectivity-renative-example/blob/main/src/app/index.tsx).
63
-
64
-
For more information refer to the official renative [documentation](https://next.renative.org) and [github repository](https://github.com/flexn-io/renative).
console.log('received message from watch', message);
49
+
});
70
50
```
71
51
72
-
or
52
+
# How to run the example
73
53
74
-
```sh
75
-
npm install react-native-wear-connectivity
76
-
```
54
+
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 mobile app following this instructions.
77
55
78
-
This is a detailed explanation on how to create a WearOS app using react-native:
56
+
### How to run the React Native Mobile App example
79
57
80
-
- Create a new react-native app using the same name as your Mobile app.
81
-
It is important to use the same name because both apps need to share the same package name (AndroidManifest, build.gradle, the project files) and applicationId (build.gradle).
58
+
You need to clone the `react-native-wear-connectivity` project, build and run the mobile app example.
82
59
83
-
```sh
84
-
npx react-native@latest init YourMobileAppName
85
60
```
86
-
87
-
- Add the following line to the new project AndroidManifest (file ):
88
-
89
-
```xml
90
-
<!-- this file is located at android/app/src/main/AndroidManifest.xml -->
- Create a new emulator of type [WearOS Large round][22].
95
-
- Pair the Android emulator with the Wear OS emulator. Follow this [instructions][21].
96
-
- Start the metro server on port 8082 with `yarn start --port=8082`
97
-
- Build the project with `yarn android`, open the [react native dev menu][23] and change the bundle location to `your-ip:8082` (for ex. `192.168.18.2:8082`).
98
-
- Repeat the same steps for the Android Phone Emulator and use a different port (for ex. 8081).
99
-
-**Important Note**: Before publishing to Google Play, make sure that both apps are signed using the same key (instructions [here][20])
69
+
### How to run the Jetpack Compose WearOS example
100
70
101
-
You can now build the app with `yarn android`. JS fast-refresh and the other metro functionalities work without problem.
71
+
1) Clone the WearOS Jetpack Compose [example](https://github.com/fabOnReact/wearos-communication-with-rn)
2) 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&X-Amz-Credential=AKIAVCODYLSA53PQK4ZA%2F20250125%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20250125T110158Z&X-Amz-Expires=300&X-Amz-Signature=4bd2be95943124fe34fb13e6a54e9a2fe8a9c06d1eb8afdf005ce02cf43c90d1&X-Amz-SignedHeaders=host).
76
+
3) 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).
102
77
103
-
You can find the instructions on how to build the example app for this project in the [CONTRIBUTING][43] section.
[22]: https://gist.github.com/assets/24992535/f6cb9f84-dc50-492b-963d-6d9e9396f451'wear os large round'
109
-
[23]: https://reactnative.dev/docs/debugging
80
+
### Both apps share the same package name and applicationId
110
81
111
-
## Example of implementation
82
+
Generate 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.
112
83
113
-
Example implementation of the above counter application for WearOS and Android Mobile.
Make sure both apps use the same signing key. You can verify it as follows:
119
87
120
-
functionApp() {
121
-
return<CounterScreen />;
122
-
}
88
+
**Jetpack Compose App WearOS app** (no react-native)
89
+
- 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.
90
+
- 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.
123
91
124
-
functionCounterScreen() {
125
-
const [count, setCount] =useState(0);
92
+
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.
- 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.
131
96
132
-
return () => {
133
-
unsubscribe();
134
-
};
135
-
}, []);
97
+
### How to implement the Jetpack Compose WearOS app
136
98
137
-
constonSuccess= (result) =>console.log(result);
138
-
constonError= (error) =>console.log(error);
99
+
**Sending messages from Jetpack Compose WearOS to React Native Mobile Device**
139
100
140
-
constsendMessageToWear= () => {
141
-
constjson= { text:'hello' };
142
-
sendMessage(json, onSuccess, onError);
143
-
};
101
+
[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.
<Text style={styles.count}>The count is {count}</Text>
149
-
</View>
150
-
);
103
+
```kotlin
104
+
funsendMessageToClient(node:Node) {
105
+
val jsonObject =JSONObject().apply {
106
+
put("event", "message")
107
+
put("text", "hello")
108
+
}
109
+
try {
110
+
val sendTask =Wearable.getMessageClient(applicationContext).sendMessage(
111
+
node.getId(), jsonObject.toString(), null
112
+
)
113
+
} catch (e:Exception) {
114
+
Log.w("WearOS: ", "e $e")
115
+
}
151
116
}
152
-
153
-
conststyles=StyleSheet.create({
154
-
container: {
155
-
flex:1,
156
-
alignItems:'center',
157
-
justifyContent:'center',
158
-
backgroundColor:'#FDFDFD',
159
-
},
160
-
count: {
161
-
borderRadius:3,
162
-
padding:5,
163
-
backgroundColor:'#9C9A9D',
164
-
textAlign:'center',
165
-
textAlignVertical:'center',
166
-
marginTop:20,
167
-
color:'white',
168
-
fontSize:20,
169
-
fontWeight:'500',
170
-
},
171
-
});
172
-
173
-
exportdefaultApp;
174
117
```
175
118
176
-
## API Documentation
119
+
The WearOS `sendMessageToClient` function retrieves the devices connected via bluetooth to the WearOS device, and sends a JSON payload to those devices.
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](https://github.com/fabOnReact/react-native-wear-connectivity/blob/2f936622422e197c22bef228b44eb24b46c878ae/example/src/CounterScreen/index.android.tsx#L14-L16).
console.log('received message from watch', message);
193
-
});
138
+
139
+
return () => {
140
+
unsubscribe();
141
+
};
142
+
}, []);
194
143
```
195
144
196
145
## FAQ on Troubleshooting Errors
@@ -217,6 +166,14 @@ Logcat (wearOS) shows the following log message when sending messages via blueto
217
166
Pixel_8_Pro_API_35Device is too far for bluetooth connection.
218
167
```
219
168
169
+
#### Failed to deliver message to AppKey
170
+
171
+
Logcat 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](url)).
172
+
173
+
```
174
+
Failed to deliver message to AppKey
175
+
```
176
+
220
177
## Contributing
221
178
222
179
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
0 commit comments