I get Invariant Violation error when trying to start the camera

I am trying to use the camera to record a video and I was following the code in here: how to record video

But I get this error when using it: Error

The only change I made to the file was related to the permission, so here is the final code:

import React, { Component } from "react";

import { View, Text, TouchableOpacity } from "react-native";

import { Camera, MediaLibrary } from "expo";

import * as Permissions from 'expo-permissions';

class MyCam extends Component {

  state = {

    video: null,

    picture: null,

    recording: false

  };

  _saveVideo = async () => {

    const { video } = this.state;

    const asset = await MediaLibrary.createAssetAsync(video.uri);

    if (asset) {

      this.setState({ video: null });

    }

  };

  _StopRecord = async () => {

    this.setState({ recording: false }, () => {

      this.cam.stopRecording();

    });

  };

  _StartRecord = async () => {

    if (this.cam) {

      this.setState({ recording: true }, async () => {

        const video = await this.cam.recordAsync();

        this.setState({ video });

      });

    }

  };

  toogleRecord = () => {

    const { recording } = this.state;

    if (recording) {

      this._StopRecord();

    } else {

      this._StartRecord();

    }

  };

  render() {

    const { recording, video } = this.state;

    return (

      <Camera

        ref={cam => (this.cam = cam)}

        style={{

          justifyContent: "flex-end",

          alignItems: "center",

          flex: 1,

          width: "100%"

        }}

      >

        {video && (

          <TouchableOpacity

            onPress={this._saveVideo}

            style={{

              padding: 20,

              width: "100%",

              backgroundColor: "#fff"

            }}

          >

            <Text style={{ textAlign: "center" }}>save</Text>

          </TouchableOpacity>

        )}

        <TouchableOpacity

          onPress={this.toogleRecord}

          style={{

            padding: 20,

            width: "100%",

            backgroundColor: recording ? "#ef4f84" : "#4fef97"

          }}

        >

          <Text style={{ textAlign: "center" }}>

            {recording ? "Stop" : "Record"}

          </Text>

        </TouchableOpacity>

      </Camera>

    );

  }

}

class RecVideo extends Component {

  state = {

    showCamera: false

  };

  _showCamera = async () => {

    const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);

    if (status === "granted") {

      this.setState({ showCamera: true });

    }

  };

  render() {

    const { showCamera } = this.state;

    return (

      <View

        style={{

          justifyContent: "center",

          alignItems: "center",

          flex: 1,

          width: "100%"

        }}

      >

        {showCamera ? (

          <MyCam />

        ) : (

          <TouchableOpacity onPress={this._showCamera}>

            <Text> Show Camera </Text>

          </TouchableOpacity>

        )}

      </View>

    );

  }

}

export default RecVideo;

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.