diff --git a/App.tsx b/App.tsx
index e3a81b1..9bdcb74 100644
--- a/App.tsx
+++ b/App.tsx
@@ -7,6 +7,7 @@ import SignMessage from './components/SignMessage';
import HomeScreen from './components/HomeScreen';
import SignRequest from './components/SignRequest';
import InvalidPath from './components/InvalidPath';
+import QRScanner from './components/QRScanner';
import { StackParamsList } from './types';
@@ -58,6 +59,13 @@ const App = (): React.JSX.Element => {
headerBackVisible: false,
}}
/>
+
);
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index 4558d99..fa040e2 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -1,6 +1,7 @@
+
+
+ {
+ navigation.navigate('QRScanner');
+ }}>
+
+ Connect Wallet
+
+
diff --git a/components/QRScanner.tsx b/components/QRScanner.tsx
new file mode 100644
index 0000000..bd85501
--- /dev/null
+++ b/components/QRScanner.tsx
@@ -0,0 +1,107 @@
+import React, { useEffect, useState } from 'react';
+import { Alert, StyleSheet, View, AppState } from 'react-native';
+import { Text, Button } from 'react-native-paper';
+import {
+ Camera,
+ useCameraDevice,
+ useCameraPermission,
+ useCodeScanner,
+} from 'react-native-vision-camera';
+
+import { useNavigation } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+
+import { StackParamsList } from '../types';
+
+const QRScanner = () => {
+ const navigation =
+ useNavigation>();
+
+ const { hasPermission, requestPermission } = useCameraPermission();
+
+ const [isActive, setIsActive] = useState(AppState.currentState === 'active');
+ const device = useCameraDevice('back');
+ const [isScanning, setScanning] = useState(true);
+ const codeScanner = useCodeScanner({
+ codeTypes: ['qr'],
+ onCodeScanned: codes => {
+ if (isScanning) {
+ codes.forEach(code => {
+ if (code.value) {
+ Alert.alert(`Scanned: ${code.value}`, undefined, [
+ {
+ text: 'OK',
+ onPress: () => {
+ navigation.navigate('Laconic');
+ },
+ },
+ ]);
+
+ setScanning(false);
+ }
+ });
+ }
+ },
+ });
+
+ useEffect(() => {
+ const handleAppStateChange = (newState: string) => {
+ setIsActive(newState === 'active');
+ };
+
+ AppState.addEventListener('change', handleAppStateChange);
+
+ if (!hasPermission) {
+ requestPermission();
+ }
+ }, [hasPermission, isActive, requestPermission]);
+
+ if (!hasPermission) {
+ return (
+
+ No Camera Permission!
+
+
+ );
+ }
+
+ if (!device) {
+ return (
+
+ No Camera Selected!
+
+ );
+ }
+
+ return (
+
+ {isActive ? (
+
+ ) : (
+ No Camera Selected!
+ )}
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ camera: {
+ width: 400,
+ height: 500,
+ borderRadius: 50,
+ overflow: 'hidden',
+ },
+});
+
+export default QRScanner;
diff --git a/package.json b/package.json
index c17f2b3..8528009 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
"react-native-safe-area-context": "^4.9.0",
"react-native-screens": "^3.29.0",
"react-native-vector-icons": "^10.0.3",
+ "react-native-vision-camera": "^3.9.0",
"text-encoding-polyfill": "^0.6.7"
},
"devDependencies": {
diff --git a/types.ts b/types.ts
index 3fafac2..43b38ad 100644
--- a/types.ts
+++ b/types.ts
@@ -5,6 +5,7 @@ export type StackParamsList = {
| { network: string; address: string; message: string }
| undefined;
InvalidPath: undefined;
+ QRScanner: undefined;
};
export type Account = {
diff --git a/yarn.lock b/yarn.lock
index 432e0ec..c35962f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6604,6 +6604,11 @@ react-native-vector-icons@^10.0.3:
prop-types "^15.7.2"
yargs "^16.1.1"
+react-native-vision-camera@^3.9.0:
+ version "3.9.0"
+ resolved "https://registry.yarnpkg.com/react-native-vision-camera/-/react-native-vision-camera-3.9.0.tgz#6a96a6cbad53c2db84d671c388b250327681a553"
+ integrity sha512-q0HejFTS56s5DXWHZhlWLLZMKn/8OXALrqET+FySPIKskwYEdJ5rOV2aDlD6hlo67qCNFGUIMZWGFFc9L2os1g==
+
react-native@0.73.3:
version "0.73.3"
resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.73.3.tgz#aae18b4c6da84294c1f8e1d6446b46c887bf087c"