Preview

https://github.com/adrian-koczen/react-native-images-picker/assets/3694808/57cdec03-2cfa-4ff6-bd5a-296cf2df8bf8

Installation

Expo

Update app.json

"plugins": ["react-native-images-picker/plugin"]

Bare react native

Update AndroidManifest.xml

<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>

Update InfoPlist

NSPhotoLibraryUsageDescription: 'Access required ...'

Component

1import { useState } from "react"
2import { Pressable, View, Text } from 'react-native'
3import { ImagesPicker } from 'react-native-images-picker/component'
4
5const App = () => {
6    const [isOpen, setIsOpen] = useState(false)
7
8    return (
9        <View style={{ flex: 1 }}>
10            <Pressable onPress={() => setIsOpen(true)}>
11                <Text>
12                    Open Images Picker
13                </Text>
14            </Pressable>
15            <ImagesPicker
16                isOpen={isOpen}
17                onClose={setIsOpen}
18            />
19        </View>
20    )
21}

Functions

Request permissions

1import { requestPermissions } from 'react-native-images-picker'
2
3const requestPermissionsFunction = async () => {
4    await requestPermissions()
5}

Fetch assets with pagination

1import { fetchAssets, Asset } from 'react-native-images-picker'
2
3const App = () => {
4    const [assets, setAssets] = useState<Array<Asset>>([])
5
6    const fetchImages = async (page: number, offset: number) => {
7        const fetchedAssets = await fetchAssets({
8            offset,
9            page
10        })
11
12        setAssets(prevValue => [...prevValue, ...fetchedAssets])
13    }
14
15    ...
16}
17

Asset

Key	Type	Value
path	string	image path on device
height	string	image height
width	string	image width