railbird/react-native-vision-camera
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update Splash.tsx

Browse Source
This commit is contained in:
Marc Rousavy 2021-02-19 18:33:35 +01:00
parent e1d041644a
commit 2e2baddffb
1 changed files with 46 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
example/src/Splash.tsx
View File

@ -1,10 +1,11 @@
import React, { useEffect, useState } from 'react'; import React, { useCallback, useEffect, useState } from 'react';
import { StyleSheet, View, Text, Image } from 'react-native'; import { StyleSheet, View, Text, Image } from 'react-native';
import { Navigation, NavigationFunctionComponent } from 'react-native-navigation';
import { Camera, CameraPermissionStatus } from 'react-native-vision-camera'; import { Camera, CameraPermissionStatus } from 'react-native-vision-camera';
import { SAFE_AREA_PADDING } from './Constants'; import { CONTENT_SPACING, SAFE_AREA_PADDING } from './Constants';
export default function Splash() { export const Splash: NavigationFunctionComponent = ({ componentId }) => {
const [ const [
cameraPermissionStatus, cameraPermissionStatus,
setCameraPermissionStatus, setCameraPermissionStatus,
@ -14,6 +15,20 @@ export default function Splash() {
setMicrophonePermissionStatus, setMicrophonePermissionStatus,
] = useState<CameraPermissionStatus>("not-determined"); ] = useState<CameraPermissionStatus>("not-determined");
const requestMicrophonePermission = useCallback(async () => {
console.log('Requesting microphone permission...');
const permission = await Camera.requestMicrophonePermission();
console.log(`Microphone permission status: ${permission}`);
setMicrophonePermissionStatus(permission);
}, []);
const requestCameraPermission = useCallback(async () => {
console.log('Requesting camera permission...');
const permission = await Camera.requestCameraPermission();
console.log(`Camera permission status: ${permission}`);
setCameraPermissionStatus(permission);
}, []);
useEffect(() => { useEffect(() => {
const checkPermissions = async () => { const checkPermissions = async () => {
console.log(`Checking Permission status...`); console.log(`Checking Permission status...`);
@ -24,13 +39,6 @@ export default function Splash() {
console.log( console.log(
`Check: CameraPermission: ${cameraPermission} | MicrophonePermission: ${microphonePermission}` `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); setCameraPermissionStatus(cameraPermission);
setMicrophonePermissionStatus(microphonePermission); setMicrophonePermissionStatus(microphonePermission);
}; };
@ -38,14 +46,27 @@ export default function Splash() {
checkPermissions(); checkPermissions();
}, []); }, []);
useEffect(() => {
if (cameraPermissionStatus === 'authorized' && microphonePermissionStatus === 'authorized') {
Navigation.push(componentId, {
component: { name: 'Home' }
})
}
}, []);
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Image source={require('../../img/11.png')} style={styles.banner} /> <Image source={require('../../img/11.png')} style={styles.banner} />
<Text style={styles.welcome}>Welcome to{'\n'}Vision Camera.</Text> <Text style={styles.welcome}>Welcome to{'\n'}Vision Camera.</Text>
<View style={styles.permissionsContainer}>
<Text>Camera Permission: {cameraPermissionStatus}</Text> {cameraPermissionStatus !== 'authorized' && (
<Text>Camera Permission: {microphonePermissionStatus}</Text> <Text style={styles.permissionText}>Vision Camera needs <Text style={styles.bold}>Camera permission</Text>. <Text style={styles.hyperlink} onPress={requestCameraPermission}>Grant</Text></Text>
)}
{microphonePermissionStatus !== 'authorized' && (
<Text style={styles.permissionText}>Vision Camera needs <Text style={styles.bold}>Microphone permission</Text>. <Text style={styles.hyperlink} onPress={requestMicrophonePermission}>Grant</Text></Text>
)}
</View>
</View> </View>
); );
} }
@ -67,9 +88,17 @@ const styles = StyleSheet.create({
backgroundColor: 'white', backgroundColor: 'white',
...SAFE_AREA_PADDING ...SAFE_AREA_PADDING
}, },
box: { permissionsContainer: {
width: 60, marginTop: CONTENT_SPACING *2
height: 60, },
marginVertical: 20, permissionText: {
fontSize: 17,
},
hyperlink: {
color: '#007aff',
fontWeight: 'bold',
},
bold: {
fontWeight: 'bold',
}, },
}); });