I am trying to play app-local DRM'ed video files using the React Native Video DRM clone using the source={uri: "file://rel-path"} attribute and failing. I have used relative path, prefixed with file:// and without and non of its is working in both iOS and Android. I dont think I need file permissions for video files under /src/assets folder of my app?
My source code below :-
<Video
source={{ uri: 'file://<relativepath>.mpd',
drm: {
type: 'widevine',
licenseServer: 'https://proxy.uat.widevine.com/proxy?video_id=efd045b1eb61888a&provider=widevine_test',
}}
style={styles.video}
/>
Related
When I add some image from my assets folder using require, the image is apparently being taken from a folder .png-cache , but react native probably has bad paths stored in them because I get an error wherever I've used the same file as the image source.
My code is:
<Image
source={require('#assets/images/thunder.svg')}
height={20}
width={20}
resizeMode={'contain'}
style={styles.actionButtonIconStyle}
/>
The image doesn't show up and the console shows:
Error: Asset not found: C:\Users\<project path>\src\assets\images\.png-cache\thunder-31748fee8334daf886e2bea1259f80c9#3x.png for platform: android
at getAbsoluteAssetRecord (C:\Users\<project path>\node_modules\metro\src\Assets.js:110:11)
at async getAsset (C:\Users\<project path>\node_modules\metro\src\Assets.js:238:18)
at async Server._processSingleAssetRequest (C:\Users\<project path>\node_modules\metro\src\Server.js:352:20)
at async Server._processRequest (C:\Users\<project path>\node_modules\metro\src\Server.js:427:7)
Not sure why the current paths are not valid. Is it possible to make it so that the old cached paths are forgotten and new cache file generated?
What I've tried:
I renamed one image file and it worked but I wouldn't want to rename all the files, looking for a way to reset the cache.
I looked at the solution in Reset internal android image cache in React Native but I can't have dynamic paths in require so this solution didn't work.
I see first time using like #asset...
In my code i everytime use like this:
<Image
source={require('../assets/images/thunder.svg')}
height={20}
width={20}
resizeMode={'contain'}
style={styles.actionButtonIconStyle}
/>
am i missunderstanding what you need?
My problem was solved by resetting the react native cache with the command:
npm start -- --reset-cache
I am building an IOS application using ReactNative. My app needs to display image from the local file system or gallery or the ones captured by the camera. But it is not working. I am displaying something like this.
<FastImage
style={[imageStyle.image]}
source={{ uri: source }}
/>
This is the library I am using, https://github.com/DylanVann/react-native-fast-image. The source value is something like this.
As you can see, it is not displaying the image. What is wrong with my code and how can I fix it?
I also tried prepending "file://" to the path as well. It did not work either.
If you are using a local file. The source prop should have a file path instead of a uri. Let’s say your image is located at ./Images/myImage.png. Try this:
source={require("./Images/myImage.png")}
const directoryPath = Platform.OS === 'android' ? RNFS.PicturesDirectoryPath : RNFS.DocumentDirectoryPath;
<FastImage
style={YOUR_IMAGE_STYLE}
source={{uri: `file://${directoryPath}/${YOUR_IMAGE_FILE_NAME}`}}
/>
PS: on Android, must use file://
PS: Need enable fs permission, ref to ENOENT: open failed: EACCES (Permission denied), open '/storage/emulated/0/Download/ on Android, and IOS file downloaded not able to be located on device on iOS.
I am trying to share an image loaded in a component to another app (such as Whatsapp).
If I have the following:
...
<Image
source={{ uri: image.uri }} // 'https://my-s3-bucket/...' NOT 'file://...'
onLongPress={() => shareImage(image.uri)}
/>
...
You can use this by install :
yarn add react-native-share
or if you use npm :
npm install react-native-share --save
This module can help you share url and file
I fixed this by downloading the image locally first, sharing it with Expo Sharing, and then deleting it locally.
I'm trying to show image placeholder before the actual image loaded from the server.
For iOS, defaultSource prop is working fine but for android the image is not getting displayed.
<Image style={dashBoardStyles.buildingImage} source={{ uri: 'some server image' }} defaultSource={ require('../images/loadingindicatorImage.png')}>
Can anyone help regarding this issue.
Please read https://reactnative.dev/docs/image#defaultsource carefully, and you'll find below note.
Note: On Android, the default source prop is ignored on debug builds.
I am using React Native and am using https://github.com/lwansbrough/react-native-camera to capture a video. On saving the video I get an absolute path to the storage on my device. I want to convert it into a URI to display it.
{path:"file:///storage/emulated/0/DCIM/VID_21324217_242411222.mp4"}
I have already tried doing this
<Video
source={{ uri: this.state.videoSource.path}}
....
But it doesn't work what am I missing? how do I convert this absolute path to an URI so I can display it in the video player?
As stated here try to remove the file:// part of the path since it seems to be a bug on react-native-video which, although was fixed, IDK which version of this you're using or which version is patched.