diff --git a/assets/camera-flip-icon.png b/assets/camera-flip-icon.png new file mode 100644 index 00000000..de7a69df Binary files /dev/null and b/assets/camera-flip-icon.png differ diff --git a/components/QrScanner.tsx b/components/QrScanner.tsx index 50e48ccd..d38395b1 100644 --- a/components/QrScanner.tsx +++ b/components/QrScanner.tsx @@ -2,7 +2,7 @@ import React, { useContext, useEffect, useState } from 'react'; import Icon from 'react-native-vector-icons/MaterialIcons'; import { Camera } from 'expo-camera'; import { BarCodeEvent, BarCodeScanner } from 'expo-barcode-scanner'; -import { Linking, TouchableOpacity, View } from 'react-native'; +import { Linking, TouchableOpacity, View, Image } from 'react-native'; import { Theme } from './ui/styleUtils'; import { Column, Button, Text, Centered } from './ui'; import { GlobalContext } from '../shared/GlobalContext'; @@ -15,7 +15,7 @@ export const QrScanner: React.FC = (props) => { const { appService } = useContext(GlobalContext); const [hasPermission, setHasPermission] = useState(null); const [scanned, setScanned] = useState(false); - const [type, setType] = useState(Camera.Constants.Type.back); + const [cameraType, setCameraType] = useState(Camera.Constants.Type.back); const isActive = useSelector(appService, selectIsActive); @@ -65,7 +65,7 @@ export const QrScanner: React.FC = (props) => { barcodeTypes: [BarCodeScanner.Constants.BarCodeType.qr], }} onBarCodeScanned={scanned ? undefined : onBarcodeScanned} - type={type} + type={cameraType} /> {props.title && ( @@ -77,6 +77,18 @@ export const QrScanner: React.FC = (props) => { {props.title} )} + + { + setCameraType( + cameraType === Camera.Constants.Type.back + ? Camera.Constants.Type.front + : Camera.Constants.Type.back + ); + }}> + + + ); diff --git a/components/ui/themes/DefaultTheme.ts b/components/ui/themes/DefaultTheme.ts index 1cae8e6c..eb0e9e2f 100644 --- a/components/ui/themes/DefaultTheme.ts +++ b/components/ui/themes/DefaultTheme.ts @@ -963,6 +963,7 @@ export const DefaultTheme = { ProfileIcon: require('../../../assets/placeholder-photo.png'), MosipSplashLogo: require('../../../assets/icon.png'), MosipLogo: require('../../../assets/mosip-logo.png'), + CameraFlipIcon: require('../../../assets/camera-flip-icon.png'), DomainWarningLogo: require('../../../assets/domain-warning.png'), WarningLogo: require('../../../assets/warningLogo.png'), OtpLogo: require('../../../assets/otp-mobile-logo.png'), diff --git a/components/ui/themes/PurpleTheme.ts b/components/ui/themes/PurpleTheme.ts index 94cbb51e..e62d9bc3 100644 --- a/components/ui/themes/PurpleTheme.ts +++ b/components/ui/themes/PurpleTheme.ts @@ -965,6 +965,7 @@ export const PurpleTheme = { ProfileIcon: require('../../../purpleAssets/profile_icon.png'), MosipSplashLogo: require('../../../assets/icon.png'), MosipLogo: require('../../../assets/mosip-logo.png'), + CameraFlipIcon: require('../../../assets/camera-flip-icon.png'), DomainWarningLogo: require('../../../assets/domain-warning.png'), WarningLogo: require('../../../assets/warningLogo.png'), OtpLogo: require('../../../purpleAssets/otp-mobile-logo.png'),