Expo Camera uri not save to the state

Question

import React from "react";
import { View, Text, Image, TouchableOpacity } from "react-native";
import { useEffect, useState, useRef } from "react";
import { Camera } from "expo-camera";
import * as MediaLibrary from "expo-media-library";
import { MaterialIcons } from "@expo/vector-icons";
import { SafeAreaView } from "react-native-safe-area-context";
export default function Scan() {
  let cameraRef = useRef(null);
  const [hasCameraPermission, setCameraPermission] = useState();
  const [hasMediaPermission, setMediaPermission] = useState();
  const [photo, setPhoto] = useState(null);
  useEffect(() => {
    (async () => {
      const cameraPermission = await Camera.requestCameraPermissionsAsync();
      const mediaPermission = await MediaLibrary.requestPermissionsAsync();
      setCameraPermission(cameraPermission.status === "granted");
      setMediaPermission(mediaPermission.status === "granted");
    })();
  }, []);

  if (hasCameraPermission === undefined) {
    return <Text>Requesting</Text>;
  } else if (!hasCameraPermission) {
    return <Text>denide</Text>;
  }

  const takePic = async () => {
    if (cameraRef) {
      try {
        const data = await cameraRef.current.takePictureAsync();
        setPhoto(data.uri);
        console.log(data.uri);
        console.log(photo);
      } catch (e) {
        console.log(e);
      }
    }
  };
  if (photo) {
    return (
      <SafeAreaView>
        <Image source={{ uri: photo }} style={{ flex: 1 }} />
      </SafeAreaView>
    );
  }
  return (
    <View className="flex flex-col gap-10">
      <Camera className="h-[500px]" ref={cameraRef}></Camera>
      <View className="flex flex-row items-center justify-evenly">
        <MaterialIcons name="photo" size={30} color="black" />
        <TouchableOpacity
          onPress={takePic}
          className="w-20 h-20 bg-gray-300 rounded-full bor flex justify-center items-center text-gray-600"
        >
          <MaterialIcons name="camera" size={50} color="black" />
        </TouchableOpacity>
        <MaterialIcons name="flash-on" size={30} color="black" />
      </View>
    </View>
  );
}

camera works nicely. when i take a photo console.log(data.uri) will print the uri but console.log(photo) print null. but photo got some value anyway and if(photo) return the jsx code. if i use text between SafeAreaView tag it will work. I used useRef for photo but it not worked.

const data = await cameraRef.current.takePictureAsync();
setPhoto(data.uri);
console.log(data.uri);
console.log(photo);

Please let me know what other information I can provide, if necessary. Thanks in advance!

Answer 1

its actually not a problem of states. Image tag needs height and width to show image. after adding styles. its worked

<Image source={{ uri: photo }} style={{ width: 400, height: 400 }} />