Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Basic React Native support #988

Merged
merged 59 commits into from Apr 17, 2019

Conversation

Projects
None yet
3 participants
@arturi
Copy link
Collaborator

commented Aug 6, 2018

How to run:

Switch to this PR, then:

cd examples/react-native-expo
yarn
yarn start

Then the browser tab will open, click “Run on iOS Simulator” or ”Android“, depending on which you have installed. You can also use your real device, scan the QR code with Expo app.

  • make Uppy run in React Native environment
  • make XHRUpload work in RN
  • make Tus work in RN
  • simple “select file” component

📲 React Native Extravaganza Summary ☎️

  • Artur is still working on a “choose file” for Uppy React Native, once done we move on to the next stage.
  • We provide an API for a native app developer to stick to their button, like so: uppyReactNative.pick().then(files => { console.log(files) })
  • Authentication — we open a web view, like most apps do, and you authenticate the same way you do on the web, only we get a token back in the app somehow like this: https://facebook.github.io/react-native/docs/webview#onmessage (currently we do https://github.com/transloadit/uppy-server/blob/master/src/server/controllers/callback.js#L34-L47)
  • We present a user with a “choose source” screen, just like the Dashboard currently does
  • Once a source is selected, we show a native grid or list view of files — so we build two views just for react native. They both have Select buttons, like in the Dashboard currently
  • Once files are selected, we resolve a promise from above, and files are added to JS Uppy lib. uppyReactNative.upload() calls upload on Uppy lib. We are not building file previews / editing here (maybe we add crop/editing later), since that’s something that should be displayed natively in the app, if needed.
  • We maybe provide a StausBar/ProgressBar component to show progress. (edited)

👉 There’s also an idea for a Uppy Client + Uppy Companion provider refactor: move all “provider” methods like getItemIcon, getItemRequestPath and getItemId to the server (uppy-server / companion). That way we are not shipping much code to the client, it’s very lightweight, just a plugin name and an icon, and Uppy Client is receiving a standard JSON response for each provider, normalized by Uppy Companion. { name, icon, requestPath, isFolder ... }. Pros: lighter and simpler client code, unified API for Uppy Client and React Native. Cons: more work for the server on building this API (now server just proxies what Google Drive or Dropbox has sent).

arturi added some commits Aug 6, 2018

arturi and others added some commits Apr 2, 2019

@arturi arturi changed the title [WIP] Basic React Native support Basic React Native support Apr 17, 2019

@arturi arturi merged commit d140c2f into master Apr 17, 2019

0 of 3 checks passed

continuous-integration/travis-ci/pr The Travis CI build is in progress
Details
continuous-integration/travis-ci/push The Travis CI build is in progress
Details
deploy/netlify Deploy preview processing.
Details

@arturi arturi deleted the feature/react-native branch Apr 17, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.