Como Acessar Galeria De Fotos E Exibir - React Native

Recentemente, em um projeto mobile, precisei adicionar no formulário um input onde o usuário inserisse fotos.
O usuário deveria ser capaz de inserir uma foto que já está salva no celular dele dentro de um formulário.

Para fazer isso, usei a lib react-native-image-picker

Para instalar:

1
npm i react-native-image-picker

OU

1
yarn add react-native-image-picker

Com a lib instalada, podemos dar prosseguimento na nossa atividade.

Precisamos de um botão, que chame o método que vai abrir a galeria:

1
2
3
4
5
<Button
onPress={handleChoosePhoto}
title="Abrir câmera"
color="#841584"
/>

Agora vamos implementar o método handleChoosePhoto:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// Import da lib
import { launchImageLibrary } from 'react-native-image-picker';

export function PhotoComponent() {
// Nosso estado de arquivos
const [file, setFile] = useState();

const handleChoosePhoto = () => {
const options = {
noData: true,
title: 'Foto de avaliação',
takePhotoButtonTitle: 'Escolha uma foto',
chooseFromLibraryButtonTitle: 'Selecione da galeria uma foto',
selectionLimit: 1, // Se deixar 1, será permitido apenas uma foto e 0 várias
};

launchImageLibrary(options, async (response) => {
if (response.didCancel) {
console.log('Usuário cancelou a seleção');
} else if (response.error) {
console.log('Ocorreu um erro.');
} else {
const photoFile = {
uri: asset.uri,
name: asset.fileName,
type: 'image/jpeg',
};

setFile(photoFile);
}
});
};
}

Pronto, se tudo ocorreu bem, você já pode exibir a imagem no seu aplicativo!

Basta acessar seu state:

1
<Image source={{ uri: photoFile.uri }} />

Simples, não é?

Uma observação, no iOS, em específico no emulador, a foto não aparece.

Mas isso não é bug e nem problema de implementação, para exibir realmente precisa ser feito em um dispositivo real! ;)