TypeError: Cannot read property 'getConstants' of null [Component Stack]

어플에서 카메라 기능을 구현하려고 하는데 카메라에 대한 Constants 값이 계속 null로 나와 카메라 기능이 구현이 되지 않는 에러가 발생했다.

 

이 문제를 해결하기 위해 여러 웹사이트를 뒤져봤는데 명확한 해답이 나오지 않았어서 해당 내용을 정리 한다.

 

Warning: TypeError: Cannot read property 'CameraDevices' of undefined

위에 문제와 카메라에대한 정의를 읽어 오지 않는 문제가 동시에 나왔다.

 

스택오버플로나, 깃허브 이슈 등에서 해당 문제들을 찾아봤지만 여러 방법을 사용해봤지만 해결되지 않았다.

 

 

네이티브 0.76

vision-carmera 4.6.4

카메라 라이브러리는

https://react-native-vision-camera.com/

 

1. 해당 라이브러리에 맞는 Info.plist, Podfile 네이티브 버젼에 맞게 다시 작성 

2.npx,react-native clean 을 통해 cocopod,npm, pod, native 의 cache 제거

3. xcode에서 앱이름.xcworkspace를 빌드 이때 Schema는 Debug

4. npm start or npx react-native run-ios 로 어플을 실행

 

이렇게 진행을 하니 해당 문제가 해결되었습니다. 

계속 네이트브에서 해당 라이브러리를 찾지 못하는 에러가 발생했었고, 위에 와 같은 과정을 통해 해당 문제를 해결했습니다. 

import React, {useState, useEffect, useRef} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Alert,
  Platform,
} from 'react-native';
import {
  Camera,
  useCameraDevice,
  useCameraDevices,
  useCameraPermission,
} from 'react-native-vision-camera';
import PermissionUtil from '../../utils/PermissionUtil'

const CameraScreen = () => {
  const [hasPermission, setHasPermission] = useState(false);

  const device = useCameraDevice('back');

  // const device = devices.back; // 후면 카메라 
  const cameraRef = useRef<Camera>(null); // 카메라 참조
  const { requestPermission } = useCameraPermission()

  useEffect(() => {
    const checkPermission = async () => {
      const status = await requestPermission();
      setHasPermission(status);
    };
    checkPermission();
  }, []);


  const takePicture = async () => {
    if (cameraRef.current) {
      try {
        const photo = await cameraRef.current.takePhoto();

      } 
      catch (err) {
        console.log(err);
      }
    }
  };

  if (!hasPermission) {
    return (
      <View style={styles.permissionContainer}>
        <Text>카메라 권한이 필요합니다.</Text>
        <TouchableOpacity onPress={() => PermissionUtil.cmmReqCameraPermission()}>
          <Text style={styles.permissionButton}>권한 요청</Text>
        </TouchableOpacity>
      </View>
    );
  }

  if (!device) {
    return (
      <View style={styles.container}>
        <Text> 사용할 수 있는 카메라 장치가 없습니다.</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>

      <Camera
        ref={cameraRef}
        device={device}
        isActive={true}
        photo={true} // 사진 촬영 가능 설정
        style={StyleSheet.absoluteFill}
      />


      <View style={styles.captureContainer}>
        <TouchableOpacity onPress={takePicture} style={styles.captureButton}>
          <Text style={styles.captureText}>📸 촬영</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'black',
  },
  permissionContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  permissionButton: {
    marginTop: 10,
    color: 'blue',
    fontSize: 16,
  },
  captureContainer: {
    position: 'absolute',
    bottom: 30,
    width: '100%',
    alignItems: 'center',
  },
  captureButton: {
    backgroundColor: 'white',
    padding: 15,
    borderRadius: 50,
  },
  captureText: {
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default CameraScreen;

 

해당 코드는 카메라 기능 코드 입니다.