1import * as DocumentPicker from 'expo-document-picker';
2import React from 'react';
3import { Alert, Image, Platform, Text, View } from 'react-native';
4
5import Button from '../components/Button';
6import TitleSwitch from '../components/TitledSwitch';
7
8export default function DocumentPickerScreen() {
9  const [copyToCache, setCopyToCache] = React.useState(false);
10  const [document, setDocument] = React.useState<DocumentPicker.DocumentResult | null>(null);
11
12  const openPicker = async () => {
13    const time = Date.now();
14    const result = await DocumentPicker.getDocumentAsync({
15      copyToCacheDirectory: copyToCache,
16    });
17    console.log(`Duration: ${Date.now() - time}ms`);
18    console.log(`Results:`, result);
19    if (result.type === 'success') {
20      setDocument(result);
21    } else {
22      setTimeout(() => {
23        if (Platform.OS === 'web') {
24          alert('Cancelled');
25        } else {
26          Alert.alert('Cancelled');
27        }
28      }, 100);
29    }
30  };
31
32  return (
33    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
34      <Button onPress={openPicker} title="Open document picker" />
35      <TitleSwitch
36        style={{ marginVertical: 24 }}
37        value={copyToCache}
38        setValue={setCopyToCache}
39        title="Copy to cache"
40      />
41      {document?.type === 'success' && (
42        <View>
43          {document.name!.match(/\.(png|jpg)$/gi) ? (
44            <Image
45              source={{ uri: document.uri }}
46              resizeMode="cover"
47              style={{ width: 100, height: 100 }}
48            />
49          ) : null}
50          <Text>
51            {document.name} ({document.size! / 1000} KB)
52          </Text>
53          <Text>
54            URI: {document.uri} MimeType: {document.mimeType}
55          </Text>
56        </View>
57      )}
58    </View>
59  );
60}
61
62DocumentPickerScreen.navigationOptions = {
63  title: 'DocumentPicker',
64};
65