Criando preview de fotos

Dando continuidade, agora criaremos uma galeria de fotos, com as últimas capturas realizadas.

Realizando as alterações no estado

Agora não queremos mais armazenar uma única foto, mas sim um conjunto. Por isso, ao declarar o estado vamos iniciá-lo agora com um array vazio.

const [fotos, setFoto] = useState([])

E na hora de setar a foto, teremos que pegar o valor anterior e adicionar a nova foto. Veja abaixo:

setFoto([...fotos, photo])

Exibindo uma lista de imagens

É interessante sabermos não apenas como exibir uma única foto, mas também saber como exibir um conjunto de imagens capturadas. Para isso, usaremos um componente no React Native já ensinado nesse curso: o ScrollView.

Veja abaixo um exemplo de uso desse componente:

<ScrollView horizontal={true}>
     {
        fotos.map((foto, index) => <Image key={index} style={styles.imgPreview} source={{ uri: foto && foto.uri }}></Image>)
     }
</ScrollView>

Organizando o código

Após feitas as funcionalidades, temos de organizar nosso código para que o aplicativo tenha uma boa aparência e consigamos navegar por ele de maneira efetiva, conquistando uma boa experiência de usuário:

Para realizar a estilização e as alterações efetuadas, acompanhe a aula e implemente o código abaixo:

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

export default function App() {

  let camera;

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

  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)
    }
  }

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

  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}>
      <View style={styles.viewCamera}>
        <Camera ref={ref => camera = ref} type={type} style={styles.camera}>
          <View style={{ margin: 20 }}>
            <Button title="Alternar" onPress={() => flipCamera()}></Button>
            <Button title="Tirar foto" onPress={() => takePicture()}></Button>
          </View>
        </Camera>
      </View>
      <View style={styles.preview}>
        <ScrollView horizontal={true}>
          {
            fotos.map((foto, index) => <Image key={index} style={styles.imgPreview} source={{ uri: foto && foto.uri }}></Image>)
          }
        </ScrollView>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  camera: {
    flex: 1
  },
  viewCamera: {
    flex: 6,
    backgroundColor: 'pink'
  },
  preview: {
    flex: 2,
    flexDirection: 'row',
  },
  imgPreview: {
    margin: 1,
    width: 150,
  }
});