1import React from 'react';
2import { Alert, Image, Text, View, Switch } from 'react-native';
3import * as DocumentPicker from 'expo-document-picker';
4import Button from '../components/Button';
5
6interface State {
7  document?: DocumentPicker.DocumentResult;
8  copyToCache: boolean;
9}
10
11export default class DocumentPickerScreen extends React.Component<{}, State> {
12  static navigationOptions = {
13    title: 'DocumentPicker',
14  };
15
16  readonly state: State = {
17    copyToCache: false,
18  };
19
20  _openPicker = async () => {
21    const result = await DocumentPicker.getDocumentAsync({
22      copyToCacheDirectory: this.state.copyToCache,
23    });
24    if (result.type === 'success') {
25      this.setState({ document: result });
26    } else {
27      setTimeout(() => {
28        Alert.alert('Document picked', JSON.stringify(result, null, 2));
29      }, 100);
30    }
31  }
32
33  _renderDocument() {
34    if (!this.state.document) {
35      return null;
36    }
37    return (
38      <View>
39        {this.state.document.name!.match(/\.(png|jpg)$/gi) ? (
40          <Image
41            source={{ uri: this.state.document.uri }}
42            resizeMode="cover"
43            style={{ width: 100, height: 100 }}
44          />
45        ) : null}
46        <Text>
47          {this.state.document.name} ({this.state.document.size! / 1000} KB)
48        </Text>
49        <Text>URI: {this.state.document.uri}</Text>
50      </View>
51    );
52  }
53
54  render() {
55    return (
56      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
57        <Button onPress={this._openPicker} title="Open document picker" />
58        <View
59          style={{
60            alignItems: 'center',
61            justifyContent: 'center',
62            flexDirection: 'row',
63          }}
64        >
65          <Text>Copy to cache</Text>
66          <Switch
67            value={this.state.copyToCache}
68            onValueChange={value => this.setState({ copyToCache: value })}
69          />
70        </View>
71        {this._renderDocument()}
72      </View>
73    );
74  }
75}
76