diff --git a/package/example/src/CodeScannerPage.tsx b/package/example/src/CodeScannerPage.tsx index e19b9f5..b0867fe 100644 --- a/package/example/src/CodeScannerPage.tsx +++ b/package/example/src/CodeScannerPage.tsx @@ -1,7 +1,7 @@ import * as React from 'react' -import { useState } from 'react' -import { StyleSheet, View } from 'react-native' -import { useCameraDevice, useCodeScanner } from 'react-native-vision-camera' +import { useCallback, useRef, useState } from 'react' +import { Alert, AlertButton, Linking, StyleSheet, View } from 'react-native' +import { Code, 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' @@ -12,6 +12,26 @@ import type { Routes } from './Routes' import type { NativeStackScreenProps } from '@react-navigation/native-stack' 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 export function CodeScannerPage({ navigation }: Props): React.ReactElement { // 1. Use a simple default back camera @@ -25,12 +45,23 @@ export function CodeScannerPage({ navigation }: Props): React.ReactElement { // 3. (Optional) enable a torch setting 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({ codeTypes: ['qr', 'ean-13'], - onCodeScanned: (codes, frame) => { - console.log(codes, frame) - }, + onCodeScanned: onCodeScanned, }) return (