Skip to content

Commit 318c632

Browse files
authored
Renative support (#30)
1 parent 2217f76 commit 318c632

File tree

1 file changed

+80
-36
lines changed

1 file changed

+80
-36
lines changed

README.md

Lines changed: 80 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,58 @@ https://github.com/fabOnReact/react-native-wear-connectivity/assets/24992535/415
1313

1414
# Table of Contents
1515

16-
- [Installation](#installation)
16+
- [Installation with renative](#installation-with-renative)
17+
- [Installation with react-native](#installation-with-react-native)
1718
- [Example of implementation](#example-of-implementation)
18-
- [How to create a WearOS app using react-native](#how-to-create-a-wearos-app-using-react-native)
1919
- [API Documentation](#api-documentation)
2020
- [FAQ on Troubleshooting Errors](#faq-on-troubleshooting-errors)
2121
- [Contributing](#contributing)
2222

23-
## Installation
23+
## Installation with renative
24+
25+
The app generated with this implementation is available [here](https://github.com/fabOnReact/react-native-wear-connectivity-renative-example).
26+
27+
Create a new renative app for android and wearos:
28+
29+
```sh
30+
npx rnv new
31+
```
32+
33+
Change folder to the newly created app and run yarn install:
34+
35+
```sh
36+
cd YourFolder
37+
yarn install
38+
```
39+
40+
Run the app on the Android Emulator:
41+
42+
```sh
43+
yarn rnv run -p android
44+
```
45+
46+
Run the app on the WearOS Emulator:
47+
48+
```sh
49+
yarn rnv run -p androidwear
50+
```
51+
52+
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):
53+
54+
```json
55+
"plugins": {
56+
"react-native-wear-connectivity": {
57+
"version": "^0.1.9"
58+
}
59+
}
60+
```
61+
62+
- Pair the Android emulator with the Wear OS emulator ([instructions][21]).
63+
- 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).
64+
65+
For more information refer to the official renative [documentation](https://next.renative.org) and [github repository](https://github.com/flexn-io/renative).
66+
67+
## Installation with React Native
2468

2569
```sh
2670
yarn add react-native-wear-connectivity
@@ -32,6 +76,39 @@ or
3276
npm install react-native-wear-connectivity
3377
```
3478

79+
This is a detailed explanation on how to create a WearOS app using react-native:
80+
81+
- Create a new react-native app using the same name as your Mobile app.
82+
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).
83+
84+
```sh
85+
npx react-native@latest init YourMobileAppName
86+
```
87+
88+
- Add the following line to the new project AndroidManifest (file ):
89+
90+
```xml
91+
<!-- this file is located at android/app/src/main/AndroidManifest.xml -->
92+
<uses-feature android:name="android.hardware.type.watch" />
93+
```
94+
95+
- Create a new emulator of type [WearOS Large round][22].
96+
- Pair the Android emulator with the Wear OS emulator. Follow this [instructions][21].
97+
- Start the metro server on port 8082 with `yarn start --port=8082`
98+
- 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`).
99+
- Repeat the same steps for the Android Phone Emulator and use a different port (for ex. 8081).
100+
- **Important Note**: Before publishing to Google Play, make sure that both apps are signed using the same key (instructions [here][20])
101+
102+
You can now build the app with `yarn android`. JS fast-refresh and the other metro functionalities work without problem.
103+
104+
You can find the instructions on how to build the example app for this project in the [CONTRIBUTING][43] section.
105+
106+
[43]: https://github.com/fabOnReact/react-native-wear-connectivity/blob/main/CONTRIBUTING.md
107+
[20]: https://reactnative.dev/docs/next/signed-apk-android
108+
[21]: https://developer.android.com/training/wearables/get-started/connect-phone
109+
[22]: https://gist.github.com/assets/24992535/f6cb9f84-dc50-492b-963d-6d9e9396f451 'wear os large round'
110+
[23]: https://reactnative.dev/docs/debugging
111+
35112
## Example of implementation
36113

37114
Example implementation of the above counter application for WearOS and Android Mobile.
@@ -97,39 +174,6 @@ const styles = StyleSheet.create({
97174
export default App;
98175
```
99176

100-
## How to create a WearOS app using react-native
101-
102-
- Create a new react-native app using the same name as your Mobile app.
103-
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).
104-
105-
```sh
106-
npx react-native@latest init YourMobileAppName
107-
```
108-
109-
- Add the following line to the new project AndroidManifest (file ):
110-
111-
```xml
112-
<!-- this file is located at android/app/src/main/AndroidManifest.xml -->
113-
<uses-feature android:name="android.hardware.type.watch" />
114-
```
115-
116-
- Create a new emulator of type [WearOS Large round][22].
117-
- Pair the Android emulator with the Wear OS emulator. Follow this [instructions][21].
118-
- Start the metro server on port 8082 with `yarn start --port=8082`
119-
- 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`).
120-
- Repeat the same steps for the Android Phone Emulator and use a different port (for ex. 8081).
121-
- **Important Note**: Before publishing to Google Play, make sure that both apps are signed using the same key (instructions [here][20])
122-
123-
You can now build the app with `yarn android`. JS fast-refresh and the other metro functionalities work without problem.
124-
125-
You can find the instructions on how to build the example app for this project in the [CONTRIBUTING][43] section.
126-
127-
[43]: https://github.com/fabOnReact/react-native-wear-connectivity/blob/main/CONTRIBUTING.md
128-
[20]: https://reactnative.dev/docs/next/signed-apk-android
129-
[21]: https://developer.android.com/training/wearables/get-started/connect-phone
130-
[22]: https://gist.github.com/assets/24992535/f6cb9f84-dc50-492b-963d-6d9e9396f451 'wear os large round'
131-
[23]: https://reactnative.dev/docs/debugging
132-
133177
## API Documentation
134178

135179
### Send Messages

0 commit comments

Comments
 (0)