example: revive react native example

.eslintignore

@@ -10,6 +10,7 @@ website/themes/uppy/source/js/uppy.js
 website/themes/uppy/source/uppy/**
 test/endtoend/*/build
 examples/svelte-example/public/build/
+examples/react-native-expo/
 bundle-legacy.js
 website/src/_posts/201*.md
 website/src/_posts/2020-*.md

examples/react-native-expo/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

examples/react-native-expo/.gitignore

@@ -1,7 +1,14 @@
-node_modules/**/*
-.expo/*
+node_modules/
+.expo/
+dist/
 npm-debug.*
 *.jks
+*.p8
 *.p12
 *.key
 *.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

examples/react-native-expo/App.js

@@ -1,175 +1,166 @@
 // import * as Expo from 'expo'
-import React from 'react'
-import {
-  Text,
-  View,
-  AsyncStorage,
-  Image,
-} from 'react-native'
-import Uppy from '@uppy/core'
-import Tus from '@uppy/tus'
-import UppyFilePicker from '@uppy/react-native'
-import FileList from './FileList'
-import PauseResumeButton from './PauseResumeButton'
-import ProgressBar from './ProgressBar'
-import SelectFiles from './SelectFilesButton'
-import getTusFileReader from './tusFileReader'
-
-export default class App extends React.Component {
-  constructor () {
-    super()
-
-    this.state = {
-      progress: 0,
-      total: 0,
-      file: null,
-      uploadURL: null,
-      isFilePickerVisible: false,
-      isPaused: false,
-      uploadStarted: false,
-      uploadComplete: false,
-      info: null,
-      totalProgress: 0,
-    }
-
-    this.isReactNative = (typeof navigator !== 'undefined'
-      && typeof navigator.product === 'string'
-      && navigator.product.toLowerCase() === 'reactnative')
-
-    this.showFilePicker = this.showFilePicker.bind(this)
-    this.hideFilePicker = this.hideFilePicker.bind(this)
-    this.togglePauseResume = this.togglePauseResume.bind(this)
-
-    console.log('Is this React Native?', this.isReactNative)
-    this.uppy = new Uppy({ autoProceed: true, debug: true })
-    this.uppy.use(Tus, {
-      endpoint: 'https://tusd.tusdemo.net/files/',
+import React, { useEffect, useRef, useState } from "react";
+import { Text, View, AsyncStorage, Image } from "react-native";
+import Uppy from "@uppy/core";
+import Tus from "@uppy/tus";
+import UppyFilePicker from "@uppy/react-native";
+import FileList from "./FileList";
+import PauseResumeButton from "./PauseResumeButton";
+import ProgressBar from "./ProgressBar";
+import SelectFiles from "./SelectFilesButton";
+import getTusFileReader from "./tusFileReader";
+
+export default function App() {
+  const [state, _setState] = useState({
+    progress: 0,
+    total: 0,
+    file: null,
+    uploadURL: null,
+    isFilePickerVisible: false,
+    isPaused: false,
+    uploadStarted: false,
+    uploadComplete: false,
+    info: null,
+    totalProgress: 0,
+  });
+
+  const setState = (newState) =>
+    _setState((oldState) => ({ ...oldState, ...newState }));
+
+  const uppy = useRef();
+
+  useEffect(() => {
+    uppy.current = new Uppy({ autoProceed: true, debug: true });
+    uppy.current.use(Tus, {
+      endpoint: "https://tusd.tusdemo.net/files/",
       urlStorage: AsyncStorage,
       fileReader: getTusFileReader,
       chunkSize: 10 * 1024 * 1024, // keep the chunk size small to avoid memory exhaustion
-    })
-    this.uppy.on('upload-progress', (file, progress) => {
-      this.setState({
+    });
+    uppy.current.on("upload-progress", (file, progress) => {
+      setState({
         progress: progress.bytesUploaded,
         total: progress.bytesTotal,
-        totalProgress: this.uppy.state.totalProgress,
+        totalProgress: uppy.current.state.totalProgress,
         uploadStarted: true,
-      })
-    })
-    this.uppy.on('upload-success', () => {
+      });
+    });
+    uppy.current.on("upload-success", () => {
       // console.log(file.name, response)
-    })
-    this.uppy.on('complete', (result) => {
-      this.setState({
-        status: 'Upload complete ✅',
+    });
+    uppy.current.on("complete", (result) => {
+      setState({
+        status: "Upload complete ✅",
         uploadURL: result.successful[0] ? result.successful[0].uploadURL : null,
         uploadComplete: true,
         uploadStarted: false,
-      })
-      console.log('Upload complete:', result)
-    })
+      });
+      console.log("Upload complete:", result);
+    });
 
-    this.uppy.on('info-visible', () => {
-      const { info } = this.uppy.getState()
-      this.setState({
+    uppy.current.on("info-visible", () => {
+      const { info } = uppy.current.getState();
+      setState({
         info,
-      })
-      console.log('uppy-info:', info)
-    })
+      });
+      console.log("uppy-info:", info);
+    });
 
-    this.uppy.on('info-hidden', () => {
-      this.setState({
+    uppy.current.on("info-hidden", () => {
+      setState({
         info: null,
-      })
-    })
-  }
+      });
+    });
+  }, [setState]);
 
-  showFilePicker () {
-    this.setState({
+  const showFilePicker = () => {
+    setState({
       isFilePickerVisible: true,
       uploadStarted: false,
       uploadComplete: false,
-    })
-  }
+    });
+  };
 
-  hideFilePicker () {
-    this.setState({
+  const hideFilePicker = () => {
+    setState({
       isFilePickerVisible: false,
-    })
-  }
+    });
+  };
 
-  togglePauseResume () {
-    if (this.state.isPaused) {
-      this.uppy.resumeAll()
-      this.setState({
+  const togglePauseResume = () => {
+    if (state.isPaused) {
+      uppy?.current.resumeAll();
+      setState({
         isPaused: false,
-      })
+      });
     } else {
-      this.uppy.pauseAll()
-      this.setState({
+      uppy?.current.pauseAll();
+      setState({
         isPaused: true,
-      })
+      });
     }
-  }
+  };
 
-  render () {
-    return (
-      <View style={{
+  return (
+    <View
+      style={{
         paddingTop: 100,
         paddingLeft: 50,
         paddingRight: 50,
         flex: 1,
       }}
-      >
-        <Text style={{
+    >
+      <Text
+        style={{
           fontSize: 25,
           marginBottom: 20,
-          textAlign: 'center',
+          textAlign: "center",
         }}
+      >
+        Uppy in React Native
+      </Text>
+      <View style={{ alignItems: "center" }}>
+        <Image
+          style={{ width: 80, height: 78, marginBottom: 50 }}
+          source={require("./assets/uppy-logo.png")}
+        />
+      </View>
+      <SelectFiles showFilePicker={showFilePicker} />
+
+      {state.info ? (
+        <Text
+          style={{
+            marginBottom: 10,
+            marginTop: 10,
+            color: "#b8006b",
+          }}
         >
-          Uppy in React Native
+          {state.info.message}
         </Text>
-        <View style={{ alignItems: 'center' }}>
-          <Image
-            style={{ width: 80, height: 78, marginBottom: 50 }}
-            source={require('./assets/uppy-logo.png')}
-          />
-        </View>
-        <SelectFiles showFilePicker={this.showFilePicker} />
-
-        {this.state.info ? (
-          <Text
-            style={{
-              marginBottom: 10,
-              marginTop: 10,
-              color: '#b8006b',
-            }}
-          >
-            {this.state.info.message}
-          </Text>
-        ) : null}
-
-        <ProgressBar progress={this.state.totalProgress} />
-
-        <PauseResumeButton
-          isPaused={this.state.isPaused}
-          onPress={this.togglePauseResume}
-          uploadStarted={this.state.uploadStarted}
-          uploadComplete={this.state.uploadComplete}
-        />
+      ) : null}
 
+      <ProgressBar progress={state.totalProgress} />
+
+      <PauseResumeButton
+        isPaused={state.isPaused}
+        onPress={togglePauseResume}
+        uploadStarted={state.uploadStarted}
+        uploadComplete={state.uploadComplete}
+      />
+
+      {uppy?.current && (
         <UppyFilePicker
-          uppy={this.uppy}
-          show={this.state.isFilePickerVisible}
-          onRequestClose={this.hideFilePicker}
+          uppy={uppy?.current}
+          show={state.isFilePickerVisible}
+          onRequestClose={hideFilePicker}
           companionUrl="http://localhost:3020"
         />
+      )}
 
-        <FileList uppy={this.uppy} />
+      {uppy?.current && <FileList uppy={uppy.current} />}
 
-        {/* <Text>{this.state.status ? 'Status: ' + this.state.status : null}</Text>
-        <Text>{this.state.progress} of {this.state.total}</Text> */}
-      </View>
-    )
-  }
+      {/* <Text>{state.status ? 'Status: ' + state.status : null}</Text>
+      <Text>{state.progress} of {state.total}</Text> */}
+    </View>
+  );
 }