I am using react-native-cli and in my app react-native-video doesn't work.
While running on external device (android) it shows a blank space without error
On running on android simulator, the video screen appears with the first frame but the video is not playing (stuck)
The .mp4 file is stored in the project itself.
<Video
source={require('../../../storage/videos/video1.mp4')}
resizeMode="cover"
repeat={true}
paused={false}
style={{height: 400, width: 400, position: 'absolute'}}
/>
File Structure:
- src
-- components
-- screens
-- Video.js
-- storage
-- videos
-- video1.mp4
- App.js
Versions
React native : 0.70
React : 18.1
React native video: 5.2.1
Please add onError method to log the error.
const videoError = error => {
console.log('--videoError', error);
};
That might help you to get the exact problem.
If you are accessing file from outside of the app, you have to ask for request permission as well.
Please read the Doc
Related
I am using react-native-video to play videos and it works well in React Native asset system. But in my case, I must to read the video from android asset folder.
Does anyone can help me?
Below are the paths I've tried, but unfortunately none of them work.
source={{ uri: 'file:///android_asset/test.mp4' }}
source={{ uri: 'asset:/test.mp4' }}
Related References:
Using file path in react-native-video
Path of Android asset folder
The same issue but he fix it by adjusting source code
Read the video from android raw folder but not my case
I have used several icons in the application, but they are not loading in iOS build, but load perfectly fine in Android build. The icons been used are PNG files in local assets folder. I have tried to use different methods to include Image files;
var chevron_right = require('./chevron-right.png');
import chevron_right from './chevron-right.png';
Third that I used was to put a JS file (i.e. Icons.js) in the folder where there the images are and than export those images from it. Like: export default { chevron_right : require('./chevron-right.png') } and then import where I want Like: import Icons from './path/to/icons' <Image source={Icons.chevron_right} style={{ height: 8, width: 8 }} />
All of the above three methods do not work for iOS builds. The screenshots are attached, the versions of expo and react native are:
Expo CLI: 0.60,
Expo SDK: 46,
React: 18,
React Native: 0.69.4
Screenshots:
The error seems to be with the Xcode. So pls Follow this
React-native iOS not showing images (pods issue). Read the full thread.
The question is answered.(Regards)
I updated my EAS CLI from 0.60 to 1.1.1, now my Images are rendering in iOS build.
I have built an android app using react native. Inside the app I am using the
react-native-webview package to show a React app.
import {WebView} from 'react-native-webview';
<WebView
useWebKit={true}
source={{
uri: 'https://myappurl.com',
}}
style={{flex: 1}}
/>
I have set the android.permission.WRITE_EXTERNAL_STORAGE permission in andoid manifest and also set android.useAndroidX=true and android.enableJetifier=true in gradle properties. Yet when I copy something in the react app or download a file, it doesn't happend at the device level. If I run the react app independently in a web browser I am able to copy and download.
According to the documentation of react-native-webview nothing else needs to be done and this functionality should be inbuilt. What could be the issue?
Found the issue. For copy i was using the navigator.clipboard api and for download i was using a blob object. The web view only supports the document.execCommand() api for copy, and for download it only supports download through the Content-Disposition: attachment; header.
My objective is to upload multiple files either via camera or file storage, I'm using ng2FileSelect for uploading multiple files to the server via Ionic app, this is the HTML for it:
<input (change)="upload()" type="file" ng2FileSelect
[uploader]="uploader" multiple accept="image/*" capture="environment">
On running it on localhost on chrome, it is successfully giving options, either to open mobile camera or select files from storage. But on testing it on Ionic DevApp or on android device(via APK), it is directly opening file storage and not giving option of opening mobile camera. Is it possible to achieve the said objective with the above input tag, or I have to use a separate method for uploading files from the camera such as Cordova camera plugin, etc. ?
ng2FileSelect is specific for browsers it may create a problem on the native device. My suggestion is to use cordova camera plugin.
You can install the plugin via this commands
ionic cordova plugin add cordova-plugin-camera
npm install #ionic-native/camera
It Supports following platforms
Android
Browser
iOS
Windows
Usage
import { Camera, CameraOptions } from '#ionic-native/camera/ngx';
constructor(private camera: Camera) { }
...
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64 (DATA_URL):
let base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
});
I am developing an android app based on ionic 2 using typescript.
I would like o open a PDF file inside my app with another app that is registered for the fyletype (e.g. Acrobat Reader).
Therefore i tried the two standard plugins:
https://github.com/disusered/cordova-open
https://github.com/pwlin/cordova-plugin-file-opener2
Although ive added both plugins via "ionic plugin add ..." and of course played around with several combination referencing to it
the result is always that they ere not found
cordova-open
var open = cordova.plugins.disusered.open;
Property 'disusered' does not exist on type 'CordovaPlugins'.
cordova-plugin-file-opener2
cordova.plugins.fileOpener2.open(
filePath,
fileMIMEType,
{
error : function(){ },
success : function(){ }
}
);
Property 'fileOpener2' does not exist on type 'CordovaPlugins'.
I am running the app on an emulator via ionic run android
Could you please give some hint how i can achieve to use one of these plugins?
Thank you very much
Shane