Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'camera.takePictureAsync') React-Native expo-camera

Question

I am trying to create a function that will access my device's camera, and will allow me to take a picture, but I get the above error. I modeled this similar to requesting access to the camera roll and it works fine, but I cannot get it to work for the camera.

What may be causing this? Below is some of my code:

import * as ImagePicker from 'expo-image-picker' //I am using expo
import {Camera} from 'expo-camera'  

export default function Photo(){

// Image Picker function start

useEffect(() => {
(async ()=> {
   if (Platform.OS != 'web'){
      const ( status !== 'granted') {
      if(status !== 'granted) {
      alert('Camera roll required to upload photo from your library');
   }
 }
})();
},[]);

//Image Picker function end

const camera = useRef(null) //added this
const takePicture = async () => { // added this



useEffect(() => {
    (async () => {
        if (Platform.OS !== 'web'){
        const { status1 } = await Camera.requestPermissionsAsync();
            if (status1 !== 'granted'){
            alert('Camera required to take a photo');
            }
} //added this
        },
    })();
}, [])


}

<Camera //added this
  ref = { camera }
  onGoogleVisionBarcodesDetected = {({barcodes}) => {
       console.log(barcodes)
   }}
 /> //added this

<View style = {[ styles.button, {justifyContent: 'center',  borderRadius: 20, backgroundColor: '#fff', paddingTop: 10, width: width*0.5, alignItems: 'center' } ]}>                 
                <TouchableOpacity 
                    color='#fff'
                    onPress = { ()=> takePicture () }
                    >

                <Text style = {[ styles.button, {}]}>Take Photo </Text>
                </TouchableOpacity>


            </View>

Answer 1

This might help

import React, { useRef } from 'react'
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
import { RNCamera } from 'react-native-camera'


function PlayWithCamera() {

    const camera = useRef(null);

    const takePicture = async () => {
        const result1 = await camera.takePictureAsync();
        ....
    };

    return (
        <View style={styles.container}>
            <RNCamera
                ref={camera}
                .....
                onGoogleVisionBarcodesDetected={({ barcodes }) => {
                    console.log(barcodes)
                }}
            />
            <View ... >                 
                <TouchableOpacity 
                    onPress={() => takePicture() } // change here
                >

                ......
                </TouchableOpacity>


            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: 'black',
    },
    preview: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    capture: {
        flex: 0,
        backgroundColor: '#fff',
        borderRadius: 5,
        padding: 15,
        paddingHorizontal: 20,
        alignSelf: 'center',
        margin: 20,
    },
})

export default PlayWithCamera