diff --git a/website/src/docs/react-native.md b/website/src/docs/react-native.md new file mode 100644 index 000000000..80a93ab08 --- /dev/null +++ b/website/src/docs/react-native.md @@ -0,0 +1,98 @@ +--- +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. + + + +## Installation + +Install from NPM: + +```shell +npm install @uppy/react-native +``` + +```js +import UppyFilePicker from '@uppy/react-native' + +render () { + +} +``` + +## 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 + } +} +``` + +## Props + +The `` 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 `` 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 ``, like in the example above. + +### companionUrl + +[Uppy Companion](/docs/companion/) url. diff --git a/website/src/images/2019-04-11-react-native-ui-1.png b/website/src/images/2019-04-11-react-native-ui-1.png new file mode 100644 index 000000000..94733ef10 Binary files /dev/null and b/website/src/images/2019-04-11-react-native-ui-1.png differ