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/
Related
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.
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
<Video
source={{ uri: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" }}
resizeMode="cover"
repeat
controls
fullscreen = {this.state.fullscreen}
fullscreenOrientation = {"landscape"}
//onBuffer={this.onBuffer} // Callback when remote video is buffering
//onError={this.videoError} // Callback when video cannot be loaded
style={styles.backgroundVideo}
/>
I am using this above code and in the Android manifest orientation in portrait. I am click on the full screen state has been changes according to it. But it just exit in a second. As i am getting a little fluctuation and maybe the app is showing full screen and then exit from full screen. But i am not able to see it. Or you can say full screen is not working. As in the IOS it is working properly. I tried multiple from github but not able to achieve it.
I'm using the below code to open an URL. Downloading a PDF from React native webview after opening on Android gives:
"invaild pdf format or corrupted"
but it works fine on iOS.
<WebView
renderToHardwareTextureAndroid={true}
startInLoadingState={isLoading}
renderLoading={() => {
return <BarIndicator color="blue" />;
}}
mediaPlaybackRequiresUserAction={false}
javaScriptEnabled={true}
source={{
uri: webviewUrl,
headers: webviewHeaders,
}}
style={drawerWebviewStyles.container}
/>
pdf doesn't work on android webview check this issue here you may look for other solution like download it and open it with pdf viewer
Seems to be a very well known 5 year old problem
https://react-native.canny.io/feature-requests/p/android---webview-cannot-display-pdf
that needs saveas file.pdf then either call the native pdf handler
or
embed/customise a simple maintained js viewer such as
https://github.com/xcarpentier/rn-pdf-reader-js
I am running sample application. I am using amazon s3 to store the profile pics. So, I have to use the same url for the profile pictures. I give the Image a unique key prop to try and get it to reload the image, but it displays a previously uploaded image. It means cache is not cleared for image component.
I tried this below code. Image should be updated perfectly but any changes doing in that screen then image will be disappearing.
This issue only appears in android.
<Image
source={{uri: this.state.uri + '?' + new Date()}}
/>
Please refer this link:- enter link description here
Screenshot:-
set a local const variable as
const url = {uri: this.state.uri + '?' + new Date()};
Use the url as follows:
<Image
source={uri}
/>