Video Recording (expo) is not working on production/apk file

Question

I'm using an expo-camera for video recording in my react native app. Everything is working great in development but when I generate an APK file so the camera is not recording the video. I have used the useRef hook is my code which triggers when the start recording button is clicked and fires the startRecord() function which uses const recordedVideo = await cameraRef.current.recordAsync();. What i think that maybe cameraRef.current.recordAsync() is not working in the production.

Any Suggestions or solution would be very helpful.

Thanks!

**Video Recording Component**

import React, { useState, useEffect, useRef } from "react";
import { View, Text, TouchableOpacity, StyleSheet, Alert } from "react-native";
// packages
import { Camera } from "expo-camera";
import * as FileSystem from "expo-file-system";
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from "react-native-responsive-screen";

// Functional Component
const Recordvideo = (props) => {
  // Ref
  const cameraRef = useRef(null);
  // States
  const [video, setVideo] = useState(null);
  const [recording, setRecording] = useState(false);
  const [hasPermission, setHasPermission] = useState(null);

    // getting camera permission
    useEffect(() => {
      getPermission();
    }, [getPermission]);

    const getPermission = async () => {
      const { status } = await Camera.requestPermissionsAsync();
      if (status === "granted") {
        setHasPermission(true);
      }
    };

    // start/stop video recording
    const toogleRecord = () => {
      if (recording) {
        stopRecord();
      } else {
        startRecord();
      }
    };

    // start recording
    const startRecord = async () => {
      if (cameraRef.current) {
        setRecording(true);
        const recordedVideo = await cameraRef.current.recordAsync();
        setVideo(recordedVideo);
      }
    };

    // stop recording
    const stopRecord = async () => {
      setRecording(false);
      cameraRef.current.stopRecording();
    };
  
    // saving recorded video
    const saveVideo = async () => {
      let fileInfo = await FileSystem.getInfoAsync(video.uri);
      if (fileInfo.size <= 5242880) {
        props.navigation.push("Post", {
          VIDEOURL: video.uri,
          VIDEOID: 1,
        });
      } else {
        Alert.alert("Video too large please upload a shorter video");
        props.navigation.goBack();
      }
    };

  // checking camera permission
  if (hasPermission === false) {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>No access to camera</Text>
      </View>
    );
  }

  // return statement
  return (
    <View style={styles.responsiveBox}>
      <Camera
        ref={cameraRef}
        style={{
          justifyContent: "flex-end",
          alignItems: "center",
          flex: 1,
          width: "100%",
        }}
      >
        {video && (
          <TouchableOpacity
            onPress={saveVideo}
            style={{
              padding: 20,
              width: "100%",
              backgroundColor: "#fff",
            }}
          >
            <Text style={{ textAlign: "center", color: "#000" }}>Complete</Text>
          </TouchableOpacity>
        )}
        <TouchableOpacity
          onPress={toogleRecord}
          style={{
            padding: 20,
            width: "100%",
            backgroundColor: recording ? "#ef4f84" : "#4fef97",
          }}
        >
          <Text style={{ textAlign: "center" }}>
            {recording ? "Stop" : "Record"}
          </Text>
        </TouchableOpacity>
      </Camera>
    </View>
  );
};

// styles
const styles = StyleSheet.create({
  responsiveBox: {
    width: wp("100%"),
    height: hp("100%"),
    alignItems: "center",
    justifyContent: "center",
  },
});

export default Recordvideo;

Answer 1

Instead of taking useRef take it as state for example: const [cameraRef , SetCameraRef] = useState() And call ref inside Camera component like <Camera ref = {setCameraRef(ref)} ..../>