feat: Show Alert when a code got scanned

This commit is contained in:
Marc Rousavy 2023-11-10 13:22:35 +01:00
parent 533bc6c291
commit ca6760d6ee
No known key found for this signature in database
GPG Key ID: 83BEF0F19E8F5321

View File

@ -1,7 +1,7 @@
import * as React from 'react' import * as React from 'react'
import { useState } from 'react' import { useCallback, useRef, useState } from 'react'
import { StyleSheet, View } from 'react-native' import { Alert, AlertButton, Linking, StyleSheet, View } from 'react-native'
import { useCameraDevice, useCodeScanner } from 'react-native-vision-camera' import { Code, useCameraDevice, useCodeScanner } from 'react-native-vision-camera'
import { Camera } from 'react-native-vision-camera' import { Camera } from 'react-native-vision-camera'
import { CONTENT_SPACING, CONTROL_BUTTON_SIZE, SAFE_AREA_PADDING } from './Constants' import { CONTENT_SPACING, CONTROL_BUTTON_SIZE, SAFE_AREA_PADDING } from './Constants'
import { useIsForeground } from './hooks/useIsForeground' import { useIsForeground } from './hooks/useIsForeground'
@ -12,6 +12,26 @@ import type { Routes } from './Routes'
import type { NativeStackScreenProps } from '@react-navigation/native-stack' import type { NativeStackScreenProps } from '@react-navigation/native-stack'
import { useIsFocused } from '@react-navigation/core' import { useIsFocused } from '@react-navigation/core'
const showCodeAlert = (value: string, onDismissed: () => void): void => {
const buttons: AlertButton[] = [
{
text: 'Close',
style: 'cancel',
onPress: onDismissed,
},
]
if (value.startsWith('http')) {
buttons.push({
text: 'Open URL',
onPress: () => {
Linking.openURL(value)
onDismissed()
},
})
}
Alert.alert('Scanned Code', value, buttons)
}
type Props = NativeStackScreenProps<Routes, 'CodeScannerPage'> type Props = NativeStackScreenProps<Routes, 'CodeScannerPage'>
export function CodeScannerPage({ navigation }: Props): React.ReactElement { export function CodeScannerPage({ navigation }: Props): React.ReactElement {
// 1. Use a simple default back camera // 1. Use a simple default back camera
@ -25,12 +45,23 @@ export function CodeScannerPage({ navigation }: Props): React.ReactElement {
// 3. (Optional) enable a torch setting // 3. (Optional) enable a torch setting
const [torch, setTorch] = useState(false) const [torch, setTorch] = useState(false)
// 4. Initialize the Code Scanner to scan QR codes and Barcodes // 4. On code scanned, we show an aler to the user
const isShowingAlert = useRef(false)
const onCodeScanned = useCallback((codes: Code[]) => {
console.log(`Scanned ${codes.length} codes:`, codes)
const value = codes[0]?.value
if (value == null) return
if (isShowingAlert.current) return
showCodeAlert(value, () => {
isShowingAlert.current = false
})
isShowingAlert.current = true
}, [])
// 5. Initialize the Code Scanner to scan QR codes and Barcodes
const codeScanner = useCodeScanner({ const codeScanner = useCodeScanner({
codeTypes: ['qr', 'ean-13'], codeTypes: ['qr', 'ean-13'],
onCodeScanned: (codes, frame) => { onCodeScanned: onCodeScanned,
console.log(codes, frame)
},
}) })
return ( return (