Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(expo-plugin): add watch expo plugin #125

Open
wants to merge 11 commits into
base: master
Choose a base branch
from
4 changes: 4 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,3 +60,7 @@ and run `pod install`.
### Expo Support

This library has been successfully used in Expo apps (Bare Workflow with EAS Build).

## Generating watch target in expo prebuild

This library is available as a [prebuild](https://docs.expo.dev/workflow/prebuild/) for Expo apps. It will automatically generate a watch target for you. For more information about integration, see [expo-prebuild.MD](expo-prebuild.MD).
1 change: 1 addition & 0 deletions app.plugin.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = require('./plugin/build');
45 changes: 45 additions & 0 deletions expo-prebuild.MD
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
This library is available as a prebuild for Expo apps. To use it, add the following to your `app.json`:

```json
{
"expo": {
"plugins": [
"react-native-watch-connectivity",
{
"name": "watch",
"bundleId": "com.expo.watch.example",
"displayName": "EAS WATCH",
"sourceDir": "watch",
"deploymentTarget": "7.0"
}
]
}
}
```

Available options are:

- `name` (required) - the name of the watch app
- `bundleId` (required) - the bundle identifier of the companion iOS app (your main app)
- `displayName` (required) - the display name of the watch app
- `sourceDir` (required) - the directory where the watch files are located
- `deploymentTarget` (required) - the deployment target of the watch app

you can see a example integration [here](https://github.com/CristiCeban/watch-example).

Mainly, you will need a new folder with your watch app files.
`watch` folder should contain `Info.plist` (it also could be empty) like that:

```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
</dict>
</plist>
```

and `Assets.xcassets` folder with `AppIcon.appiconset`. Here you can change the icon for your watch app. (be sure to change it's name also in `Contents.json` file)
Note - icon should be 1024x1024px.

After that, you can run `expo prebuild` and it will generate a `ios/watch` folder with the watch app files.
44 changes: 28 additions & 16 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,17 @@
"name": "react-native-watch-connectivity",
"version": "1.1.0",
"description": "React Native library to enable communication with Apple Watch app",
"main": "dist/index.js",
"main": "build/index.js",
"files": [
"dist",
"plugin/build",
"build",
"ios",
"LICENSE.md",
"README.md",
"RNWatch.podspec"
"RNWatch.podspec",
"app.plugin.js"
],
"types": "dist/index.d.ts",
"types": "build/index.d.ts",
"license": "MIT",
"author": {
"name": "Michael Ford",
Expand All @@ -34,7 +36,13 @@
],
"homepage": "http://mtford.co.uk/react-native-watch-connectivity/",
"scripts": {
"build": "rm -rf dist && yarn tsc && cp ./lib/RNWatch.d.ts ./dist/RNWatch.d.ts && yarn lint ./dist/**/*.d.ts ./dist/**/*.js --fix --quiet",
"build": "mkdir -p ./build && cp ./lib/RNWatch.d.ts ./build/RNWatch.d.ts && expo-module build",
"post-build": "cp ./lib/RNWatch.d.ts ./build/RNWatch.d.ts",
"clean": "expo-module clean",
"test": "expo-module test",
"prepare": "expo-module prepare",
"prepublishOnly": "expo-module prepublishOnly",
"expo-module": "expo-module",
"lint": "eslint --ext .js,.jsx,.ts,.tsx",
"precommit": "tsc --skipLibCheck && lint-staged"
},
Expand Down Expand Up @@ -64,20 +72,24 @@
"lodash.sortby": "^4.7.0"
},
"devDependencies": {
"typescript": "^3.9.5",
"eslint-plugin-typescript-sort-keys": "^1.2.0",
"eslint": "^6.8.0",
"@types/react-native": "^0.62.2",
"@types/react": "^16.9.34",
"react-native": "^0.62.2",
"react": "16.11.0",
"@react-native-community/eslint-config": "^1.1.0",
"lint-staged": "^10.1.3",
"@tsconfig/node14": "^14.1.0",
"@types/lodash.sortby": "^4.7.6",
"@types/react": "^16.9.34",
"@types/react-native": "^0.62.2",
"@typescript-eslint/eslint-plugin": "^5.56.0",
"@typescript-eslint/parser": "^5.56.0",
"eslint": "^6.8.0",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-typescript-sort-keys": "^3.1.0",
"expo-module-scripts": "^3.4.0",
"husky": "^4.2.5",
"sort-package-json": "^1.41.0",
"lint-staged": "^10.1.3",
"prettier": "^2.0.4",
"eslint-plugin-prettier": "^3.1.3",
"@types/lodash.sortby": "^4.7.6"
"react": "16.11.0",
"react-native": "^0.62.2",
"sort-package-json": "^1.41.0",
"typescript": "^4.9.5"
},
"jest": {
"preset": "react-native"
Expand Down
1 change: 1 addition & 0 deletions plugin/jest.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
// module.exports = require('expo-module-scripts/jest-preset-plugin');
8 changes: 8 additions & 0 deletions plugin/src/@types/index.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export type IosExtensionTarget = {
bundleId: string;
deploymentTarget?: string;
displayName?: string;
frameworks?: string[];
name: string;
sourceDir: string;
};
Loading