@deltabreen/share-react-native

Share by DeltaBreen for React Native and Expo: a file request in your app. A button in your app's own look opens the form in a sheet. Your clients confirm their email and send you files without leaving the app, each file is encrypted on the phone before it leaves it, and your app hears when something was sent.

Before you start

1. In Share, under Requests, make a file request.
2. Copy its link. The part after the # is the key the files are encrypted to, so keep the whole link.

Nothing goes under Websites allowed to show it: the app opens the form as a page of its own, not inside a website.

Install

npx expo install @deltabreen/share-react-native react-native-webview   # an Expo app
npm install @deltabreen/share-react-native react-native-webview         # any other, then: npx pod-install

On iPhone, people can pick a photo or a file, or take a photo, and iOS closes an app that asks for the camera or the photo library without saying why. Add these two lines to Info.plist; in Expo, in app.json:

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSCameraUsageDescription": "Take a photo of a document to send it.",
        "NSPhotoLibraryUsageDescription": "Choose a photo of a document to send it."
      }
    }
  }
}

Android needs nothing more.

A button that opens the form

import { FileRequestButton } from '@deltabreen/share-react-native'

export function Documents() {
  return (
    <FileRequestButton
      link="https://share.deltabreen.eu/r/Xq3mT7vLp2Rk9sNd#the-end-of-your-link"
      title="Upload documents"
      style={({ pressed }) => ({ backgroundColor: pressed ? '#9a3412' : '#c2410c', borderRadius: 999 })}
      textStyle={{ fontSize: 17 }}
      closeOnSent="complete"
      onSent={({ complete }) => complete && console.log('All in')}
    />
  )
}

The sheet slides up with a heading and a Close button, which reads Done once something was sent. A swipe down on iPhone or Android's back closes it too.

| Option | What it does | |---|---| | link | The request's whole link, with the part after the #. Required. | | title | The button's words. Default "Send files". | | style, textStyle | The button's look, after Share's own. Each may be a function of { pressed }. | | children | What the button shows in place of its words, such as an icon and words. | | renderButton | A button of your own in place of ours: ({ open }) => <MyButton onPress={open} />. | | disabled, accessibilityLabel, buttonProps | As on Pressable; buttonProps takes anything else, like testID. | | heading | The sheet's heading. Default "Send files". | | closeText, doneText | The close button's words before and after a sending. Default "Close" and "Done". | | closeOnSent | true closes the sheet 1.5 seconds after a sending, 'complete' only once a request's list of what to send is all in. Default false. | | headerStyle, headingStyle, closeStyle, sheetStyle | The sheet's look. | | insets | The edges the sheet keeps clear, such as useSafeAreaInsets() gives. Default: below the status bar on Android; an iPhone's sheet does it by itself. | | modalProps | Anything else for React Native's Modal, such as presentationStyle: 'fullScreen'. | | onOpen, onClose | The sheet opened or closed. |

The sheet with your own button

import { useState } from 'react'
import { FileRequestSheet } from '@deltabreen/share-react-native'

const [open, setOpen] = useState(false)
// …
<MyButton onPress={() => setOpen(true)} />
<FileRequestSheet link={link} visible={open} onClose={() => setOpen(false)} />

The form on a screen of your own

import { FileRequestView } from '@deltabreen/share-react-native'

<FileRequestView link={link} style={{ flex: 1 }} />

It fills the space it is given and scrolls inside it. In a screen that scrolls, give it autoHeight and it takes the form's own height.

What every one of them takes

| Option | What it does | |---|---| | theme | auto (the phone's setting when the form opens, the default), light or dark. The form keeps the look it opened with, so a half-filled form is never loaded again. | | title | The form's name for screen readers. Default "File request". | | onReady() | The form is showing. | | onSent({ complete }) | Someone sent something; complete is true once a request's list of what to send is all in. | | onError({ reason }) | The form could not show: load (the page did not load) or slow (it loaded but the form did not appear within eight seconds). | | failedText, retryText, openText | The words shown then, with a button to try again and a link that opens the request in the phone's browser. | | renderFallback | Your own in their place: ({ reason, retry, openInBrowser }) => …. | | loadingColor, renderLoading | The spinner while the form loads, or your own. | | webViewProps | Anything else for the web view; its handlers still hear every event. |

Every word around the form has an English default; pass your own to show your app's language. The form itself wears your workspace's brand, from Share's Settings.

Privacy

Only you and your team can open what is sent: the form runs in the web view and encrypts each file before it leaves the phone, and all your app hears is that the form is ready, how tall it is and that something was sent. An app can read a web view it shows, though, so show the form in your own app. Links in the form, like Report abuse, open in the phone's browser.

If the form cannot open, the package tells Share so its support can see it: the request's id, the package's name and version, and why (it did not load, or did not say it was ready). Never the part of the link after the # and nothing anyone typed.

Keep the web view's defaults: JavaScript and storage on, cookies kept and its own user agent. The bot check on a request open to anyone needs them.

More

The full guide: https://share.deltabreen.eu/docs/website?ref=npm#app

MIT licence. Share by DeltaBreen: https://share.deltabreen.eu