React Native Windows: play a video from C:/

Question

I'm trying to play a video from my local storage (C:/) in my ReactNative Windows app. I've tried the following to no avail:

React Native File Viewer I thought this would be the easy alternative, however my RNW version is 0.69, and support for this library has not been updated in 5 years (which mean autlinking is not available). When I try to build the app after adding the library with npm install, I get the following error:

RootRoute\node_modules\react-native-file-viewer\windows\RNFileViewer\RNFileViewerModule.cs(1,7): error CS0246: The type or namespace name 'ReactNative' could not be found (are you missing a using directive or an assembly reference?) [RootRoute\node_modules\react-native-file-viewer\windows\RNFileViewer\RNFileViewer.csproj]. Check your build configuration.

Linking: There is way to open URLs in ReactNative called Linking. However this will not work with local files, only with youtube videos and such. It goes something like this:
```
import {Linking} from 'react-native';

openLinkMethod () {
    Linking.openURL(url)
}
```

WebView: I've tried creating a WebView and a little HTML to source the video like this

             <WebView
             source={{ html: `<h1><video width="320" height="240" controls>
             <source 
                 src="file://route/video.mp4" type="video/mp4">
             <source src="../videos/big.webm" type="video/ogg">
             Your browser does not support the video tag.
             </video></h1>` }}
             style={{ marginTop: 20, width: 300, height: 300 }}
             />

Any help would be greatly appreciated.

score 0 · Accepted Answer · answered Apr 03 '23 at 19:06

I was able to solve it by copying the video to my local app folder and using the library react-native-video.

The property RNFS.DocumentDirectoryPath is a local AppData folder which you can user to store the video and read it with file:// directive in a <Video/> tag.

React Native Windows: play a video from C:/

1 Answers1