Getting error while opening <Video /> from react-native-video plugin

[divyangmistry]

we want to create an tv app to play youtube video.... and Getting this error while opening <Video /> from react-native-video plugin.

code we used : <Video source={{ uri: embedURL }} // Can be a URL or a local file. fullscreen={true} />

Steps to reproduce the behavior:

1. rnv run -p androidtv
2. TypeError: Cannot read property 'Constants' of null This error is located at: in Video (at screenMyPage.js:84) in RCTView (at screenMyPage.js:78) in RCTView (at ScrollView.js:1041) in RCTScrollView (at ScrollView.js:1181) in ScrollView (at screenMyPage.js:49) in RCTView (at screenMyPage.js:48) in ScreenMyPage (at SceneView.tsx:98) in StaticContainer in StaticContainer (at SceneView.tsx:89) in EnsureSingleNavigator (at SceneView.tsx:88) in SceneView (at useDescriptors.tsx:125) in RCTView (at SceneView.tsx:92) in SceneView (at TabView.tsx:181) in RCTView (at createAnimatedComponent.js:217) in AnimatedComponent (at Pager.tsx:780) in PanGestureHandler (at Pager.tsx:769) in Pager (at TabView.tsx:75) in RCTView (at TabView.tsx:133) in TabView (at MaterialTopTabView.tsx:48) in MaterialTopTabView (at createMaterialTopTabNavigator.tsx:41) in MaterialTopTabNavigator (at app/index.tv.native.js:14) in TabNavigator (at SceneView.tsx:98) in StaticContainer in StaticContainer (at SceneView.tsx:89) in EnsureSingleNavigator (at SceneView.tsx:88) in SceneView (at useDescriptors.tsx:125) in RCTView (at CardContainer.tsx:187) in RCTView (at CardContainer.tsx:186) in RCTView (at Card.tsx:508) in RCTView (at createAnimatedComponent.js:151) in AnimatedComponent (at Card.tsx:491) in PanGestureHandler (at Card.tsx:484) in RCTView (at createAnimatedComponent.js:151) in AnimatedComponent (at Card.tsx:480) in RCTView (at Card.tsx:473) in Card (at CardContainer.tsx:154) in CardContainer (at CardStack.tsx:518) in RCTView (at CardStack.tsx:109) in MaybeScreen (at CardStack.tsx:511) in RCTView (at CardStack.tsx:92) in MaybeScreenContainer (at CardStack.tsx:410) in CardStack (at StackView.tsx:384) in KeyboardManager (at StackView.tsx:382) in RNCSafeAreaView (at src/index.tsx:28) in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42) in SafeAreaProviderCompat (at StackView.tsx:379) in RCTView (at StackView.tsx:378) in StackView (at createStackNavigator.tsx:67) in StackNavigator (at app/index.tv.native.js:27) in EnsureSingleNavigator (at BaseNavigationContainer.tsx:267) in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:39) in ThemeProvider (at NavigationContainer.tsx:38) in ForwardRef(NavigationContainer) (at app/index.tv.native.js:26) in App (at renderApplication.js:40) in RCTView (at AppContainer.js:101) in RCTView (at AppContainer.js:119) in AppContainer (at renderApplication.js:39)

Expected behavior I expected the video to play.

Screenshots or copy&paste If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: ubuntu 20.04
• Node Version : v10.19.0
• RNV Version : 0.31.3

[CHaNGeTe]

How you installed react-native-video? Can you paste your renative.json file?

Spoiler: react-native-video will not allow you to play Youtube videos AFAIK

[CHaNGeTe]

Maybe you want to check this approach: https://surajmdurgad.medium.com/embedding-youtube-videos-in-a-react-native-app-8c556a18fd76

[divyangmistry]

How you installed react-native-video? Can you paste your renative.json file?

Spoiler: react-native-video will not allow you to play Youtube videos AFAIK

....

this is my renative.json ->

{ "plugins": { "react-native-web-image-loader": "source:rnv", "react-native-gesture-handler": "source:rnv", "react-native-reanimated": "source:rnv", "react-native-vector-icons": "source:rnv", "@reach/router": "1.3.4", "hash-source": "1.0.4", "@react-navigation": "source:rnv", "@react-navigation/core": "5.2.1", "@react-navigation/drawer": "5.1.1", "@react-navigation/bottom-tabs": "5.1.1", "@react-navigation/material-bottom-tabs": "5.1.1", "@react-navigation/native": "5.0.9", "@react-navigation/stack": "5.1.1", "@react-navigation/routers": "5.1.0", "@react-navigation/material-top-tabs": "5.1.1", "@react-navigation/web": "1.0.0-alpha.9", "@react-native-community/masked-view": "0.1.6", "@react-native-community/viewpager": "source:rnv", "react-native-safe-area-context": "source:rnv", "react-native-safe-area-view": "source:rnv", "react-native-screens": "source:rnv", "react-native-tab-view": "source:rnv", "react-native-google-cast": { "props": { "applicationID": "CC1AD845" } }, "@noriginmedia/react-spatial-navigation": "source:rnv", "renative": "source:rnv", "detox": "source:rnv" }, "platforms": { "android": { "gradle.properties": { "android.useDeprecatedNdk": true }, "AndroidManifest": { "children": [ { "tag": "application", "android:name": ".MainApplication", "android:usesCleartextTraffic": true, "tools:targetApi": 28 } ] } }, "androidtv": { "gradle.properties": { "android.useDeprecatedNdk": true }, "AndroidManifest": { "children": [ { "tag": "application", "android:name": ".MainApplication", "android:usesCleartextTraffic": true, "tools:targetApi": 28 } ] } }, "platforms": { "web": { "engine": "engine-rn-next" } } }, "permissions": { "ios": {}, "android": { "INTERNET": { "key": "android.permission.INTERNET", "security": "normal" }, "SYSTEM_ALERT_WINDOW": { "key": "android.permission.SYSTEM_ALERT_WINDOW", "security": "signature" } } }, "projectName": "demo_play", "workspaceID": "rnv", "paths": { "appConfigsDir": "./appConfigs", "entryDir": "./", "platformAssetsDir": "./platformAssets", "platformBuildsDir": "./platformBuilds" }, "defaults": { "title": "demo play", "id": "com.demoplay.app", "supportedPlatforms": [ "android", "androidtv", "androidwear", "chromecast", "firefoxos", "firefoxtv", "ios", "kaios", "tizen", "tizenmobile", "tizenwatch", "web", "webos", "windows" ] }, "templates": { "renative-template-hello-world": { "version": "0.31.3" } }, "currentTemplate": "renative-template-hello-world", "isMonorepo": false }

[divyangmistry]

Maybe you want to check this approach: https://surajmdurgad.medium.com/embedding-youtube-videos-in-a-react-native-app-8c556a18fd76

i tryed the webview also that is also giving me error ... wait trying the youtube & youtube-iframe method !!!

[divyangmistry]

@CHaNGeTe ... i forgot to mention i don't have the "videoId" instead I am getting the video URL !!!

[CHaNGeTe]

videoId can be easily extracted from url: https://www.youtube.com/watch?v=fTzSI_MY98o

?v={{THAT's THE ID}}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[pauliusguzas]

@divyangmistry thanks for reporting this issue, is this still reproduced on latest rnv version?

[pauliusguzas]

This seems like has an answer provided so closing