expo-use-picker

A React Hook for simplifying basic usage of expo-document-picker

This hook returns an object with two properties:

• a boolean state loading, that indicates whether it is waiting for a file to load;

• an asynchronous method load, that asks the user to choose the aforementioned file and returns its URI.

Peer dependencies

1{
2    "expo": "45.0.0",
3    "expo-document-picker": "10.2.1",
4    "react": "17.0.2",
5    "react-native": "0.68.2"
6}

Install

With npm:

npm install @hashiprobr/expo-use-picker

With yarn:

yarn add @hashiprobr/expo-use-picker

With expo:

expo install @hashiprobr/expo-use-picker

Example

1import React, { useState } from 'react';
2
3import { View, Text, Image, Button } from 'react-native';
4
5import usePicker from '@hashiprobr/expo-use-picker';
6
7export default function MyComponent() {
8    const [uri, setUri] = useState();
9
10    const picker = usePicker();
11
12    async function onPress() {
13        let result;
14        try {
15            result = await picker.load('image/*');
16        } catch (error) {
17            console.error(error);
18        }
19        if (result) {
20            setUri(result);
21        }
22    }
23
24    return (
25        <View
26            style={{
27                flexGrow: 1,
28                justifyContent: 'center',
29                alignItems: 'center',
30            }}
31        >
32            {picker.loading ? (
33                <Text>loading...</Text>
34            ) : (
35                <>
36                    {uri && (
37                        <Image style={{ width: 250, height: 250 }} source={{ uri }} />
38                    )}
39                    <Button title="load" onPress={onPress} />
40                </>
41            )}
42        </View>
43    );
44}