89 lines
2.9 KiB
TypeScript
89 lines
2.9 KiB
TypeScript
import * as React from 'react'
|
|
import { useState } from 'react'
|
|
import { StyleSheet, View } from 'react-native'
|
|
import { useCameraDevice, useCodeScanner } from 'react-native-vision-camera'
|
|
import { Camera } from 'react-native-vision-camera'
|
|
import { CONTENT_SPACING, CONTROL_BUTTON_SIZE, SAFE_AREA_PADDING } from './Constants'
|
|
import { useIsForeground } from './hooks/useIsForeground'
|
|
import { StatusBarBlurBackground } from './views/StatusBarBlurBackground'
|
|
import { PressableOpacity } from 'react-native-pressable-opacity'
|
|
import IonIcon from 'react-native-vector-icons/Ionicons'
|
|
import type { Routes } from './Routes'
|
|
import type { NativeStackScreenProps } from '@react-navigation/native-stack'
|
|
import { useIsFocused } from '@react-navigation/core'
|
|
|
|
type Props = NativeStackScreenProps<Routes, 'CodeScannerPage'>
|
|
export function CodeScannerPage({ navigation }: Props): React.ReactElement {
|
|
// 1. Use a simple default back camera
|
|
const device = useCameraDevice('back')
|
|
|
|
// 2. Only activate Camera when the app is focused and this screen is currently opened
|
|
const isFocused = useIsFocused()
|
|
const isForeground = useIsForeground()
|
|
const isActive = isFocused && isForeground
|
|
|
|
// 3. (Optional) enable a torch setting
|
|
const [torch, setTorch] = useState(false)
|
|
|
|
// 4. Initialize the Code Scanner to scan QR codes and Barcodes
|
|
const codeScanner = useCodeScanner({
|
|
codeTypes: ['qr', 'ean-13'],
|
|
onCodeScanned: (codes, frame) => {
|
|
console.log(codes, frame)
|
|
},
|
|
})
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{device != null && (
|
|
<Camera
|
|
style={StyleSheet.absoluteFill}
|
|
device={device}
|
|
isActive={isActive}
|
|
codeScanner={codeScanner}
|
|
torch={torch ? 'on' : 'off'}
|
|
/>
|
|
)}
|
|
|
|
<StatusBarBlurBackground />
|
|
|
|
<View style={styles.rightButtonRow}>
|
|
<PressableOpacity style={styles.button} onPress={() => setTorch(!torch)} disabledOpacity={0.4}>
|
|
<IonIcon name={torch ? 'flash' : 'flash-off'} color="white" size={24} />
|
|
</PressableOpacity>
|
|
</View>
|
|
|
|
{/* Back Button */}
|
|
<PressableOpacity style={styles.backButton} onPress={navigation.goBack}>
|
|
<IonIcon name="chevron-back" size={35} color="black" />
|
|
</PressableOpacity>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: 'black',
|
|
},
|
|
button: {
|
|
marginBottom: CONTENT_SPACING,
|
|
width: CONTROL_BUTTON_SIZE,
|
|
height: CONTROL_BUTTON_SIZE,
|
|
borderRadius: CONTROL_BUTTON_SIZE / 2,
|
|
backgroundColor: 'rgba(140, 140, 140, 0.3)',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
rightButtonRow: {
|
|
position: 'absolute',
|
|
right: SAFE_AREA_PADDING.paddingRight,
|
|
top: SAFE_AREA_PADDING.paddingTop,
|
|
},
|
|
backButton: {
|
|
position: 'absolute',
|
|
left: SAFE_AREA_PADDING.paddingLeft + CONTENT_SPACING,
|
|
top: SAFE_AREA_PADDING.paddingTop + CONTENT_SPACING,
|
|
},
|
|
})
|