Unable to run with Expo 44

[frankcalise]

Hello, I'm following the installation instructions and trying to set up the provided Example component. I receive the error below, seems renimated related, have you run into this?

TypeError: this.InnerNativeModule.configureProps is not a function. (In 'this.InnerNativeModule.configureProps(uiProps, nativeProps)', 'this.InnerNativeModule.configureProps' is undefined)
at node_modules\react-native\Libraries\LogBox\LogBox.js:149:8 in registerError  
at node_modules\react-native\Libraries\LogBox\LogBox.js:60:8 in errorImpl       
at node_modules\react-native\Libraries\LogBox\LogBox.js:34:4 in console.error   
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error    
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.22:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:274417: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\LogBox\LogBox.js:149:8 in registerError  
at node_modules\react-native\Libraries\LogBox\LogBox.js:60:8 in errorImpl       
at node_modules\react-native\Libraries\LogBox\LogBox.js:34:4 in console.error   
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error    
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\react-native\Libraries\BatchedBridge\MessageQueue.js:367:8 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112:4 in callFunctionReturnFlushedQueue

babel.config.js:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["react-native-reanimated/plugin"],
  };
};

VideoScreen.tsx

import * as React from "react";
import { Dimensions, StyleSheet } from "react-native";
import VideoPlayer from "expo-reanimated-av-player";
import { SafeAreaView } from "react-native-safe-area-context";
import { useSharedValue } from "react-native-reanimated";
import { StackScreenProps } from "@react-navigation/stack";
import { UserStackParamList } from "../navigation/UserStack";

const width = Dimensions.get("window").width;
const VIDEO_DEFAULT_HEIGHT = width;

type Props = StackScreenProps<UserStackParamList, "Video">;

const VideoScreen: React.FC<Props> = ({ navigation }) => {
  const videoHeight = useSharedValue(0);
  const isFullScreen = useSharedValue(false);

  return (
    <SafeAreaView style={styles.container}>
      <VideoPlayer
        source={{ uri: "YOUTUBE_URL_HERE" }}
        headerBarTitle={`fullscreen title`}
        onToggleAutoPlay={(state: boolean) => {
          console.log(`onToggleAutoPlay state: ${state}`);
        }}
        videoDefaultHeight={VIDEO_DEFAULT_HEIGHT}
        videoHeight={videoHeight}
        resizeMode="cover"
        isFullScreen={isFullScreen}
        onTapBack={() => {
          console.log("onTapBack");
        }}
        onTapMore={() => {
          console.log("onTapMore");
        }}
      />
    </SafeAreaView>
  );
};

export default VideoScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

package.json deps

 "dependencies": {
    "@react-native-async-storage/async-storage": "~1.15.0",
    "@react-navigation/native": "^6.0.8",
    "@react-navigation/stack": "^6.1.1",
    "dotenv": "^16.0.0",
    "expo": "~44.0.0",
    "expo-av": "~10.2.0",
    "expo-constants": "~13.0.1",
    "expo-keep-awake": "~10.0.1",
    "expo-reanimated-av-player": "^0.2.0",
    "expo-status-bar": "~1.2.0",
    "firebase": "^9.6.10",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-elements": "^3.4.2",
    "react-native-gesture-handler": "~2.1.0",
    "react-native-reanimated": "~2.3.1",
    "react-native-safe-area-context": "3.3.2",
    "react-native-web": "0.17.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.64.12",
    "typescript": "~4.3.5"
  },

[alantoa]

Hi, @frankcalise! looks like react-native-reanimated version error. repalce "react-native-reanimated": "~2.3.1", to "react-native-reanimated": "2.3.1", try again!

[frankcalise]

Hi @alantoa - I have updated that as you said but am still experiencing the same issue unfortunately. I notice this in the yarn.lock file even after removing it and running yarn install again:

expo-reanimated-av-player@^0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/expo-reanimated-av-player/-/expo-reanimated-av-player-0.2.0.tgz#2d8ffbd4c833bf5947e29e702101deca5dbeeeef"
  integrity sha512-z4sY3hqkywpKPWR0iWYxFIcrJWMg2OcQ09A6FE8wvCbxQgGYs3kEMYJJ+XgxeDbIZdltKTzwzyzI7LStE3eelA==
  dependencies:
    "@react-navigation/core" "^6.2.1"
    expo-screen-orientation "~4.1.1"
    lottie-react-native "^5.0.1"
    react-native-awesome-slider "^2.0.4"
    react-native-gesture-handler "~2.3.2"
    react-native-reanimated "~2.6.0"
    react-native-safe-area-context "^4.2.4"

react-native-reanimated@2.3.1:
  version "2.3.1"
  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.3.1.tgz#c7abad48f9e6c84610b0d5e270088ecd61750382"
  integrity sha512-nzjVqwkB8eeyPKT2KoiA9EEz17ZMFSGMoOTC17Z9b5nE2Z4ZHjHM5EKhY0TlwzXFUuJAE9PhOfxF0wIO/maZSA==
  dependencies:
    "@babel/plugin-transform-object-assign" "^7.10.4"
    "@types/invariant" "^2.2.35"
    invariant "^2.2.4"
    lodash.isequal "^4.5.0"
    mockdate "^3.0.2"
    react-native-screens "^3.4.0"
    string-hash-64 "^1.0.3"

react-native-reanimated@~2.6.0:
  version "2.6.0"
  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.6.0.tgz#500497339bec2d18fd4979dc07c831997c9aee82"
  integrity sha512-TG7u0d1iTx6BRQXhUp9DKEW/9K6169qiX9vweC+qOcVffGSZvjDZ+OyyI0faXIDvcf5LRHAud3mNtO3ANaHRhQ==
  dependencies:
    "@babel/plugin-transform-object-assign" "^7.16.7"
    "@types/invariant" "^2.2.35"
    invariant "^2.2.4"
    lodash.isequal "^4.5.0"
    react-native-screens "^3.11.1"
    setimmediate "^1.0.5"
    string-hash-64 "^1.0.3"

Seems like there are two versions of the same package?

[alantoa]

@frankcalise Hi! I also use Expo 44, and it works well! https://github.com/alantoa/expo-reanimated-av-player/blob/main/example/package.json

But I don't really recommend you to use the Expo version, because the expo-av crashing is very serious and expo-screen-orientation locking the initial orientation is not supported. these are Expo's flaws. I'm using react-native-reanimated-player in my own Expo project. Although react-native-video also has problems, the current performance is better than expo-av.

[frankcalise]

Alright thanks - maybe I'll start by cloning the example and try to fit it into my app better.

[hirbod]

@alantoa what kind of crashes do you have with expo-av? Anyway, I think that all known crash reasons (mainly because exAV queue vs main thread + audio session deactivation forcing lags because of being a sync task) have been resolved with the current expo-av version 11.2.3+

[alantoa]

@hirbod

1. If I drag the video progress bar quickly, it crashes. I'm not sure if it's fixed now.
2. use expo-av I need to pair with expo-screen-orientation, It does not support locking orientation when first opened App.(This is the main reason, I need lock orientation when AppdidFinishLaunchingWithOptions)
3. There are too few APIs in expo-av, I need onSeek and need etc.(This is not the main reason)

[hirbod]

The fast seeking issue should be fixed. And setting a really low threshold for seekingPositionMillis will also allow for very fine positioning setting. But I am honestly not sure which API could miss, everything you need should be there. You could use a custom dev client though when you need another orientation library. And we could also raise tickets when something is still missing to get support for this

[alantoa]

@hirbod yeah maybe it can be solved, but now I don't have any video needs yet. I will check again when expo-av supports the Fabric

[l2aelba]

Also Expo 48 please @alantoa