Can't call camera takePictureAsync

Hey, i’m trying take a picture with vue-native

I have tried everything i can think of but every time i try to access the camera object i get undefined.

<template>
    <view class="camera">
        <view class="container">
            <button :on-press="openCamera" title="openCamera"></button>
        </view>
        <camera v-if="cameraSettings.show" :ref="camera" class="camera" :type="cameraSettings.type"/>
        <button :on-press="takePic" title="Snap"></button>
    </view>
</template>

import {Camera, Permissions} from "expo";
    import axios from 'axios';

    export default {
        data() {
            return {
                cameraSettings: {
                    show: false,
                    flash: 'off',
                    zoom: 0,
                    autoFocus: 'on',
                    type: Camera.Constants.Type.back,
                    whiteBalance: 'auto',
                    ratio: '16:9',
                    ratios: [],
                    barcodeScanning: false,
                    faceDetecting: false,
                    faces: [],
                    newPhotos: false,
                    permissionsGranted: false,
                    pictureSize: undefined,
                    pictureSizes: [],
                    pictureSizeId: 0,
                    showGallery: false,
                    showMoreOptions: false,
                },
            };
        },
        methods: {
            openCamera() {
                if (!this.cameraSettings.permissionsGranted) {
                    Permissions.askAsync(Permissions.CAMERA)
                        .then(status => {
                            this.cameraSettings.permissionsGranted = status.status === "granted";
                            this.cameraSettings.show = true;
                        }).catch((err) => {
                        this.cameraSettings.show = false;
                        console.log(err);
                    });
                } else {
                    this.cameraSettings.show = !this.cameraSettings.show;
                }
            },
            takePic(){
                console.log(this.camera); //undefined
                console.log(this.$refs.camera); //undefined
                console.log(Camera.takePictureAsync()); //undefined is not a function
                console.log(this.$refs.camera.takePictureAsync()); //undefined is not a function
            }
        },
        components: {Camera},
    };

.container {
        flex: 1;
        background-color: white;
        align-items: center;
        justify-content: center;
    }

    .camera {
        flex: 1;
    }

[neeraj-singh47]

@nniicc Seems like you’ve used incorrect ref format while declaration. It should be just ref="camera". You need to remove the : before ref since it binds the variable with data.

[myhexa]

Found the answer, <camera v-if="cameraSettings.show" :ref="camera" class="camera" :type="cameraSettings.type"/> should be <Camera v-if="cameraSettings.show" ref="camera" class="camera" :type="cameraSettings.type"/> typo on Camera and also remove : on ref (sorry for bad english)

Pak Tut Widi Memang Master

liak ajaann…