Cleanup, use props to pass options

examples/react-native-expo/react-native/file-picker/index.js

@@ -156,7 +156,16 @@ export default class UppyReactNativeFilePicker extends React.Component {
           this.props.onRequestClose()
         }}>
         {this.state.openProvider
-          ? <Provider id={this.state.openProvider} uppy={this.uppy} />
+          ? <Provider
+            providerID={this.state.openProvider}
+            uppy={this.uppy}
+            onSuccess={() => {
+              this.setState({
+                openProvider: null
+              })
+              this.props.onRequestClose()
+            }}
+            {...this.props} />
           : this.renderSourceList()
         }
       </Modal>

examples/react-native-expo/react-native/file-picker/provider.js

@@ -1,13 +1,5 @@
 import React from 'react'
-// import Expo from 'expo'
 import {
-  // StyleSheet,
-  // FlatList,
-  // Image,
-  // TouchableOpacity,
-  // Text,
-  // TextInput,
-  // View,
   AsyncStorage,
   WebView } from 'react-native'
 import Instagram from '@uppy/instagram'
@@ -44,17 +36,26 @@ export default class UppyRNProvider extends React.Component {
   }
 
   componentDidMount () {
-    this.uppy = this.props.uppy
-    this.uppy.use(Instagram, {
-      serverUrl: 'http://localhost:3020',
-      storage: AsyncStorage
-    })
-    this.plugin = this.uppy.getPlugin('Instagram')
+    const uppy = this.props.uppy
+    const options = Object.assign(
+      { id: 'uppyRN:Instagram' },
+      this.props,
+      { storage: AsyncStorage }
+    )
+    delete options.uppy
+    uppy.use(Instagram, options)
+    this.plugin = uppy.getPlugin(options.id)
+
     this.setState({
       authUrl: this.plugin.provider.authUrl()
     })
   }
 
+  componentWillUnmount () {
+    const uppy = this.props.uppy
+    uppy.removePlugin(this.plugin)
+  }
+
   // renderGrid (items) {
   //   return (
   //     <View style={styles.container}>
@@ -89,8 +90,8 @@ export default class UppyRNProvider extends React.Component {
   }
 
   render () {
-    if (this.props.id === 'Url') {
-      return <Url uppy={this.props.uppy} />
+    if (this.props.providerID === 'Url') {
+      return <Url {...this.props} />
     }
 
     return this.renderInstagram()

examples/react-native-expo/react-native/file-picker/selectDocument.js

@@ -1,4 +1,4 @@
-import Expo from 'expo'
+import * as Expo from 'expo'
 
 function selectDocumentWithExpo (options) {
   return Expo.DocumentPicker.getDocumentAsync({

examples/react-native-expo/react-native/file-picker/selectImage.js

@@ -1,4 +1,4 @@
-import Expo from 'expo'
+import * as Expo from 'expo'
 
 function selectImageWithExpo (options) {
   return new Promise((resolve, reject) => {

examples/react-native-expo/react-native/file-picker/takePicture.js

@@ -1,4 +1,4 @@
-import Expo from 'expo'
+import * as Expo from 'expo'
 
 function takePictureWithExpo (options) {
   return new Promise((resolve, reject) => {

examples/react-native-expo/react-native/file-picker/url.js

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import {
-  // StyleSheet,
+  StyleSheet,
   TouchableOpacity,
   Text,
   TextInput,
@@ -20,23 +20,26 @@ export default class UppyRNUrl extends React.Component {
   }
 
   componentDidMount () {
-    this.uppy = this.props.uppy
-    this.uppy.use(Url, {
-      id: 'uppyRN:Url',
-      serverUrl: 'http://localhost:3020'
-    })
-    this.plugin = this.uppy.getPlugin('uppyRN:Url')
+    const uppy = this.props.uppy
+    const options = Object.assign(
+      { id: 'uppyRN:Url' },
+      this.props,
+      { }
+    )
+    delete options.uppy
+
+    uppy.use(Url, options)
+    this.plugin = uppy.getPlugin(options.id)
   }
 
   componentWillUnmount () {
-    this.uppy.removePlugin(this.plugin)
+    const uppy = this.props.uppy
+    uppy.removePlugin(this.plugin)
   }
 
   onPressImport () {
     this.plugin.addFile(this.state.url)
-      .then(() => {
-        console.log('success')
-      })
+      .then(this.props.onSuccess)
       .catch((err) => {
         console.log(err)
       })
@@ -44,34 +47,19 @@ export default class UppyRNUrl extends React.Component {
 
   render () {
     return (
-      <View style={{
-        flex: '1',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }}>
+      <View style={styles.container}>
         <TextInput
-          style={{
-            width: '90%',
-            height: 40,
-            borderColor: '#7f8a93',
-            borderWidth: 1,
-            padding: 5,
-            marginBottom: 15
-          }}
+          style={styles.input}
+          autoFocus
           onChangeText={(text) => this.setState({
             url: text
           })}
           placeholder="Enter URL to import a file"
         />
         <TouchableOpacity
-          style={{
-            alignItems: 'center',
-            backgroundColor: '#2275d7',
-            paddingHorizontal: 15,
-            paddingVertical: 8
-          }}
+          style={styles.button}
           onPress={this.onPressImport}>
-          <Text style={{ color: '#fff' }}>Import</Text>
+          <Text style={styles.buttonText}>Import</Text>
         </TouchableOpacity>
         <Text>{this.state.text}</Text>
       </View>
@@ -79,15 +67,28 @@ export default class UppyRNUrl extends React.Component {
   }
 }
 
-// const styles = StyleSheet.create({
-//   container: {
-//     justifyContent: 'center',
-//     flex: 1,
-//     paddingTop: 30
-//   },
-//   item: {
-//     justifyContent: 'center',
-//     alignItems: 'center',
-//     height: 100
-//   }
-// })
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  input: {
+    width: '90%',
+    height: 40,
+    borderColor: '#7f8a93',
+    borderWidth: 1,
+    padding: 5,
+    borderRadius: 4,
+    marginBottom: 15
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#2275d7',
+    paddingHorizontal: 15,
+    paddingVertical: 8
+  },
+  buttonText: {
+    color: '#fff'
+  }
+})