OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Expo Camera Cannot read property 'Type' of undefined

  • Thread starter Thread starter Emre
  • Start date Start date
E

Emre

Guest
Code:
import React, { useState, useEffect, useRef } from 'react';
import { SafeAreaView, View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { Camera } from 'expo-camera';

export default function HomePage() {
  const [hasCameraPermission, setHasCameraPermission] = useState(null);
  const cameraRef = useRef(null);

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      setHasCameraPermission(status === 'granted');
    })();
  }, []);

  const requestPermission = async () => {
    const { status } = await Camera.requestCameraPermissionsAsync();
    setHasCameraPermission(status === 'granted');
  };

  const takePicture = async () => {
    if (cameraRef.current) {
      try {
        const { uri } = await cameraRef.current.takePictureAsync();
        console.log('Picture taken:', uri);
      } catch (error) {
        console.error('Error taking picture:', error);
      }
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.cameraContainer}>
        {hasCameraPermission === null ? (
          <Text>Waiting for camera permission...</Text>
        ) : hasCameraPermission === false ? (
          <Text>Camera permission denied.</Text>
        ) : (
          <Camera
            style={styles.camera}
            type={Camera.Constants.Type.back}
            ref={cameraRef}
          />
        )}
      </View>
      <View style={styles.buttonContainer}>
        <TouchableOpacity style={styles.button} onPress={requestPermission}>
          <Text style={styles.buttonText}>Allow Permission</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={takePicture}>
          <Text style={styles.buttonText}>Take Picture</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  cameraContainer: {
    width: '100%',
    height: '70%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'black',
  },
  camera: {
    width: '100%',
    height: '100%',
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    width: '100%',
    marginTop: 20,
  },
  button: {
    backgroundColor: '#3ABEF9',
    paddingVertical: 15,
    paddingHorizontal: 30,
    borderRadius: 10,
  },
  buttonText: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 16,
  },
});

app.json

Code:
{
  "expo": {
    "name": "k",
    "slug": "k",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "plugins": [
      [
        "expo-camera",
        {
          "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera."
        }
      ]
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

In this code i see the "TypeError: Cannot read property 'Type' of undefined

This error is located at: in HomePage (created by App) in App (created by withDevTools(App)) in withDevTools(App) in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in main(RootComponent), js engine: hermes" this error

<pre><code>import React, { useState, useEffect, useRef } from 'react';
import { SafeAreaView, View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { Camera } from 'expo-camera';

export default function HomePage() {
const [hasCameraPermission, setHasCameraPermission] = useState(null);
const cameraRef = useRef(null);

useEffect(() => {
(async () => {
const { status } = await Camera.requestCameraPermissionsAsync();
setHasCameraPermission(status === 'granted');
})();
}, []);

const requestPermission = async () => {
const { status } = await Camera.requestCameraPermissionsAsync();
setHasCameraPermission(status === 'granted');
};

const takePicture = async () => {
if (cameraRef.current) {
try {
const { uri } = await cameraRef.current.takePictureAsync();
console.log('Picture taken:', uri);
} catch (error) {
console.error('Error taking picture:', error);
}
}
};

return (
<SafeAreaView style={styles.container}>
<View style={styles.cameraContainer}>
{hasCameraPermission === null ? (
<Text>Waiting for camera permission...</Text>
) : hasCameraPermission === false ? (
<Text>Camera permission denied.</Text>
) : (
<Camera
style={styles.camera}
type={Camera.Constants.Type.back}
ref={cameraRef}
/>
)}
</View>
<View style={styles.buttonContainer}>
<TouchableOpacity style={styles.button} onPress={requestPermission}>
<Text style={styles.buttonText}>Allow Permission</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={takePicture}>
<Text style={styles.buttonText}>Take Picture</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f0f0f0',
},
cameraContainer: {
width: '100%',
height: '70%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black',
},
camera: {
width: '100%',
height: '100%',
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
width: '100%',
marginTop: 20,
},
button: {
backgroundColor: '#3ABEF9',
paddingVertical: 15,
paddingHorizontal: 30,
borderRadius: 10,
},
buttonText: {
color: 'white',
fontWeight: 'bold',
fontSize: 16,
},
});

</code></pre>
<p>app.json</p>
<pre><code>{
"expo": {
"name": "k",
"slug": "k",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"userInterfaceStyle": "light",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"plugins": [
[
"expo-camera",
{
"cameraPermission": "Allow $(PRODUCT_NAME) to access your camera."
}
]
],
"ios": {
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#ffffff"
}
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}

</code></pre>
<p>In this code i see the "TypeError: Cannot read property 'Type' of undefined</p>
<p>This error is located at:
in HomePage (created by App)
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent), js engine: hermes" this error</p>
 

Latest posts

Top