Current behavior
I have a list a social networking app that has videos and images (under 10 Mb each).
There is a screen with the user's feed, organized in a FlatList, in which i am loading for now only (!) two videos and one image. The app shows black screen in the place of the Video component, only on Android. The black screen problem does not happen in iOS! (I presume because the way memory management and how scroll lists are done in iOS)
Reproduction steps
This is my code for Video:
<Video
source={{ uri: this.state.uri }}
ref={(ref) => {
this.player = ref
}}
paused={this.state.paused}
resizeMode={this.state.resizeMode}
onLoad={this.handleLoad}
onEnd={this.handleEnd.bind(this)}
style={[this.state.style, { backgroundColor: '#3d3d3d' }]}
/>
also, if I add in AndroidManifest:
The memory consumed by the app as seen in Android Studio is somewhere at 170Mb, and growing.
Expected behavior
I expected to show the video.
Platform
Environment:
OS: macOS High Sierra 10.13.6
Node: 8.10.0
Yarn: 1.5.1
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.4.1 Build version 9F2000
Android Studio: 3.1 AI-173.4670197
Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: 0.54.4 => 0.54.4
Which player are you experiencing the problem on:
I am using the Video tag from : import Video from 'react-native-video';
https://www.dropbox.com/s/o7q9kejiabs7y88/CrashVideo.mp4?dl=0
Questions
1) what is the solution to this?
2) Is this related to memory issues? When I load 10 more videos, the app crashes because of an error (as I see in Crashlytics) called 'Fatal Exception: java.lang.OutOfMemoryError'.
Does the library react-native-video not load when there is high memory used?
3) does the FlatList on Android unload from memory the images/videos when I scroll them outside of view? Otherwise, If I go down with scrolling , do I continually add images / videos to the app memory and it will eventually crash?
4) Is another solution for performance for video? I am thinking react-native-thumbnail to show initially the thumbnail to not download the whole video. I am having trouble installing the library (issue #35 on https://github.com/phuochau/react-native-thumbnail/issues/35 ) , do you know of a better way to get the video thumbnail? (so that instead of showing videos in feed, i show them on thumbnail touch in a different screen).
5) does the Exoplayer eliminate this problem?
This is I believe the greatest challenge with this app so far. Please contribute what solutions you have found to apps with feeds with videos.
(I have posted the question on Github here, but sometimes I only get responses on SO: https://github.com/react-native-community/react-native-video/issues/1318 )
Thank you!
Related
Implementing video calls using react-native-jitsi-meet on iOS works perfectly fine but on android when loading the screen to start the meeting, it stays on the black screen. I am using react-native 0.69.2 and react-native-jitsi-meet 2.3.1.
I did all installation as described in the documentation and also tried to use jitsi-meet-sdk to customize native code but still, I could get the black screen on android.
I also tried to downgrade the react-native version but it couldn't help.
I was expecting to join the video call but rendering the JitsiMeetView with its full functionality like turning on a video call, muting audio, seeing participants, inviting and so many more features that jitsi-meet-sdk provides as I could see it on iOS.
I am using Expo to build an app that serves a website using react-native-webview. It's working in android, but however in iOS with custom originWhitelist, react-native-webview automatically opens custom scripts in Safari without any user interaction.
For example:
<WebView
source={{
uri: 'https://www.bbc.com',
}}
originWhitelist={['https://*bbc.com']}
/>
On load, the webview opens a link that doesn't fit the whitelist automatically. You can check the screen cap here: https://imgur.com/a/Tvbua2b. In addition to that, it also shows other urls that can't be opened (My guess is that because the app isn't on foreground). Here's one of the error messages from the console:
Environment:
OS: iOS
OS version: 13.5.
react-native version: React Native 0.62.2 for Expo SDK38.
react-native-webview version: ^9.4.0.
I am using react-native-camera and react-native-qrcode-scanner libraries for scanning qr codes in my app. In android I have tested this and it was working fine, but in IOS I am facing lot of issues. The camera opens successfully on first attempt but after scanning the camera gets freezes and then a blank screen appears instead of camera. I have also given permissions in info.plist file in Xcode related to camera. Here is the code for the QRcode scan which I am using in the app
render() {
return (
<View>
<QRCodeScanner
onRead={this.onSuccess.bind(this)}
showMarker={true}
/>
</View>
);
}
Current versions in my app -
react-native - 0.57.5
react-native-camera - 1.10.1
react-native-qr-code-scanner - 1.1.2
Any answer or suggestions would be helpful to me Thanks.
We have a website that needs to be ported to mobile app. We have used react-native and the webkit view.
In the website, there is a play button that will open up a video. On Android, this works very well. However, it is not the same for iOS.
Please see error message
Error Loading Page
Domain: WebKitErrorDomain
Error Code: 204
Description: Plug-in handled load
Otherwise, the website looks good on iOS. On Android, the video opens and runs smoothly.
We have used this code in the app which is extremely simple.
<WebView
source={{uri: 'http://www.domain.abc'}}
bounces={false}
scrollEnable={false}
/>
Any idea on how to fix this issue?
When I start a new React Native project on a Mac with the latest versions XCode and React Native as follows:
react-native init TestApp
cd TestApp
react-native run-iso
react-native --version
react-native-cli: 1.0.0
react-native: 0.32.0
the app launches correctly in the iOS simulator in portrait and looks as expected.
However, when rotating the orientation by selecting from the menu Hardware --> Rotate Left the text is no longer centered and is cut off.
I have tried a few other tests with flexbox and see similar behavior when rotating on iOS. I also tried resetting the iOS emulator contents and settings using Simulator --> Reset Contents and Settings but I still see the same issue.
I launched a new app using the same procedure on Mac for iOS on another machine running the previous version of React Native (0.31) and it works as expected and responds normally when the orientation is changed.
In both, 0.32 and 0.31 everything displays correctly on an Android app running in the simulator.
I am unclear if this is a misconfiguration on my desktop or if there is an issue in React Native 0.32.