Alternando entre as câmeras

O nosso aplicativo já está utilizando a câmera. Agora vamos fazer com que ele possa alternar entre a câmera traseira e frontal, geralmente presentes na maioria dos dispositivos móveis atuais.

Criando e utilizando um estado

Inicialmente iremos criar um estado que vai armazenar o tipo da câmera (frontal ou traseira) e setá-lo para iniciar com a câmera traseira por padrão.

const [type, setType] = useState(Camera.Constants.Type.back)

Após isso, iremos utilizar o estado em uma propriedade enviada ao componente, a propriedade type.

 <Camera type={type} style={styles.camera}></Camera>

Alternando câmeras

Para alternar as câmeras, iremos criar um botão que, ao ser clicado, executará uma função que altera o estado type.

Veja a função abaixo:

async function flipCamera() {
    if (type === Camera.Constants.Type.back) {
      setType(Camera.Constants.Type.front)
    } else {
      setType(Camera.Constants.Type.back)
    }
  }

Ao final da aula, seu código deve ficar como abaixo:

import { Camera } from 'expo-camera';
import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

export default function App() {

  const [hasPermission, setHasPermission] = useState(null)
  const [type, setType] = useState(Camera.Constants.Type.back)

  async function requestPermission() {
    const { status } = await Camera.requestPermissionsAsync()
    setHasPermission(status === 'granted')
  }

  async function flipCamera() {
    if (type === Camera.Constants.Type.back) {
      setType(Camera.Constants.Type.front)
    } else {
      setType(Camera.Constants.Type.back)
    }
  }

  useEffect(() => {
    requestPermission()
  }, [])

  if (hasPermission == null) {
    return <View></View>
  }

  if (hasPermission === false) {
    return <View><Text>Não foi possível acessar a câmera</Text></View>
  }

  return (
    <View style={styles.container}>
      <Camera type={type} style={styles.camera}></Camera>
      <Button title="Alternar" onPress={() => flipCamera()}></Button>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  camera: {
    width: 400,
    height: 400
  }
});