share extension not loading...

[export-mike]

i'm finding the app opens but the extension just hangs...

but when the metro bundler has been closed it opens the view controller - seems like it could be a metro thing?

https://github.com/MaxAst/expo-share-extension/assets/2983327/cfe44349-dd45-4d30-a0d0-059b2f29ccb7

i'm finding the app opens but the extension just hangs...

but when the metro bundler has been closed it opens the view controller - seems like it could be a metro thing?

Related Files

app.json

...
"plugins": ["expo-router", ["expo-share-extension", {
        "height": "500",
        "backgroundColor": {
          "red": 255,
          "green": 255,
          "blue": 255,
          "alpha": 1 
        }
      }]],
  ...

babel.config.js

process.env.TAMAGUI_TARGET = "native";

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      // Required for expo-router
      "expo-router/babel",
      "react-native-reanimated/plugin",
      [
        "@tamagui/babel-plugin",
        {
          components: ["tamagui"],
          config: "./tamagui.config.ts",
        },
      ],
    ],
  };
};

package.json

{
  "name": "myapp",
  "main": "index.js",
  "version": "1.0.0",
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@apollo/client": "^3.8.1",
    "@babel/core": "^7.20.0",
    "@bacons/xcode": "^1.0.0-alpha.5",
    "@expo/vector-icons": "^14.0.0",
    "@react-native-async-storage/async-storage": "1.21.0",
    "@react-navigation/native": "^6.0.2",
    "@shopify/flash-list": "1.6.3",
    "@tamagui/animations-react-native": "^1.91.1",
    "@tamagui/babel-plugin": "^1.91.1",
    "@tamagui/config": "^1.91.1",
    "@tamagui/font-inter": "^1.91.1",
    "@tamagui/theme-base": "^1.91.1",
    "@types/glob": "^8.1.0",
    "expo": "^50.0.14",
    "expo-font": "~11.10.3",
    "expo-haptics": "~12.8.1",
    "expo-linking": "~6.2.2",
    "expo-router": "~3.4.8",
    "expo-secure-store": "^12.3.1",
    "expo-share-extension": "^1.4.0",
    "expo-splash-screen": "~0.26.4",
    "expo-status-bar": "~1.11.1",
    "expo-system-ui": "~2.9.3",
    "expo-updates": "~0.24.12",
    "expo-web-browser": "~12.8.2",
    "glob": "^10.2.6",
    "graphql": "^16.8.0",
    "jwt-decode": "^3.1.2",
    "react": "18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.47.0",
    "react-native": "0.73.6",
    "react-native-gesture-handler": "~2.14.0",
    "react-native-reanimated": "~3.6.2",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "~3.29.0",
    "react-native-svg": "14.1.0",
    "react-native-swiper": "^1.6.0",
    "react-native-web": "^0.19.8",
    "tamagui": "^1.91.1",
    "ts-node": "^10.9.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@graphql-codegen/cli": "^5.0.0",
    "@graphql-codegen/client-preset": "^4.1.0",
    "@graphql-typed-document-node/core": "^3.2.0",
    "@types/react": "~18.2.45",
    "dotenv": "^16.3.1",
    "husky": "^8.0.3",
    "jest": "^29.2.1",
    "jest-expo": "~50.0.4",
    "lint-staged": "^14.0.1",
    "prettier": "3.0.3",
    "react-test-renderer": "18.2.0",
    "typescript": "^5.3.0"
  },
  "overrides": {
    "react-refresh": "~0.14.0"
  },
  "resolutions": {
    "react-refresh": "~0.14.0"
  },
  "private": true,
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}

index.share.js

import { AppRegistry } from "react-native";

// could be any component you want to use as the root component of your share extension's bundle
import ShareExtension from "./ShareExtension";

// IMPORTANT: the first argument to registerComponent, must be "shareExtension"
AppRegistry.registerComponent("shareExtension", () => ShareExtension);

index.js

import "expo-router/entry";

ShareExtension.tsx

import { close } from "expo-share-extension"
import { Button, Text, View } from "react-native";

// if ShareExtension is your root component, url is available as an initial prop
export default function ShareExtension({ url }: { url: string }) {
  return (
    <View style={{ flex: 1 }}>
      <Text>{url}</Text>
      <Button title="Close" onPress={close} />
    </View>
  );
}

metro.config.js

process.env.TAMAGUI_TARGET = "native";

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require("expo/metro-config");

/**
 * Add support for share.js as a recognized extension to the Metro config.
 * This allows creating an index.share.js entry point for our iOS share extension
 *
 * @param {import('expo/metro-config').MetroConfig} config
 * @returns {import('expo/metro-config').MetroConfig}
 */
function withShareExtension(config) {
  config.transformer.getTransformOptions = () => ({
    resolver: {
      sourceExts: [...config.resolver.sourceExts, "share.js"], // Add 'share.js' as a recognized extension
    },
  });
  return config;
}

config = withShareExtension(getDefaultConfig(__dirname), {
  // [Web-only]: Enables CSS support in Metro.
  isCSSEnabled: true,
});

// config.resolver.sourceExts.push("mjs"); // maybe?

module.exports = config;

yarn expo prebuild --clean && yarn expo run:ios

[MaxAst]

Hi Mike, thanks for taking the time to open an issue! I just tried your setup on my machine and you can fix it by adding expo-updates to the excludedPackages array in the expo-share-extension's options:

    [
      "expo-share-extension",
      {
        excludedPackages: [
          "expo-updates"
        ],
        height: 600,
        backgroundColor: {
          red: 255,
          green: 255,
          blue: 255,
          alpha: 0,
        },
      },
    ],

I'll add a fix soon so that this is excluded automatically, but for the time being you can fix it like this

[export-mike]

wow thanks for the prompt response, ill give this a go!

i'll be using this library heavily - moving away from a swift ui view so will help to contribute back to it 😊

[MaxAst]

Sounds great! Looking forward to collaborating!