From 318c6325fc55afd816efc542eef6bec47527c845 Mon Sep 17 00:00:00 2001 From: Fabrizio Bertoglio Date: Sun, 11 Aug 2024 08:59:56 +0800 Subject: [PATCH] Renative support (#30) --- README.md | 116 +++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 80 insertions(+), 36 deletions(-) diff --git a/README.md b/README.md index 69086bc..6ec47f7 100644 --- a/README.md +++ b/README.md @@ -13,14 +13,58 @@ https://github.com/fabOnReact/react-native-wear-connectivity/assets/24992535/415 # Table of Contents -- [Installation](#installation) +- [Installation with renative](#installation-with-renative) +- [Installation with react-native](#installation-with-react-native) - [Example of implementation](#example-of-implementation) -- [How to create a WearOS app using react-native](#how-to-create-a-wearos-app-using-react-native) - [API Documentation](#api-documentation) - [FAQ on Troubleshooting Errors](#faq-on-troubleshooting-errors) - [Contributing](#contributing) -## Installation +## Installation with renative + +The app generated with this implementation is available [here](https://github.com/fabOnReact/react-native-wear-connectivity-renative-example). + +Create a new renative app for android and wearos: + +```sh +npx rnv new +``` + +Change folder to the newly created app and run yarn install: + +```sh +cd YourFolder +yarn install +``` + +Run the app on the Android Emulator: + +```sh +yarn rnv run -p android +``` + +Run the app on the WearOS Emulator: + +```sh +yarn rnv run -p androidwear +``` + +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): + +```json +"plugins": { + "react-native-wear-connectivity": { + "version": "^0.1.9" + } +} +``` + +- Pair the Android emulator with the Wear OS emulator ([instructions][21]). +- 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). + +For more information refer to the official renative [documentation](https://next.renative.org) and [github repository](https://github.com/flexn-io/renative). + +## Installation with React Native ```sh yarn add react-native-wear-connectivity @@ -32,6 +76,39 @@ or npm install react-native-wear-connectivity ``` +This is a detailed explanation on how to create a WearOS app using react-native: + +- Create a new react-native app using the same name as your Mobile app. + 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). + +```sh +npx react-native@latest init YourMobileAppName +``` + +- Add the following line to the new project AndroidManifest (file ): + +```xml + + +``` + +- Create a new emulator of type [WearOS Large round][22]. +- Pair the Android emulator with the Wear OS emulator. Follow this [instructions][21]. +- Start the metro server on port 8082 with `yarn start --port=8082` +- 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`). +- Repeat the same steps for the Android Phone Emulator and use a different port (for ex. 8081). +- **Important Note**: Before publishing to Google Play, make sure that both apps are signed using the same key (instructions [here][20]) + +You can now build the app with `yarn android`. JS fast-refresh and the other metro functionalities work without problem. + +You can find the instructions on how to build the example app for this project in the [CONTRIBUTING][43] section. + +[43]: https://github.com/fabOnReact/react-native-wear-connectivity/blob/main/CONTRIBUTING.md +[20]: https://reactnative.dev/docs/next/signed-apk-android +[21]: https://developer.android.com/training/wearables/get-started/connect-phone +[22]: https://gist.github.com/assets/24992535/f6cb9f84-dc50-492b-963d-6d9e9396f451 'wear os large round' +[23]: https://reactnative.dev/docs/debugging + ## Example of implementation Example implementation of the above counter application for WearOS and Android Mobile. @@ -97,39 +174,6 @@ const styles = StyleSheet.create({ export default App; ``` -## How to create a WearOS app using react-native - -- Create a new react-native app using the same name as your Mobile app. - 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). - -```sh -npx react-native@latest init YourMobileAppName -``` - -- Add the following line to the new project AndroidManifest (file ): - -```xml - - -``` - -- Create a new emulator of type [WearOS Large round][22]. -- Pair the Android emulator with the Wear OS emulator. Follow this [instructions][21]. -- Start the metro server on port 8082 with `yarn start --port=8082` -- 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`). -- Repeat the same steps for the Android Phone Emulator and use a different port (for ex. 8081). -- **Important Note**: Before publishing to Google Play, make sure that both apps are signed using the same key (instructions [here][20]) - -You can now build the app with `yarn android`. JS fast-refresh and the other metro functionalities work without problem. - -You can find the instructions on how to build the example app for this project in the [CONTRIBUTING][43] section. - -[43]: https://github.com/fabOnReact/react-native-wear-connectivity/blob/main/CONTRIBUTING.md -[20]: https://reactnative.dev/docs/next/signed-apk-android -[21]: https://developer.android.com/training/wearables/get-started/connect-phone -[22]: https://gist.github.com/assets/24992535/f6cb9f84-dc50-492b-963d-6d9e9396f451 'wear os large round' -[23]: https://reactnative.dev/docs/debugging - ## API Documentation ### Send Messages