react-native-vision-camera/example/src/Splash.tsx
2021-02-19 18:17:37 +01:00

74 lines
2.1 KiB
TypeScript

import React, { useEffect, useState } from 'react';
import { StyleSheet, View, Text, Image } from 'react-native';
import { Camera, CameraPermissionStatus } from 'react-native-vision-camera';
export default function Splash() {
const [
cameraPermissionStatus,
setCameraPermissionStatus,
] = useState<CameraPermissionStatus>("not-determined");
const [
microphonePermissionStatus,
setMicrophonePermissionStatus,
] = useState<CameraPermissionStatus>("not-determined");
useEffect(() => {
const checkPermissions = async () => {
console.log(`Checking Permission status...`);
let [cameraPermission, microphonePermission] = await Promise.all([
Camera.getCameraPermissionStatus(),
Camera.getMicrophonePermissionStatus(),
]);
console.log(
`Check: CameraPermission: ${cameraPermission} | MicrophonePermission: ${microphonePermission}`
);
if (cameraPermission !== "authorized")
cameraPermission = await Camera.requestCameraPermission();
if (microphonePermission !== "authorized")
microphonePermission = await Camera.requestMicrophonePermission();
console.log(
`Request: CameraPermission: ${cameraPermission} | MicrophonePermission: ${microphonePermission}`
);
setCameraPermissionStatus(cameraPermission);
setMicrophonePermissionStatus(microphonePermission);
};
checkPermissions();
}, []);
return (
<View style={styles.container}>
<Image source={require('../../img/11.png')} style={styles.banner} />
<Text style={styles.welcome}>Welcome to{'\n'}Vision Camera.</Text>
<Text>Camera Permission: {cameraPermissionStatus}</Text>
<Text>Camera Permission: {microphonePermissionStatus}</Text>
</View>
);
}
const styles = StyleSheet.create({
welcome: {
fontSize: 38,
fontWeight: 'bold',
maxWidth: '80%',
},
banner: {
position: 'absolute',
opacity: 0.4,
bottom: 0,
left: 0,
},
container: {
flex: 1,
backgroundColor: 'white',
},
box: {
width: 60,
height: 60,
marginVertical: 20,
},
});