expo-open-with-file

expo-open-with-file

Allow users to open your expo iOS / Android app when selecting files in other apps.

Install

npx expo install expo-open-with-file

Basic setup

Add plugin in app.json, and run expo prebuild

{
  "plugins": [
    [
      "expo-open-with-file",
      {
        "types": [
          {
            "extension": "dlc"
          }
        ]
      }
    ]
  ]
}

Usage

To access the file, use useOpenWithFile. This will give you some file info (if available, like size, uri...) and the contents of the file in Base64.

export  default  function  App() {
    const { file } =  useOpenWithFile({ resetOnBackground:  true });

    useEffect(() => {
        if (file) {
	    console.log('Info', JSON.stringify(file.info));
	    console.log('Base64', JSON.stringify(file.base64));
	}
    }, [file]);

    return (
	<View  style={{ flex:  1, alignItems:  'center', justifyContent:  'center' }}>
	    <Text>File: {file?.info.uri || 'none'}</Text>
	</View>
    );
}

Optional configurations

You can provide extra properties for iOS to support opening documents in place. This will use the native module for requesting access to read the file.

{
  "plugins": [
    [
      "expo-open-with-file",
      {
        "types": [
          {
            "extension": "dlc"
          }
        ],
        "custom": {
          "ios": {
	     "supportsDocumentBrowser": true,
	     "supportsFileSharingEnabled": true,
  	     "supportsOpeningDocumentsInPlace": true,
          }
        }
      }
    ]
  ]
}

Prop	Default	Docs
supportsDocumentBrowser	false	# UISupportsDocumentBrowser
supportsFileSharingEnabled	false	# UIFileSharingEnabled
supportsOpeningDocumentsInPlace	false	# LSSupportsOpeningDocumentsInPlace

File type configurations

The plugin uses a default configuration to make set up easy. Lots of properties are configurable so you can customise for your use case.

{
  "plugins": [
    [
      "expo-open-with-file",
      {
        "types": [
          {
            "extension": "dlc",
            "custom": {
              "ios": {
                "typeConformsTo": [
                  "public.data",
                  "public.item"
                ],
                "typeDescription": "DLC",
                "typeIdentifier": "com.example.dlc",
                "bundleTypeRole": "Editor",
                "handlerRank": "Owner"
              },
              "android": {
                "actions": [
                  "VIEW",
                  "EDIT"
                ],
                "categories": [
                  "BROWSABLE",
                  "DEFAULT"
                ],
                "mimeTypes": [
                  "application/dlc",
                  "application/octet-stream"
                ],
                "schemes": [
                  "file",
                  "content"
                ],
                "hosts": [],
                "pathPatterns": [
                  ".*\\\\.dlc",
                  ".*\\\\..*\\\\.dlc",
                  ".*\\\\..*\\\\..*\\\\.dlc"
                ]
              }
            }
          }
        ]
      }
    ]
  ]
}

iOS custom props

Prop	Default	Maps to
typeConformsTo	public.data & public.item	UTTypeConformsTo
typeDescription	extension.toUpperCase()	UTTypeDescription
typeIdentifier	com.${config.name}.${extension}.toLowerCase()	UTTypeIdentifier
bundleTypeRole	Editor	CFBundleTypeRole
handlerRank	Owner	LSHandlerRank

Android custom props

Prop	Default	Maps to
actions	VIEW & EDIT	android.intent.action.${action}
categories	BROWSABLE & DEFAULT	android.intent.category.${category}
mimeTypes	application/${extension} & application/octet-stream	android:mimeType
schemes	file & content	android:scheme
hosts	Empty (none)	android:host
pathPatterns	.*\\\\.${extension} & .*\\\\..*\\\\.${extension} & .*\\\\..*\\\\..*\\\\.${extension}	android:pathPattern

Contributions

Please open a PR if you want to provide improvements / extra functionality! This is technically possible without the use of a custom plugin, but this is all about convenience and providing an out of the box solution. If you know how to make this better, please do.