react-native-compressor: [Unhandled promise rejection: TypeError: null is not an object (evaluating 'NativeVideoCompressor.compress')]

Current behavior

Hi, when trying to compress a video in my Expo Managed App, I’m getting:

[Unhandled promise rejection: TypeError: null is not an object (evaluating ‘NativeVideoCompressor.compress’)] at node_modules/react-native-compressor/src/Video/index.tsx:162:48 in compress at node_modules/react-native-compressor/src/Video/index.tsx:119:12 in compress at helpers.js:6:25 in CompressVideo at helpers.js:4:17 in CompressVideo at App.js:40:24 in requestMultiplePermissions

Expected behavior

I would expect a new object based on the video which would be compressed, but at the time, getting just null.

Platform

• Android
• [] iOS, no. For iOS, I’m getting another error which is:

Invariant Violation: Native module cannot be null. at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError at node_modules/@react-native/polyfills/error-guard.js:49:36 in ErrorUtils.reportFatalError at node_modules/metro-runtime/src/polyfills/require.js:204:6 in guardedLoadModule at http://192.168.1.65:19000/index.bundle?platform=ios&dev=true&hot=false&minify=false:121655:3 in global code

Invariant Violation: “main” has not been registered. This can happen if:

• Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
• A module failed to load due to an error and AppRegistry.registerComponent wasn’t called. at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError at node_modules/@react-native/polyfills/error-guard.js:49:36 in ErrorUtils.reportFatalError

Not sure what that is all about, so trying to work on that one.

React Native Version:

“react-native”: “0.64.3”,

React Native Compressor Version

“react-native-compressor”: “^1.5.1”

Reproducible Steps And Demo:

I created a new app with expo init. Ran > expo install react-native-compressor Validated that this was present on the app.json:

{ “name”: “my app”, “plugins”: [“react-native-compressor”] }

And ran: expo prebuild

Here is the code of the test app:

App.js

import { StatusBar } from “expo-status-bar”; import { StyleSheet, Text, View, Button } from “react-native”; import * as MediaLibrary from “expo-media-library”; import React, { useEffect, useRef, useState } from “react”; import * as FileSystem from “expo-file-system”; import { Video, AVPlaybackStatus } from “expo-av”; import { color } from “react-native/Libraries/Components/View/ReactNativeStyleAttributes”; import helpers from “./helpers”;

export default function App() { const [hasMediaLibraryPermission, setHasMediaLibraryPermission] = useState(null); const [obtainedStoreMedia, setObtainedStoreMedia] = useState([]); const video = React.useRef(null); const [status, setStatus] = React.useState({}); const [fileSize, setFileSize] = useState(“”); const [compressedFileSize, setCompressedFileSize] = useState(“”);

useEffect(() => { requestMultiplePermissions(); }, []);

const requestMultiplePermissions = async () => { const mediaLibraryStatus = await MediaLibrary.requestPermissionsAsync(); setHasMediaLibraryPermission(mediaLibraryStatus.status === “granted”);

//Grabs the first 1000 media items from the user's local storage.
if (mediaLibraryStatus.status === "granted") {
  const getStoreMedia = await MediaLibrary.getAssetsAsync({
    first: 5,
    //mediaType: [MediaLibrary.MediaType.photo, MediaLibrary.MediaType.video],
    mediaType: [MediaLibrary.MediaType.video],
    sortBy: [MediaLibrary.SortBy.modificationTime],
  });

  let library = "assets";
  let currentStoreMedia = getStoreMedia[library];

  setObtainedStoreMedia(currentStoreMedia[0].uri);
  console.log(await helpers.CompressVideo(currentStoreMedia[0].uri));

  let fileSize = await FileSystem.getInfoAsync(currentStoreMedia[0].uri);
  let fileSizeToInt = parseInt(fileSize.size);
  let fileSizeToMB = fileSizeToInt * 0.000001;
  let truncatedFileSize = fileSizeToMB.toFixed(2);

  setFileSize(truncatedFileSize);

  //setCompressedFileSize(await helpers.CompressVideo());
}

};

return ( <View style={styles.container}> <Text style={{ color: “white” }}>COMPRESS TEST APP</Text> <StatusBar style="auto" /> <Video ref={video} style={{ height: 390, width: 240, borderWidth: 2, borderColor: “black”, }} source={{ uri: obtainedStoreMedia, }} useNativeControls={true} resizeMode=“contain” isLooping onPlaybackStatusUpdate={(status) => setStatus(() => status)} /> <Text style={{ color: “white” }}> {" “} {“FILE SIZE: " + fileSize + " MB”}{” “} </Text> <Text style={{ color: “yellow” }}> {” “} {“COMPRESSED FILE SIZE: " + compressedFileSize + " MB”}{” "} </Text> </View> ); }

const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: “black”, alignItems: “center”, justifyContent: “center”, }, });

helpers.js

import { Video } from “react-native-compressor”;

const helpers = { CompressVideo: async function (uri) { console.log(uri); const result = await Video.compress( uri, { compressionMethod: “auto”, }, (progress) => { if (backgroundMode) { console.log("Compression Progress: ", progress); } else { setCompressingProgress(progress); } } );

return result;

}, };

export default helpers;

Of course if there is anything else I can add here for testing and all, do let me know. Thank you for all the help!