Cannot capture photo with react-native-vision-camera

Question

import {Button} from '@rneui/base';
import React, {useState, useEffect, useRef} from 'react';
import {
View,
TextInput,
Text,
FlatList,
Modal,
TouchableOpacity,
Image,
StyleSheet,
} from 'react-native';
import {Camera, useCameraDevices} from 'react-native-vision-camera';

const ReportComponent = () => {
const [reports, setReports] = useState([]);
const [newReport, setNewReport] = useState('');
const [editingIndex, setEditingIndex] = useState(null);
const [isModalVisible, setIsModalVisible] = useState(false);
const [isCameraVisible, setIsCameraVisible] = useState(false);
// const [capturedImage, setCapturedImage] = useState(null);
const devices = useCameraDevices('wide-angle-camera');
const device = devices.back;
const mycam = useRef(null);
const [pics, setPics] = useState([]);
const [newPic, setNewPic] = useState('');
const [picIndex, setPicIndex] = useState(null);

const addReport = () => {
 if (newReport.trim() === '') {
   return;
 }

 if (editingIndex !== null) {
   // Editing existing report
   const updatedReports = [...reports];
   updatedReports[editingIndex] = newReport;
   setReports(updatedReports);
   setNewReport('');
   setEditingIndex(null);
 } else {
   // Adding new report
   setReports([...reports, newReport]);
   setNewReport('');
 }

 setIsModalVisible(false);
};

const addPic = () => {
 if (newPic.trim() === '') {
   return;
 }

 if (picIndex !== null) {
   // Editing existing pic
   const updatedPics = [...pics];
   updatedPics[picIndex] = newPic;
   setPics(updatedPics);
   setNewPic('');
   setPicIndex(null);
 } else {
   // Adding new report
   setPics([...pics, newPic]);
   setNewPic('');
 }

 setIsModalVisible(false);
};
const deleteReport = index => {
 const updatedReports = [...reports];
 updatedReports.splice(index, 1);
 setReports(updatedReports);
};

const editReport = index => {
 const reportToEdit = reports[index];
 setNewReport(reportToEdit);
 setEditingIndex(index);
 setIsModalVisible(true);
};

const toggleModal = () => {
 setIsModalVisible(!isModalVisible);
};

const toggleCamera = () => {
 setIsCameraVisible(!isCameraVisible);
 toggleModal();
};

const handleCapture = async () => {
 console.log('handlecapture run');
 if (mycam != null) {
   const photo = await mycam.current.takePhoto();
   console.log('CAMERAPIC:     ', photo.path);
   setNewPic(photo.path);
   addPic();
   setIsCameraVisible(false);
   toggleModal();
 }
};

return (
 <View style={{flex: 1}}>
   <Button title="Add Report" onPress={toggleModal} />

   <FlatList
     data={reports}
     renderItem={({item, index}) => (
       <View style={{flexDirection: 'row', alignItems: 'center'}}>
         <Text style={{flex: 1}}>{item}</Text>
         <Button title="Edit" onPress={() => editReport(index)} />
         <Button title="Delete" onPress={() => deleteReport(index)} />
       </View>
     )}
     keyExtractor={(item, index) => index.toString()}
   />

   <Modal visible={isModalVisible} animationType="slide" transparent={true}>
     <View
       style={{
         flex: 1,
         justifyContent: 'center',
         backgroundColor: 'rgba(0, 0, 0, 0.5)',
       }}>
       <View style={{margin: 20, backgroundColor: 'white', padding: 20}}>
         <TextInput
           placeholder="Enter report (max 10 lines)"
           value={newReport}
           onChangeText={setNewReport}
           multiline={true}
           numberOfLines={10}
           style={{height: 150, borderWidth: 1, padding: 10}}
         />

         <TouchableOpacity onPress={toggleCamera}>
           <Text
             style={{color: 'blue', textAlign: 'center', marginBottom: 10}}>
             Take Picture
           </Text>
         </TouchableOpacity>

         {/* {capturedImage && (
           <View style={{alignItems: 'center', marginBottom: 10}}>
             <Image
               source={{uri: capturedImage.uri}}
               style={{width: 200, height: 200}}
             />
           </View>
         )} */}

         <Button
           title={editingIndex !== null ? 'Update Report' : 'Add Report'}
           onPress={addReport}
         />

         <TouchableOpacity onPress={toggleModal} style={{marginTop: 10}}>
           <Text style={{color: 'blue', textAlign: 'center'}}>Cancel</Text>
         </TouchableOpacity>
         {console.log('PICS::::::', pics[0])}
       </View>
     </View>
   </Modal>

   {isCameraVisible && (
     <View style={StyleSheet.absoluteFill}>
       <Camera
         style={{flex: 1}}
         autoFocus="on"
         photo={true}
         device={device}
         isActive={isCameraVisible}
         ref={mycam}
       />
       <TouchableOpacity
         onPress={() => {
           handleCapture();
         }}
         style={{
           flex: 1,
           height: 50,
           width: 50,
           borderRadius: 30,
           backgroundColor: 'red',
           position: 'absolute',
           bottom: 50,
           alignSelf: 'center',
         }}></TouchableOpacity>
     </View>
   )}
   <View>
     <Image
       source={{uri: `file://${pics[0]}`}}
       style={{width: 100, height: 100}}
     />
   </View>
 </View>
);
};

export default ReportComponent;

I am trying to write an app that can create a report and take picture for that report , its working but I cannot make camera work in the above code the handleCapture function is not called at all when I press it. however I can see camera on my screen . there is nothing in the logs except when I run it in Xcode I see HNG RISK in purple font, what is it that I am doing wrong here

Answer 1

There seems to be a few issues:

Change onPress to this. Yours is not getting clicked at all.

onPress={handleCapture}



<TouchableOpacity
         onPress={
           handleCapture;
         }
         style={{
           flex: 1,
           height: 50,
           width: 50,
           borderRadius: 30,
           backgroundColor: 'red',
           position: 'absolute',
           bottom: 50,
           alignSelf: 'center',
         }}>
     *Naming this would also better*
</TouchableOpacity>