@deltabreen/share-nativescript

Share by DeltaBreen for NativeScript: a file request in your app, in plain NativeScript, Angular, Vue, Svelte or React. A button styled by your own CSS 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

npm install @deltabreen/share-nativescript

It works with NativeScript 8.6 and later. On Android it adds androidx.webkit to your app, which keeps the form's messages to the form's own address.

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 to App_Resources/iOS/Info.plist, with the words iOS should show:

<key>NSCameraUsageDescription</key>
<string>Take a photo of a document to send it.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Choose a photo of a document to send it.</string>

Android needs nothing more.

A button that opens the form

<!-- Plain NativeScript -->
<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:share="@deltabreen/share-nativescript">
  <share:FileRequestButton link="https://share.deltabreen.eu/r/Xq3mT7vLp2Rk9sNd#the-end-of-your-link"
    text="Upload documents" class="upload" closeOnSent="complete" sent="{{ onSent }}" />
</Page>

/* app.css: any class or style of yours wins over Share's own colours. */
.upload { background-color: #c2410c; color: #fff; border-radius: 99; font-size: 17; }

In a framework, register it once, then use it as any other element:

// Angular, in main.ts; the component that shows it lists NO_ERRORS_SCHEMA in its schemas
import { registerElement } from '@nativescript/angular'
import { FileRequestButton } from '@deltabreen/share-nativescript'
registerElement('FileRequestButton', () => FileRequestButton)
// <FileRequestButton [link]="link" text="Upload documents" class="upload" (sent)="onSent($event)"></FileRequestButton>

// Vue, in app.js
import { registerElement } from 'nativescript-vue'
import { FileRequestButton } from '@deltabreen/share-nativescript'
registerElement('FileRequestButton', () => FileRequestButton)
// <FileRequestButton :link="link" text="Upload documents" class="upload" @sent="onSent" />

// Svelte Native, in app.ts
import { registerNativeViewElement } from 'svelte-native/dom'
import { FileRequestButton } from '@deltabreen/share-nativescript'
registerNativeViewElement('fileRequestButton', () => FileRequestButton)
// <fileRequestButton link={link} text="Upload documents" class="upload" on:sent={onSent} />

// React NativeScript
import { registerElement } from 'react-nativescript'
import { FileRequestButton } from '@deltabreen/share-nativescript'
registerElement('fileRequestButton', () => FileRequestButton)
// <fileRequestButton link={link} text="Upload documents" className="upload" onSent={onSent} />

The sheet is an iPhone's page sheet, or Android's whole screen, with a heading and a Close button that reads Done once something was sent. A swipe down on iPhone or Android's back closes it too.

| Property | What it does | |---|---| | link | The request's whole link, with the part after the #. Required. | | text | The button's words. Default "Send files". Style it as any Button: class, style, CSS. | | 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. | | theme | auto (the phone's setting when the form loads, the default), light or dark. |

| Event | When | |---|---| | open | The sheet opened. | | ready | The form is showing. | | sent | Someone sent something: detail.complete is true once a request's list of what to send is all in. | | failed | The form could not show: detail.reason is load or slow. | | close | The sheet closed: detail.sent and detail.complete. |

The sheet with your own button

import { showFileRequest } from '@deltabreen/share-nativescript'

export async function onTap(args) {
  const { sent, complete } = await showFileRequest(args.object, {
    link: 'https://share.deltabreen.eu/r/Xq3mT7vLp2Rk9sNd#the-end-of-your-link',
    heading: 'Your documents',
    headingStyle: { color: '#234b3a', fontSize: 18 },
    closeStyle: { color: '#234b3a' },
  })
}

headerStyle, headingStyle, closeStyle and sheetStyle take style values, after Share's own; onReady, onSent and onFailed are the events.

The form on a screen of your own

<share:FileRequestView link="{{ link }}" sent="{{ onSent }}" />

It fills the space the layout gives it and scrolls inside it, like a row of a GridLayout with *. In a screen that scrolls, give it autoHeight="true" and it takes the form's own height. A spinner shows while it loads. If it cannot open, for example with no connection, it offers another try and a link that opens the request in the phone's browser; failedText, retryText and openText are those words, and reload() and openInBrowser() do the same from code.

Every word around the form has an English default; set 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 phone's 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.

More

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

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