Implementando a Câmera no React Native com Expo

Neste tutorial, vamos aprender a utilizar o componente CameraView para capturar imagens e gerenciar permissões de hardware de forma moderna e eficiente.

1. Introdução ao expo-camera

O pacote expo-camera fornece um componente React que renderiza uma visualização da câmera frontal ou traseira do dispositivo. No SDK atual, utilizamos o componente CameraView, que substituiu as versões mais antigas para oferecer melhor performance e uma API mais simples.

Principais funcionalidades:

• Visualização em tempo real (Preview).
• Alternância entre câmera frontal e traseira.
• Gerenciamento nativo de permissões.
• Captura de fotos e vídeos (via referências).

2. Fluxo de Permissões

Antes de acessar a câmera, é obrigatório solicitar a permissão do usuário. O sistema operacional (Android ou iOS) bloqueia o acesso por segurança até que o usuário autorize explicitamente.

No código, utilizamos o hook useCameraPermissions(), que retorna dois elementos principais:

1. permissao: Um objeto que indica o status atual (carregando, concedido ou negado).
2. solicitarPermissao: Uma função para abrir a caixa de diálogo do sistema.

3. Análise do Código Exemplo

Vamos decompor as partes essenciais do código implementado:

A. O Hook de Permissão

JavaScript

const [permissao, solicitarPermissao] = useCameraPermissions();

• Se permissao for nulo, o app ainda está checando o status.
• Se permissao.granted for falso, exibimos um botão para chamar solicitarPermissao.

B. O Componente CameraView

JavaScript

<CameraView style={styles.camera} facing={ladoCamera} />

• style: Define o tamanho da área da câmera. Geralmente usa-se flex: 1 para ocupar a tela inteira.
• facing: Controla qual câmera usar. Aceita as strings 'back' (traseira) ou 'front' (frontal).

C. Alternância de Câmera

Para inverter a câmera, utilizamos um estado simples do React (useState):

JavaScript

function alternarLadoCamera() {
  setLadoCamera(atual => (atual === 'back' ? 'front' : 'back'));
}

4. Estrutura de Estilização (StyleSheet)

Para que a interface seja funcional, o botão de interação deve estar sobreposto à câmera.

• position: 'absolute': No containerBotao, garante que os controles flutuem sobre a imagem da câmera.
• backgroundColor: 'rgba(0,0,0,0.5)': Um fundo semi-transparente ajuda na legibilidade do texto, independente do que a câmera está focando.