Merge pull request #1494 from transloadit/docs/react-native

Add basic @uppy/react-native docs

examples/react-native-expo/readme.md

@@ -0,0 +1,15 @@
+# Uppy in React Native Expo (Beta)
+
+⚠️ In Beta
+
+`@uppy/react-native` is a basic Uppy component for React Native with Expo. It is in Beta, and is not full-featured. You can select local images or videos, take a picture with a camera or add any file from a remote url with Uppy Companion.
+
+## Run it
+
+```bash
+cd examples/react-native-expo
+npm install
+npm start
+```
+
+Then a tab will open in your browser with Expo UI, and you can choose to run the example in either an iOS or Android simulator, or right on your mobile device with an Expo app — might be easier, if you don’t want to install emulators.

website/src/docs/react-native.md

@@ -0,0 +1,100 @@
+---
+title: "React Native"
+type: docs
+permalink: docs/react/native/
+order: 7
+category: 'React'
+---
+
+⚠️ In Beta
+
+`@uppy/react-native` is a basic Uppy component for React Native with Expo. It is in Beta, and is not full-featured. You can select local images or videos, take a picture with a camera or add any file from a remote url with Uppy Companion.
+
+Make sure to check out the example in [examples/react-native-expo](https://github.com/transloadit/uppy/tree/master/examples/react-native-expo).
+
+<img width="400" src="/images/2019-04-11-react-native-ui-1.png">
+
+## Installation
+
+Install from NPM:
+
+```shell
+npm install @uppy/react-native
+```
+
+```js
+import UppyFilePicker from '@uppy/react-native'
+
+render () {
+  <UppyFilePicker
+    uppy={this.uppy}
+    show={this.state.isFilePickerVisible}
+    onRequestClose={this.hideFilePicker}
+    companionUrl="https://server.uppy.io" />
+}
+```
+
+## Initializing Uppy
+
+Your Uppy instance must be initialized before passing it to an `uppy={}` prop, and should be cleaned up using `uppy.close()` when you are done with it. A simple approach is to initialize it in your React component's `constructor()` and destroy it in `componentWillUnmount()`.
+
+> ⚠ Uppy instances are stateful, so the same instance must be used across different renders.
+> Do **NOT** initialize Uppy in a `render()` method!
+> Do **NOT** initialize Uppy in a function component!
+
+```js
+class MyComponent extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      isFilePickerVisible: false
+    }
+    this.uppy = Uppy()
+      .use(Transloadit, {})
+  }
+
+  componentWillUnmount () {
+    this.uppy.close()
+  }
+
+  showFilePicker () {
+    this.setState({
+      isFilePickerVisible: true
+    })
+  }
+
+  hideFilePicker () {
+    this.setState({
+      isFilePickerVisible: false
+    })
+  }
+
+  render () {
+    return <UppyFilePicker
+      show={this.state.isFilePickerVisible}
+      uppy={this.uppy}
+      onRequestClose={this.hideFilePicker}
+      companionUrl="https://companion.uppy.io" />
+  }
+}
+```
+
+## Props
+
+The `<UppyFilePicker>` component supports the following props:
+
+### uppy
+
+The uppy instance. Initialize in constructor, add all the nessesary plugins, set up event listeners, before passing as a prop.
+
+### show
+
+Boolean — the `<UppyFilePicker>` modal component will be rendered when set to `true`.
+
+### onRequestClose
+
+A callback that’s called when a file is picked or a “close” button is pressed. Use it to hide `<UppyFilePicker>`, like in the example above.
+
+### companionUrl
+
+[Uppy Companion](/docs/companion/) url.