Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions docs/contributing.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
# Contributing

Thanks for your interest in contributing! Please read the [root CONTRIBUTING guide](../CONTRIBUTING.md) for full details.

## Development workflow

1. Fork and clone the repository.
2. Install dependencies with `yarn`.
3. Run `yarn lint`, `yarn test`, and `yarn typecheck` before submitting.
4. Open a pull request with a clear description of your changes.
21 changes: 21 additions & 0 deletions docs/setup-watchos.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
# watchOS setup

These steps show how to link a React Native app with an Apple Watch companion using [`react-native-watch-connectivity`](https://github.com/mtford90/react-native-watch-connectivity).

1. **Install the library**

```sh
yarn add react-native-watch-connectivity
```

2. **Create a watch target**

In Xcode add a watchOS app or extension to your project and enable Watch Connectivity in the capabilities tab.

3. **Pair the devices**

Use the iOS Simulator with a paired watch or a physical iPhone and Apple Watch.

4. **Run the apps**

Build the iOS app and watch extension. Use the snippet in `examples/ios-message.ts` to send a test message between the devices.
38 changes: 38 additions & 0 deletions docs/setup-wearos.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
# WearOS setup

Follow these steps to connect a React Native app with a WearOS companion.

1. **Install the library**

```sh
yarn add react-native-wear-connectivity
```

2. **Update `AndroidManifest.xml`**

Add the required permissions and service to `android/app/src/main/AndroidManifest.xml`.

```xml
<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" />

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

3. **Pair the devices**

Install the Google Play Wear app on the Android phone and pair it with the WearOS emulator or device.

4. **Run the apps**

Start the Metro server, run the mobile app, and launch the WearOS companion. Use the snippet in `examples/android-message.ts` to verify the connection.
15 changes: 15 additions & 0 deletions docs/troubleshooting.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# Troubleshooting

Common issues when connecting mobile and wearable apps.

## Wearable app not installed on mobile device

The mobile device must have the Google Play Wear app installed to pair with the WearOS device.

## WearOS device too far for Bluetooth connection

Logcat may show `Device is too far for bluetooth connection` when the watch is out of range of the phone.

## Failed to deliver message to AppKey

Ensure the WearOS and mobile apps share the same package name, application ID, and signing key. Messages cannot be delivered if these values differ.
8 changes: 8 additions & 0 deletions examples/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
# Platform connector examples

This folder contains minimal code snippets for each supported platform.

- `android-message.ts` demonstrates sending and receiving a message with the WearOS connector.
- `ios-message.ts` demonstrates sending and receiving a message with the watchOS connector using [`react-native-watch-connectivity`](https://github.com/mtford90/react-native-watch-connectivity).

Each snippet can be pasted into a React Native project after following the setup guides in the [`docs/`](../docs) directory.
13 changes: 13 additions & 0 deletions examples/android-message.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { sendMessage, watchEvents } from 'react-native-wear-connectivity';

// Send a message to the WearOS device
sendMessage({ text: 'Hello watch!' }, (reply) => {
console.log('Reply from watch:', reply);
});

// Listen for messages from the WearOS device
const unsubscribe = watchEvents.on('message', (message) => {
console.log('Received message from watch', message);
});

// Call unsubscribe() when no longer needed
14 changes: 14 additions & 0 deletions examples/ios-message.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { sendMessage, watchEvents } from 'react-native-watch-connectivity';

// Send a message to the Apple Watch
sendMessage({ text: 'Hello watch!' }, (reply) => {
console.log('Reply from watch:', reply);
});

// Listen for messages from the Apple Watch
const unsubscribe = watchEvents.on('message', (message, reply) => {
console.log('Received message from watch', message);
reply({ text: 'Thanks watch!' });
});

// Call unsubscribe() when no longer needed
3 changes: 2 additions & 1 deletion tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,5 +24,6 @@
"strict": true,
"target": "esnext",
"verbatimModuleSyntax": true
}
},
"exclude": ["node_modules", "examples"]
Comment on lines 24 to +28

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[P1] Exclude new examples from TypeScript build

Adding "exclude": ["node_modules", "examples"] here only affects tsc --noEmit, because tsconfig.build.json defines its own exclude array and overrides this change. When yarn prepare (bob build) runs, the TypeScript project referenced in tsconfig.build.json still compiles the new files in examples/, which fail with missing modules and unused variables, causing the build to stop. To avoid blocking yarn prepare/publishing, tsconfig.build.json also needs to exclude the examples folder.

Useful? React with 👍 / 👎.

}