Have you ever seen apps like Math Papa, or PhotoMath, the place the digicam captures a selected portion in view on the display screen?
I wish to implement the identical however in my case the ScanningArea View.
I’ve tried completely different strategies which hasn’t been actually working, can anybody please assist me, I will extremely respect it, Here is my code:
import { StyleSheet, Textual content, TouchableOpacity, View } from 'react-native'
import React, { useEffect, useState } from 'react'
import Header from '../elements/math_scanner/Header'
import { Digital camera, CameraType } from 'expo-camera';
import * as Permissions from 'expo-permissions';
import { Ionicons } from '@expo/vector-icons';
import SnapPictureBtn from '../elements/math_scanner/SnapPictureBtn';
import { useNavigation } from '@react-navigation/native';
import { Picture } from 'react-native-elements';
export default perform MathScannerScreen() {
const navigation = useNavigation();
const [type, setType] = useState(CameraType.again);
const [hasPermission, setHasPermission] = useState(null);
const [camera, setCamera] = useState(null);
const [imageUri, setImageUri] = useState(null);
const askPermission = async () => {
const { standing } = await Permissions.askAsync(Permissions.CAMERA);
setHasPermission(standing === 'granted');
}
useEffect(() => {
askPermission();
}, []);
if (hasPermission === null) {
askPermission();
return <View />;
}
if (hasPermission === false) {
return <Textual content>No entry to digicam</Textual content>;
}
const takePicture = async () => {
if (digicam) {
const choices = { high quality: 0.5, base64: true };
const { uri } = await digicam.takePictureAsync(choices);
console.log('unique picture uri:', uri);
setImageUri(uri)
}
};
return (
<View model={types.container}>
{imageUri ? (
<Picture supply={{ uri: imageUri }} model={{ width: 300, peak: 250 }}
resizeMode="comprise" zoom={0} />
: (
<Digital camera model={types.digicam} sort={sort} ref={(ref) => setCamera(ref)}>
<View model={types.overlay} />
<Header />
<View model={{width: '100%', alignItems: 'heart', justifyContent: 'heart', marginVertical: 30}}>
<View model={types.textContainer}>
<Textual content model={types.textual content}>Take an image of your math downside</Textual content>
</View>
<View model={types.scanningArea}>
<Ionicons title="ios-add" measurement={30} coloration="#fff" />
</View>
</View>
<View model={{marginTop: 30}} />
<SnapPictureBtn onPress={takePicture} />
<TouchableOpacity onPress={()=> navigation.goBack()} model={types.calcBtn}>
<Ionicons title="ios-calculator-sharp" measurement={30} coloration="#000" />
</TouchableOpacity>
</Digital camera>
)}
</View>
)
}
const types = StyleSheet.create({
container: {
flex: 1,
alignItems: 'heart',
justifyContent: 'heart',
},
digicam: {
width: '100%',
peak: '100%',
alignItems: 'heart',
justifyContent: 'heart',
backgroundColor: '#fff'
},
overlay: {
backgroundColor: 'rgba(0, 0, 0, 0.2)',
width: '100%',
peak: '100%',
place: 'absolute',
high: 0
},
scanningArea: {
width: 350,
peak: 150,
alignItems: 'heart',
justifyContent: 'heart',
borderRadius: 10,
borderWidth: 1,
borderColor: '#fff',
},
textContainer: {
paddingVertical: 20
},
textual content: {
fontWeight: 'daring',
coloration: '#fff'
},
calcBtn: {
backgroundColor: '#fff',
padding: 10,
borderRadius: 50
}
})