Uso de câmera no React-Native
Primeira vez escrevendo aqui, então desculpa qualquer coisa 😅
Bom, atualmente estou trabalhando numa aplicação mobile para uma empresa privada e me pediram uma funcionalidade de envio de foto. Nunca havia trabalhado com nada do tipo e a princípio, achei que teria dificuldade. Mas e aí, tive dificuldade? De jeito nenhum, foi até fácil. Usei uma lib/módulo (como queira chamar) chamada React Native Image Picker.
Ela foi perfeita para o cenário que eu precisava, porque eu também precisava enviar o arquivo na forma de BASE64, através de uma api e essa lib já provê essa funcionalidade. Com essa lib, é possível usar a câmera do celular sem nenhum problema além de ter a possibilidade de acessar à galeria de fotos do usuário, recurso que veio a calhar pois implementei a funcionalidade de envio de foto direto da câmera e o envio de foto escolhendo uma foto qualquer da galeria.
Chega de introdução, vamos para um exemplo prático e básico.
Neste ponto, vou assumir que você já tenha um ambiente configurado para trabalhar com React Native, então este ponto não será coberto. Caso não tenha isso configurado, sugiro fortemente que dê uma olhada na documentação oficial, é simples e bem direta ao ponto, só seguir que não tem erro: https://reactnative.dev/docs/environment-setup
Para criar um novo projeto React Native, basta executar o comando:
npx react-native init AwesomeCameraBasta esperar pela criação e instalação de dependências.
Depois, a estrutura inicial do projeto deve ser algo próximo disso:
O arquivo App.js, onde vamos fazer tudo, deve se parecer mais ou menos com isso:
Agora vamos instalar a lib/módulo React-Native-Image-Picker, com o comando:
npm install react-native-image-picker --saveouyarn add react-native-image-picker
Você também precisará adicionar algumas permissões no Android. Permissão para usar a câmera e ler o armazenamento.
No arquivo: AwesomeCamera/android/app/src/debug/AndroidManifest.xml
Para dar tudo certo, crie uma pasta chamada assets e adicione essas duas imagens: dummy e galleryImages.
Vamos modificar o arquivo App.js, já deixando o layout pronto, pois esse não é o foco aqui, segue:
O layout da aplicação, vai ficar assim:
Acessar a câmera
Para implementar a funcionalidade de iniciar a câmera diretamente quando você clica em “Acessar câmera”, use o código abaixo. Ele abrirá diretamente a câmera e mostrará a imagem clicada no componente de imagem.
Acessar a galeria
Para iniciar diretamente a biblioteca de imagens, você pode usar o código a seguir. Ele abrirá diretamente a Biblioteca de Imagens e mostrará a imagem Selecionada no Componente de Imagem.
App.js
Conclusão
Neste post, quis mostrar que dá pra implementar o uso da câmera no React Native de uma maneira bem simples usando a lib React Native Image Picker. Você pode encontrar o código completo neste repositório aqui.
