Tirando uma foto

Após utilizar a câmera e visualizar a imagem, queremos agora capturar efetivamente a foto.

Referenciando a câmera

Primeiramente, iremos precisar de uma variável que referencie a câmera. Isso atráves de uma propriedade do componente.

Veja o exemplo abaixo:

let camera;

E no componente:

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

Função de captura de foto

Quando for realizada a captura da imagem, precisaremos armazenar essa informação em um estado para não a perdermos. Então, em seu código, crie o estado abaixo:

const [foto, setFoto] = useState(null)

Para fazer a captura efetiva da foto, precisaremos implementar um nova função. Então, acompanhando a aula, crie a função abaixo:

async function takePicture() {
    if (!camera) return
    const photo = await camera.takePictureAsync()
    setFoto(photo)
 }

Agora, já temos a informação salva e ela pode ser usada para diversas ações, como, por exemplo: exibição, envio para servidores etc.

Exibindo a imagem capturada

Para exibir a captura, vamos utilizar o componente Image do react native, passando o tamanho que a imagem deve ter e no source a uri da imagem capturada.

Veja abaixo:

<Image style={{ width: 100, height: 100 }} source={{ uri: foto && foto.uri }}></Image>

E para captura será implementado um botão como abaixo:

<Button title="Tira Foto" onPress={() => takePicture()}></Button>

Assim, ao final, já será possível tirar a foto e exibi-la no aplicativo.