add kitchen sink example

examples/kitchen-sink/App.tsx

@@ -0,0 +1,33 @@
+import { StyleSheet, Text, View } from "react-native";
+
+export default function App() {
+  return (
+    <View style={styles.container}>
+      <Text
+        style={{ fontFamily: "Inter-Black", fontSize: 24, marginBottom: 10 }}
+      >
+        Kitchen Sink Example
+      </Text>
+      <Text
+        style={{
+          textAlign: "center",
+          color: "#313639",
+          fontSize: 16,
+        }}
+      >
+        Go to Safari and open the share menu to trigger this app's share
+        extension.
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#FAF8F5",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 30,
+  },
+});

examples/kitchen-sink/README.md

@@ -0,0 +1,38 @@
+# Basic Example
+
+This example demonstrates the `backgroundColor` and `height` options that you can provide in app.json to customize the look of the native view. It'd be configured in app.json like so:
+
+```json
+[
+  "expo-share-extension",
+  {
+    "backgroundColor": {
+      "red": 255,
+      "green": 255,
+      "blue": 255,
+      "alpha": 0 // make the background transparent
+    },
+    "height": 500
+  }
+]
+```
+
+## Usage
+
+1. Run Prebuild
+
+```bash
+npm run prebuild
+```
+
+2. Start the app via Expo CLI
+
+```bash
+npm run ios
+```
+
+3. or only start the metro server and build via XCode
+
+```bash
+npm run start
+```

examples/kitchen-sink/ShareExtension.tsx

@@ -0,0 +1,49 @@
+import { close, type InitialProps } from "expo-share-extension";
+import { Button, StyleSheet, Text, View } from "react-native";
+
+export default function ShareExtension({ url, text }: InitialProps) {
+  return (
+    <View style={styles.container}>
+      <Text
+        style={{ fontFamily: "Inter-Black", fontSize: 24, marginBottom: 10 }}
+      >
+        Kitchen Sink Example
+      </Text>
+      {url && (
+        <Text
+          style={{
+            textAlign: "center",
+            color: "#313639",
+            fontSize: 16,
+          }}
+        >
+          <Text style={{ fontWeight: "bold" }}>URL:</Text> {url}
+        </Text>
+      )}
+      {text && (
+        <Text
+          style={{
+            textAlign: "center",
+            color: "#313639",
+            fontSize: 16,
+          }}
+        >
+          <Text style={{ fontWeight: "bold" }}>Text:</Text> {text}
+        </Text>
+      )}
+      <Button title="Close" onPress={close} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    borderRadius: 20,
+    backgroundColor: "#FAF8F5",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 30,
+    gap: 10,
+  },
+});

examples/kitchen-sink/app.json

@@ -0,0 +1,98 @@
+{
+  "expo": {
+    "name": "kitchen-sink",
+    "slug": "kitchen-sink",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "expo.modules.shareextension.basic"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "expo.modules.shareextension.basic"
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    },
+    "plugins": [
+      [
+        "expo-font",
+        {
+          "fonts": [
+            "./assets/fonts/Inter-Black.otf"
+          ]
+        }
+      ],
+      [
+        "../../app.plugin.js",
+        {
+          "backgroundColor": {
+            "red": 255,
+            "green": 255,
+            "blue": 255,
+            "alpha": 0
+          },
+          "height": 500,
+          "activationRules": [
+            {
+              "type": "file",
+              "max": 3
+            },
+            {
+              "type": "image",
+              "max": 2
+            },
+            {
+              "type": "video",
+              "max": 1
+            },
+            {
+              "type": "text"
+            },
+            {
+              "type": "url",
+              "max": 1
+            }
+          ]
+        }
+      ]
+    ],
+    "extra": {
+      "eas": {
+        "build": {
+          "experimental": {
+            "ios": {
+              "appExtensions": [
+                {
+                  "targetName": "kitchensinkShareExtension",
+                  "bundleIdentifier": "expo.modules.shareextension.basic.ShareExtension",
+                  "entitlements": {
+                    "com.apple.security.application-groups": [
+                      "group.expo.modules.shareextension.basic"
+                    ]
+                  }
+                }
+              ]
+            }
+          }
+        },
+        "projectId": "ea35a029-08d5-41e5-b4e6-e31218c295fe"
+      },
+      "appleApplicationGroup": "group.expo.modules.shareextension.basic"
+    }
+  }
+}

examples/kitchen-sink/babel.config.js

@@ -0,0 +1,25 @@
+const path = require("path");
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo"],
+    plugins: [
+      [
+        "module-resolver",
+        {
+          extensions: [".tsx", ".ts", ".js", ".json"],
+          alias: {
+            // For development, we want to alias the library to the source
+            "expo-share-extension": path.join(
+              __dirname,
+              "..",
+              "..",
+              "src",
+              "index.ts"
+            ),
+          },
+        },
+      ],
+    ],
+  };
+};

examples/kitchen-sink/eas.json

@@ -0,0 +1,19 @@
+{
+  "cli": {
+    "version": ">= 5.3.0",
+    "promptToConfigurePushNotifications": false
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal"
+    },
+    "production": {}
+  },
+  "submit": {
+    "production": {}
+  }
+}

examples/kitchen-sink/index.js

@@ -0,0 +1,5 @@
+import { registerRootComponent } from "expo";
+
+import App from "./App";
+
+registerRootComponent(App);

examples/kitchen-sink/index.share.js

@@ -0,0 +1,5 @@
+import { AppRegistry } from "react-native";
+
+import ShareExtension from "./ShareExtension";
+
+AppRegistry.registerComponent("shareExtension", () => ShareExtension);

examples/kitchen-sink/metro.config.js

@@ -0,0 +1,28 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+const { getDefaultConfig } = require("expo/metro-config");
+const path = require("path");
+
+const config = getDefaultConfig(__dirname);
+
+// npm v7+ will install ../node_modules/react-native because of peerDependencies.
+// To prevent the incompatible react-native bewtween ./node_modules/react-native and ../node_modules/react-native,
+// excludes the one from the parent folder when bundling.
+config.resolver.blockList = [
+  ...Array.from(config.resolver.blockList ?? []),
+  new RegExp(path.resolve("..", "..", "node_modules", "react-native")),
+];
+
+config.resolver.nodeModulesPaths = [
+  path.resolve(__dirname, "./node_modules"),
+  path.resolve(__dirname, "../../node_modules"),
+];
+
+config.watchFolders = [path.resolve(__dirname, "../..")];
+
+config.transformer.getTransformOptions = () => ({
+  resolver: {
+    sourceExts: [...config.resolver.sourceExts, "share.js"], // Add 'share.js' as a recognized extension
+  },
+});
+
+module.exports = config;