Search code examples
react-nativereact-native-windows

React Native Windows: play a video from C:/


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.


Solution

  • 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.