add basic @uppy/react-native docs

This commit is contained in:
Artur Paikin 2019-04-24 18:58:32 +03:00
parent 591b552678
commit fcc42437c0
2 changed files with 98 additions and 0 deletions

View file

@ -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.
<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 thats 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.

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB