Tutorial React Native: Usando a Câmera do Celular

Fala Samurai, beleza?

Nós da equipe Dev Samurai temos o prazer de lançar essa nova série de tutoriais sobre React Native chamada React Native Tutorials.

Nessa série, iremos descrever o passo a passo e algumas técnicas para utilizar ferramentas e libs relacionadas a React Native, que foram aprendidas e utilizadas aqui no time de desenvolvimento da Dev Samurai.

Para dar inicio a essa série, vamos falar um pouco sobre como podemos utilizar a câmera do celular com React Native.

Link do Github: https://mautic.devsamurai.com.br/asset/11:tutorial-samuraicam

Índice

Criando o nosso aplicativo

Iremos partir de uma aplicação React Native do zero, gerada pelo:

react-native init SamuraiCam

Para esse tutorial, a ideia é trazer uma tela com 2 botões, 1 para fazer a utilização da câmera para capturar uma foto e outro para excluir a foto tirada que ficará exibida em um pequeno quadrinho.

Essa é uma prévia da aplicação:

Aplicativo SamuraiCam para testar a Câmera do React Native

De antemão, gostaria de esclarecer que a aplicação gerada no tutorial é um exemplo em que o foco principal é na instalação, configuração e uso de uma lib para React Native que vai auxiliar em acessar a câmera do celular e capturar fotos.

Preparando o Layout

Nosso layout vai ser simples, porém bonito =), e vai nos dar uma base para entender melhor o funcionamento do uso da câmera no React Native.

Vamos utilizar alguns ícones e um logo.

Para os ícones, instalaremos a lib react-native-vector-icons e faremos o link para utilizá-la:

yarn add react-native-vector-icons

react-native link react-native-vector-icons

o logo você pode baixar aqui: https://mautic.devsamurai.com.br/asset/10:logotipo-samurai-cam

Agora crie uma pasta chama src na raiz do projeto e dentro dela crie outra pasta chamada assets e dentro dela coloque as imagens do logo.

Arraste o arquivo inicial App.js do aplicativo gerado pelo react-native init para dentro da pasta src

Depois para que a mudança de lugar do arquivo principal App.js funcione corretamente, temos que mexer no arquivo index.js na raiz do projeto, altere a linha de código import App from './App'; para:

import App from './src/App';

Vamos começar a mexer no arquivo App.js adicionando uma View com nosso logo, os botões TouchableOpacity com seus Icons e o quadrinho para visualizar a foto posteriormente:

import React from "react";
import { View, Image, TouchableOpacity, StyleSheet } from "react-native";

import Icon from "react-native-vector-icons/MaterialIcons";

import logo from "./assets/logo.png";

const App = () => {
  return (
    <View style={styles.container}>
      <Image source={logo} style={styles.logo} />
      <View style={styles.photo}></View>
      <View style={styles.buttons}>
        <TouchableOpacity style={styles.button} onPress={() => {}}>
          <Icon name="camera-alt" size={40} color={"#f37272"} />
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={() => {}}>
          <Icon name="delete" size={40} color={"#f37272"} />
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f37272"
  },
  logo: {
    alignSelf: "center",
    marginTop: 60
  },
  photo: {
    width: 300,
    height: 200,
    backgroundColor: "#fff",
    alignSelf: "center",
    marginTop: 80
  },
  buttons: {
    marginTop: 10,
    flexDirection: "row",
    justifyContent: "center"
  },
  button: {
    backgroundColor: "#fff",
    margin: 20,
    borderRadius: 150,
    width: 80,
    height: 80,
    alignItems: "center",
    justifyContent: "center"
  }
});

export default App;

O resultado do app deve estar assim:

Instalando e Configurando a Lib `react-native-camera` do React Native

Para acessar a câmera e capturar fotos vamos utilizar a lib react-native-camera

yarn add react-native-camera

Precisamos realizar alguns passos para configurar a lib e conseguir utiliza lá corretamente.

Primeira coisa é rodar o comando:

react-native link react-native-camera

Configurações para IOS

No arquivo ios/nome_do_projeto/info.plist adicione dentro da tag <dict> esse código:

<key>NSCameraUsageDescription</key>
<string>Teste de aplicativo.</string>

Configurações para Android

No arquivo android/app/build.gradle encontre a parte que tem as configurações default do android chamada defaultConfig e adicione a linha missingDimensionStrategy 'react-native-camera', 'general', seu código deve ficar parecido com esse:

defaultConfig {
        applicationId "com.reactnativecameraexample"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
        missingDimensionStrategy 'react-native-camera', 'general'
    }

Depois vá até o arquivo android/app/src/main/AndroidManifest.xml e adicione essa linha:

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

Utilizando a câmera

Com a estrutura do Layout pronta e a lib react-native-camera configurada, podemos prosseguir para utilizar a câmera.

Para isso nós iremos criar agora nosso componente Camera.

Primeiro vamos importar o componente RNCamera da lib react-native-camera para utilizar dentro de um Modal

import { RNCamera } from "react-native-camera";

O Modal é um componente do React Native que fica como se fosse empilhado acima do componente anterior, então vamos controlar a visibilidade desse modal com o valor de isCameraVisible no state do componente App:

import React, { useState } from "react";
import { Modal, View, Image, TouchableOpacity, StyleSheet } from "react-native";

import Icon from "react-native-vector-icons/MaterialIcons";
import { RNCamera } from "react-native-camera";

import logo from "./assets/logo.png";

const Camera = ({ isVisible, onChangePhoto, onCloseCamera }) => {
  const [camera, setCamera] = useState();

  return (
    <Modal animationType="slide" transparent={false} visible={isVisible}>
      <RNCamera
        ref={ref => setCamera(ref)}
        style={{ flex: 1 }}
        type={RNCamera.Constants.Type.back}
        autoFocus={RNCamera.Constants.AutoFocus.on}
        flashMode={RNCamera.Constants.FlashMode.off}
        androidCameraPermissionOptions={{
          title: "Permissão para usar a câmera",
          message: "Precisamos da sua permissão para usar a câmera.",
          buttonPositive: "Ok",
          buttonNegative: "Cancelar"
        }}
        captureAudio={false}
      >
        <Icon
          name="photo-camera"
          size={40}
          color={"#fff"}
          onPress={() => {}}
          style={styles.buttonTakePicture}
        />
        <Icon
          name="close"
          size={50}
          color={"#fff"}
          onPress={onCloseCamera}
          style={styles.buttonCloseCamera}
        />
      </RNCamera>
    </Modal>
  );
};

const App = () => {
  const [isCameraVisible, setIsCameraVisible] = useState(false);

  const onCloseCamera = () => {
    setIsCameraVisible(false);
  };

  return (
    <View style={styles.container}>
      <Image source={logo} style={styles.logo} />
      <View style={styles.photo}></View>
      <View style={styles.buttons}>
        <TouchableOpacity
          style={styles.button}
          onPress={() => {
            setIsCameraVisible(true);
          }}
        >
          <Icon name="camera-alt" size={40} color={"#f37272"} />
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={() => {}}>
          <Icon name="delete" size={40} color={"#f37272"} />
        </TouchableOpacity>
      </View>
      <Camera isVisible={isCameraVisible} onCloseCamera={onCloseCamera} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f37272"
  },
  logo: {
    alignSelf: "center",
    marginTop: 60
  },
  photo: {
    width: 300,
    height: 200,
    backgroundColor: "#fff",
    alignSelf: "center",
    marginTop: 80
  },
  buttons: {
    marginTop: 10,
    flexDirection: "row",
    justifyContent: "center"
  },
  button: {
    backgroundColor: "#fff",
    margin: 20,
    borderRadius: 150,
    width: 80,
    height: 80,
    alignItems: "center",
    justifyContent: "center"
  },
  buttonTakePicture: {
    flex: 0,
    alignSelf: "center",
    position: "absolute",
    bottom: 20
  },
  buttonCloseCamera: {
    flex: 0,
    position: "absolute",
    top: 20,
    right: 20
  }
});

export default App;

Ao clicar no botão para exibir a câmera então:

Perceba que definimos um valor no state do componente Camera para usar como referência para o componente RNCamera.

No RNCamera pudemos notar algumas configurações:

type: Tipo da câmera (front/back)
autoFocus: Uso o foco da câmera automaticamente.
flashMode: Uso do flash.
androidCameraPermissionOptions: Configuração da caixinha de mensagem para pedir permissão de uso da câmera do celular.
captureAudio: Captura de áudio (usado em gravações de video).

Agora precisamos implementar a função que vai capturar a foto, vamos chamá-lo de onTakePicture e ele irá usar a valor de camera que está referenciando o RNCamera chamando o método takePictureAsync.

Essa função irá chamar o método takePictureAsync e colocar o valor dele que no caso é a foto capturada em um valor photo que vamos declarar lá no componente App para poder usar no quadrinho de foto.

Fica assim então:

import React, { useState } from "react";
import {
  Alert,
  Modal,
  View,
  Image,
  TouchableOpacity,
  StyleSheet
} from "react-native";

import Icon from "react-native-vector-icons/MaterialIcons";
import { RNCamera } from "react-native-camera";

import logo from "./assets/logo.png";

const Camera = ({ isVisible, onChangePhoto, onCloseCamera }) => {
  const [camera, setCamera] = useState();

  const onTakePicture = async () => {
    try {
      const { uri } = await camera.takePictureAsync({
        quality: 0.5,
        forceUpOrientation: true,
        fixOrientation: true,
        skipProcessing: true
      });
      onChangePhoto(uri);
    } catch (error) {
      Alert.alert("Erro", "Houve um erro ao tirar a foto.");
    }
  };

  return (
    <Modal animationType="slide" transparent={false} visible={isVisible}>
      <RNCamera
        ref={ref => setCamera(ref)}
        style={{ flex: 1 }}
        type={RNCamera.Constants.Type.back}
        autoFocus={RNCamera.Constants.AutoFocus.on}
        flashMode={RNCamera.Constants.FlashMode.off}
        androidCameraPermissionOptions={{
          title: "Permissão para usar a câmera",
          message: "Precisamos da sua permissão para usar a câmera.",
          buttonPositive: "Ok",
          buttonNegative: "Cancelar"
        }}
        captureAudio={false}
      >
        <Icon
          name="photo-camera"
          size={40}
          color={"#fff"}
          onPress={onTakePicture}
          style={styles.buttonTakePicture}
        />
        <Icon
          name="close"
          size={50}
          color={"#fff"}
          onPress={onCloseCamera}
          style={styles.buttonCloseCamera}
        />
      </RNCamera>
    </Modal>
  );
};

const App = () => {
  const [isCameraVisible, setIsCameraVisible] = useState(false);
  const [photo, setPhoto] = useState(null);

  const onChangePhoto = newPhoto => {
    setPhoto(newPhoto);
    setIsCameraVisible(false);
  };

  const onCloseCamera = () => {
    setIsCameraVisible(false);
  };

  return (
    <View style={styles.container}>
      <Image source={logo} style={styles.logo} />
      <View style={styles.photo}></View>
      <View style={styles.buttons}>
        <TouchableOpacity
          style={styles.button}
          onPress={() => {
            setIsCameraVisible(true);
          }}
        >
          <Icon name="camera-alt" size={40} color={"#f37272"} />
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={() => {}}>
          <Icon name="delete" size={40} color={"#f37272"} />
        </TouchableOpacity>
      </View>
      <Camera
        isVisible={isCameraVisible}
        onChangePhoto={onChangePhoto}
        onCloseCamera={onCloseCamera}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f37272"
  },
  logo: {
    alignSelf: "center",
    marginTop: 60
  },
  photo: {
    width: 300,
    height: 200,
    backgroundColor: "#fff",
    alignSelf: "center",
    marginTop: 80
  },
  buttons: {
    marginTop: 10,
    flexDirection: "row",
    justifyContent: "center"
  },
  button: {
    backgroundColor: "#fff",
    margin: 20,
    borderRadius: 150,
    width: 80,
    height: 80,
    alignItems: "center",
    justifyContent: "center"
  },
  buttonTakePicture: {
    flex: 0,
    alignSelf: "center",
    position: "absolute",
    bottom: 20
  },
  buttonCloseCamera: {
    flex: 0,
    position: "absolute",
    top: 20,
    right: 20
  }
});

export default App;

O método onChangePhoto está atualizando o estado de photo com a foto capturada pela câmera e setada la no componente Camera.

Assim o valor de photo é a foto atual capturada, com isso, podemos exibir ela no nosso componente quadrinho.

Para isso vamos atualizar o componente ImageBackground para exibir a foto, esse componente é importado da API do React Native da mesma forma que o Text, View, etc.

E para o botão de deletar a imagem, só precisamos setar o valor de photo para null assim limpamos o quadrinho.

O código final, fica assim então:

import React, { useState } from "react";
import {
  Alert,
  Modal,
  View,
  Image,
  ImageBackground,
  TouchableOpacity,
  StyleSheet
} from "react-native";

import Icon from "react-native-vector-icons/MaterialIcons";
import { RNCamera } from "react-native-camera";

import logo from "./assets/logo.png";

const Camera = ({ isVisible, onChangePhoto, onCloseCamera }) => {
  const [camera, setCamera] = useState();

  const onTakePicture = async () => {
    try {
      const { uri } = await camera.takePictureAsync({
        quality: 0.5,
        forceUpOrientation: true,
        fixOrientation: true,
        skipProcessing: true
      });
      onChangePhoto(uri);
    } catch (error) {
      Alert.alert("Erro", "Houve um erro ao tirar a foto.");
    }
  };

  return (
    <Modal animationType="slide" transparent={false} visible={isVisible}>
      <RNCamera
        ref={ref => setCamera(ref)}
        style={{ flex: 1 }}
        type={RNCamera.Constants.Type.back}
        autoFocus={RNCamera.Constants.AutoFocus.on}
        flashMode={RNCamera.Constants.FlashMode.off}
        androidCameraPermissionOptions={{
          title: "Permissão para usar a câmera",
          message: "Precisamos da sua permissão para usar a câmera.",
          buttonPositive: "Ok",
          buttonNegative: "Cancelar"
        }}
        captureAudio={false}
      >
        <Icon
          name="photo-camera"
          size={40}
          color={"#fff"}
          onPress={onTakePicture}
          style={styles.buttonTakePicture}
        />
        <Icon
          name="close"
          size={50}
          color={"#fff"}
          onPress={onCloseCamera}
          style={styles.buttonCloseCamera}
        />
      </RNCamera>
    </Modal>
  );
};

const App = () => {
  const [isCameraVisible, setIsCameraVisible] = useState(false);
  const [photo, setPhoto] = useState(null);

  const onChangePhoto = newPhoto => {
    setPhoto(newPhoto);
    setIsCameraVisible(false);
  };

  const onCloseCamera = () => {
    setIsCameraVisible(false);
  };

  return (
    <View style={styles.container}>
      <Image source={logo} style={styles.logo} />
      <View style={styles.photo}>
        <ImageBackground
          style={{ width: "100%", height: "100%" }}
          source={{ uri: photo }}
        />
      </View>
      <View style={styles.buttons}>
        <TouchableOpacity
          style={styles.button}
          onPress={() => {
            setIsCameraVisible(true);
          }}
        >
          <Icon name="camera-alt" size={40} color={"#f37272"} />
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.button}
          onPress={() => {
            setPhoto(null);
          }}
        >
          <Icon name="delete" size={40} color={"#f37272"} />
        </TouchableOpacity>
      </View>
      <Camera
        isVisible={isCameraVisible}
        onChangePhoto={onChangePhoto}
        onCloseCamera={onCloseCamera}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f37272"
  },
  logo: {
    alignSelf: "center",
    marginTop: 60
  },
  photo: {
    width: 300,
    height: 200,
    backgroundColor: "#fff",
    alignSelf: "center",
    marginTop: 80
  },
  buttons: {
    marginTop: 10,
    flexDirection: "row",
    justifyContent: "center"
  },
  button: {
    backgroundColor: "#fff",
    margin: 20,
    borderRadius: 150,
    width: 80,
    height: 80,
    alignItems: "center",
    justifyContent: "center"
  },
  buttonTakePicture: {
    flex: 0,
    alignSelf: "center",
    position: "absolute",
    bottom: 20
  },
  buttonCloseCamera: {
    flex: 0,
    position: "absolute",
    top: 20,
    right: 20
  }
});

export default App;

Conclusão

Utilizar a câmera do celular é uma tarefa bastante comum e requisitada para os desenvolvedores de aplicativos. Então aqui pudemos ter uma base de como fazer isso em React Native, utilizando um exemplo bem simples.

Agora deixa agente saber o que acho do conteúdo, por isso deixa aqui seu comentário, suas dúvidas e se deseja que façamos um exemplo mais elaborado como uma parte 2 desse tutorial onde poderemos incrementar a aplicação para gravar as fotos na pasta de imagens e acessar depois para listar a imagens capturadas, etc.

Não deixe de participar da nossa comunidade no Discord, lá podemos discutir sobre diversos assuntos relacionados a programação e os cursos do Dev Samurai, você vai poder encontrar com o pessoal da equipe Dev Samurai e também toda comunidade que participa e esta engajada em aprender a fazer aplicativos e discutir sobre programação, então segue o link:

Comunidade Dev Samurai no Discord.

Segue o link do repositório para você baixar o código: https://mautic.devsamurai.com.br/asset/11:tutorial-samuraicam

Valeu e até a próxima!

React Native Tutorials: Usando a Câmera do Celular