I'm working on this app that does not always hold the video content on the device.
The Video will be downloaded, and then a path to the video will be on json objects that need to be inputed into a require. (or thats how I do it right now)
This is the code for the video:
import jsonFileExercise from '../../../assets/controller/data/getNextExerciseBySectionId.json'
var videoPath = jsonFileExercise.content.path
return (
<Video
source={require(videoPath)}
rate={1.0}
volume={1.0}
isMuted={false}
resizeMode="cover"
//shouldPlay
useNativeControls
isLooping
style={styles.backgroundVideo}
/>
)
This is the JSON file
{
"exerciseId": 1,
"content": {
"type": "video",
"path": "../video/content/testvideo2.mp4"
}
}
I want to be able to change the path in the JSON file and then load a different video.
Does anyone know a better way of having Dynamic Video that is loaded from storage?
Another problem is going to be using images from asyncStorage, but the ideal solution would be something that uses both images from AsyncStorage and updating images dynamically.
Similar posts: React Native: require() with Dynamic String?
But it did not show a solution for the issue.
Related
I have an app with expoGo and use expo-file-system to download files to the user's device.
When I pass the path to the files to rn-pdf-reader-js in online mode, everything works as it should, but in offline the library simply simply does not render pdf.
<PDFReader
style={styles.reader}
customStyle={{
readerContainerZoomContainerButton: {
display: 'none',
},
}}
withPinchZoom={true}
withScroll={true}
noLoader={false}
source={{uri: magazine.pdf ? magazine.pdf : URL.MAGAZINE_PDF(magazine)}}
/>
where magazine.pdf look like "file:///Users/user/Library/Developer/CoreSimulator/Devices//data/Containers/Data/Application//Documents/ExponentExperienceData/%2540anonymous%252**/pdf2021-1.pdf"
I need a PDF to be displayed offline
I tried many solutions: load base64, load component into webView;
but it's all useless
Do you know a lib / a way to display a thumbnail of a local video ?
I select a video from my device with react-native-image-picker and i would like to display a thumbnail of this video in a View or flatlist in case of several selections
You can use below plugin for get thubmnail form local path
https://github.com/phuochau/react-native-thumbnail#readme
import RNThumbnail from 'react-native-thumbnail';
let getFilePath = ''
RNThumbnail.get(filepath).then((result) => {
console.log(result.path); // thumbnail path
getFilePath = result.path;
})
After getting path for display purpose you can use react-native-video for play and display
react-native-video and use below code
<Video source={{ uri: getFilePath }} pause={true} />
Hope this will work for you.
If you are using Expo and you are not deploying to web, this package will do the job for you: https://docs.expo.dev/versions/latest/sdk/video-thumbnails/
I'm trying to speed up loading a bunch of gifs, but a big limitation is that I'm using Expo, and don't want to detach. I found Picache, which states it can be used just like react native Image. When the page loads though, everything loads super fast now, but the gifs are still and not 'gify'.
<Picache
source={{uri: someURL.gif)}}
style={{height: 300, width: 300, borderRadius: 10}}
/>
I've spent so long trynig to figure out how to speed up loading a bunch of images without detaching. Is there a way to make Picache work with gifs, or a similar easy way to implement?
**Before someone suggests, I've already tried... react-native-fast-image-expo but unfortunately it requires detaching as well. That is the desired package though.
If you don't want to bring out the project, you can replace it with this.
Until Expo added the module,
example:
import {Image} from "react-native-expo-image-cache";
// preview can be a local image or a data uri
const preview = { uri: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" };
const uri = "https://firebasestorage.googleapis.com/v0/b/react-native-e.appspot.com/o/b47b03a1e22e3f1fd884b5252de1e64a06a14126.png?alt=media&token=d636c423-3d94-440f-90c1-57c4de921641";
<Image style={{ height: 100, width: 100 }} {...{preview, uri}} />
Get the local image from a remote URI
import {CacheManager} from "react-native-expo-image-cache";
const {uri} = this.props;
const path = await CacheManager.get(uri).getPath();
// if path is undefined, the image download has failed
Is there a way to play hosted video from Amazon to React Native application? I have tried with React Native Af Video player but could not play it.
The video URL is like this: https://d3codsxyyh2kcu.cloudfront.net/https?Expires=1547218475&Signature=MqxFm4cvR2IYfruCKEaM9JvaFDa7a-0ipdhK9QLxiRFIDcc1jHgvrpNLaPdId1nK5EXJND9hIGnAZvevdRhkA9Uocmd-I3QRdPNumv2BCuSBARgiMcu~lnwgQ24G9r1uO~ZlQ5CDhPTyJYFqC8DyFuzbGnHrTRfMTfPYIUZSi5lvk22oXGDOqARra~-KoAKk-vPXAxxUo1BjCXw3V06t6JNxCCrhaGiS3~OaRc28wGSRacm7F5A9rf~eEWSUWQ~17lUC-Jm6jnWAI9zqSqtyIk4ladboX7FNFi8N12wq39KWinYqvhMNkJcmxy1lGLCgEbabndfJc~yez7c2d17~Rw__&Key-Pair-Id=my_key_id
Please help me in this regard.
you can use react-native-video.
I have worked on projects that provides signed url for videos as list. These urls can be streamed / played using this pacakge.
Only thing to note is you need to generate signed S3 url so that video will play easily. One way to check this is you can directly copy paste the signed url on the browser and it should stream right away.
PS: I also had doubts that s3 urls might not be playable using react-native-video, But turns out, providing signedUrl video will work. you can use onError to debug issues. (Make sure the url is playing from chrome before eu test it on RNApp)
Sample Code
// Load the module
import Video from 'react-native-video';
<Video source={{uri: "s3 signed url"}} // Can be a URL or a local file.
ref={(ref) => {
this.player = ref
}} // Store reference
onBuffer={this.onBuffer} // Callback when remote video is buffering
onError={this.videoError} // Callback when video cannot be loaded
style={styles.backgroundVideo} />
// Later on in your styles..
var styles = StyleSheet.create({
backgroundVideo: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
});
I'm trying to show some images in my React Native app. It's a simple app, only for Android. The app get informations from an API. The initial View is a list of items and when I click in one item, it gets more info from the API and show in a new page. I also get some urls that points to images that are kept in a S3 bucket in AWS.
This is how I show the images:
<ScrollView>
{this.state.urls.map(url => {
<Image
source={{uri: url}}
style={{width:400, height:200}}
/>
}
</ScrollView>
The problem is that it's not showing those images. I can see that there is a part of the page that is for the image. I can see that because if a put the image first and after that some text, the text will appear at the bottom of the page. I don't know what is going on that the image doesn't appear.
I searched for an answer, found something about using https instead of http (at least for iOS). Found that I need to set width and height. I already did those things and others but it's not working.
I also tried just picking a image from the internet and putting it url direct in uri but it still doesnt't work.
You're missing a return statement in your map function.
<ScrollView>
{this.state.urls.map(url => {
return <Image
source={{uri: url}}
style={{width:400, height:200}}
/>
}
</ScrollView>
UPDATE
I just tried the url that you provided in the above comment and it doesn't work on my device. I tried a different image from the internet this one and it works. There may also be something that is stopping you from accessing the images from within a mobile app.
To debug further I try would a single <Image .../> with the image hosted on AWS and see if you can get that to show. There may need to be some AWS configuration that you need to change to allow the image to be accessed from a mobile device.
Assuming your image URLs are accessible in your application.
The below code will show your images. Actually you forgot to return a component from the map which is a must have.
<ScrollView>
{this.state.urls.map(url => {
return <Image
source={{uri: url}}
style={{width:400, height:200}} /> }
}
</ScrollView>