Expo-camera hangs while recording video in production (apk file)

Question

I am using expo-camera to record videos for just 5 seconds, it works on expo-go as well as works on development build. But in production the camera screen just hangs and nothing happens later on.

Note: All the permissions are given and i have also tested capturing pictures it works in all modes: local, development-build (expo) and production build (apk).

Camera code used:

  const toggleRecording = async () => {
    if (!optionsValue || !locationValue) {
      alert("Please select sub folder and location values first.");
      return;
    }
    setIsRecording((current) => !current);

    if (isRecording) {
      // Stop recording
      camera.current?.stopRecording();
    } else {
      // Start recording
      const maxDuration = 5;
      camera.current
        ?.recordAsync({
          maxDuration: maxDuration,
          codec: "hvc1",
        })
        .then((video) => {
          setIsRecording(false);
          alert(`Video saved for duration of ${maxDuration} seconds`);
          console.log("video", video);
          setFiles({
            ...files,
            [optionsValue + locationValue + generateRandomString(6)]: video,
          });
        })
        .catch((error) => {
          alert("Error recording video");
          alert(error);
        });
    }
  };

<CameraView
  ref={camera}
  style={styles.camera}
  facing={facing}
  enableTorch={isTorchOn}
  mode="video"
  zoom={zoom}
  active={true}
  mute={true}
  videoQuality="720p"
  videoBitrate={1000000}
  videoStabilizationMode="auto"
  onCameraReady={() => {
    console.log("Camera ready");
  }}
>
  <View
    style={{
      position: "absolute",
      bottom: -20,
      left: "0%",
      paddingLeft: 10,
      paddingBottom: 0,
      width: "100%",
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center",
      flexDirection: "column",
    }}
  >
    <View
      style={{
        width: "100%",
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        flexDirection: "row",
        paddingBottom: 10,
      }}
    >
      <View>
        <Text style={{ color: "white" }}>© Copyright EcoCam</Text>
        <Text style={{ color: "white" }}>
          {currentTime?.toLocaleString()}
        </Text>
        <Text style={{ color: "white" }}>
          Latitude: {location?.coords.latitude},
        </Text>
        <Text style={{ color: "white" }}>
          Longitude: {location?.coords.longitude}{" "}
        </Text>
      </View>

      <TouchableOpacity
        style={styles.locationButton}
        onPress={() => {
          router.push(
            ("/map?lat=" +
              location?.coords.latitude +
              "&lon=" +
              location?.coords.longitude +
              "&session=" +
              session) as Href
          );
        }}
      >
        <Ionicons name="location" size={20} color="white" />
      </TouchableOpacity>
    </View>

    <View
      style={{
        width: "100%",
        display: "flex",
        justifyContent: "space-between",
        alignItems: "flex-start",
        flexDirection: "row",
      }}
    >
      <View style={{ margin: 10 }}>
        <TouchableOpacity
          style={{
            padding: 10,
            backgroundColor: "white",
            borderRadius: 10,
            borderWidth: 1,
          }}
          onPress={() => setOptionsVisible(true)}
        >
          <Text>{optionsValue || "Select sub folder name"}</Text>
        </TouchableOpacity>

        <Modal
          visible={optionsVisible}
          transparent
          animationType="slide"
        >
          <View
            style={{
              flex: 1,
              justifyContent: "center",
              alignItems: "center",
              backgroundColor: "rgba(0,0,0,0.5)",
            }}
          >
            <View
              style={{
                backgroundColor: "white",
                padding: 20,
                borderRadius: 10,
                width: "80%",
              }}
            >
              <FlatList
                data={options}
                keyExtractor={(item) => item.value}
                renderItem={({ item }) => (
                  <TouchableOpacity
                    style={{ padding: 10, borderBottomWidth: 1 }}
                    onPress={() => {
                      setOptionsValue(item.value);
                      setOptionsVisible(false);
                    }}
                  >
                    <Text>{item.value + " - " + item.label}</Text>
                  </TouchableOpacity>
                )}
                style={{ maxHeight: 200 }} // Limits to around 5 items
              />
              <TouchableOpacity
                onPress={() => setOptionsVisible(false)}
                style={{ marginTop: 10, alignSelf: "center" }}
              >
                <Text style={{ color: "red" }}>Cancel</Text>
              </TouchableOpacity>
            </View>
          </View>
        </Modal>
      </View>
      <View style={{ margin: 10 }}>
        <TouchableOpacity
          style={{
            padding: 10,
            backgroundColor: "white",
            borderRadius: 10,
            borderWidth: 1,
          }}
          onPress={() => setLocationVisible(true)}
        >
          <Text>{locationValue || "Select location"}</Text>
        </TouchableOpacity>

        <Modal
          visible={locationVisible}
          transparent
          animationType="slide"
        >
          <View
            style={{
              flex: 1,
              justifyContent: "center",
              alignItems: "center",
              backgroundColor: "rgba(0,0,0,0.5)",
            }}
          >
            <View
              style={{
                backgroundColor: "white",
                padding: 20,
                borderRadius: 10,
                width: "80%",
              }}
            >
              <FlatList
                data={locationOptions}
                keyExtractor={(item) => item.value}
                renderItem={({ item }) => (
                  <TouchableOpacity
                    style={{ padding: 10, borderBottomWidth: 1 }}
                    onPress={() => {
                      setLocationValue(item.value);
                      setLocationVisible(false);
                    }}
                  >
                    <Text>{item.label}</Text>
                  </TouchableOpacity>
                )}
                style={{ maxHeight: 200 }} // Limits to around 5 items
              />
              <TouchableOpacity
                onPress={() => setLocationVisible(false)}
                style={{ marginTop: 10, alignSelf: "center" }}
              >
                <Text style={{ color: "red" }}>Cancel</Text>
              </TouchableOpacity>
            </View>
          </View>
        </Modal>
      </View>
    </View>

    <TouchableOpacity
      style={{
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        width: "95%",
        paddingVertical: 15,
        borderRadius: 10,
        backgroundColor: "#4CAF50",
        marginBottom: 20,
      }}
      onPress={async () => {
        await AsyncStorage.setItem("files", JSON.stringify(files));

        router.push(`/export?session=${session}`);
      }}
    >
      <Text style={{ color: "white" }}>End Session</Text>
    </TouchableOpacity>
    <TouchableOpacity
      style={{
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        width: "95%",
        paddingVertical: 15,
        borderRadius: 10,
        borderColor: "#4CAF50",
        borderWidth: 1,
        marginBottom: 20,
      }}
      onPress={async () => {
        await AsyncStorage.setItem("files", JSON.stringify(files));
        router.push(`/camera?session=${session}`);
      }}
    >
      <Text style={{ color: "white" }}>Switch to photo mode</Text>
    </TouchableOpacity>
  </View>
</CameraView>