question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

allowsFullscreenVideo breaks with <Modal>

See original GitHub issue

Bug description:

On Android, allowsFullscreenVideo on a WebView that’s rendered inside a <Modal> component completely breaks the app when the full screen button is pressed. The full screen player seems to render behind the modal, and closing the modal will leave a blank screen stuck on top of the app. After this point, the app is unusable and must be closed.

To Reproduce:

Render a <WebView allowsFullscreenVideo={true} /> inside a <Modal> component. Have the webview render something with a video in it; for example, a youtube video. Lastly, press the full screen button and observe.

Expected behavior:

Full screen player should not break the application, and should properly play above the app’s modal.

Screenshots/Videos:

Environment:

  • OS: Android
  • OS version: Android 8.1 and 10 (tested on these)
  • react-native version: 0.61.5
  • react-native-webview version: 9.0.2

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:9 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
bilalsyed001commented, Jun 11, 2020

If you’re using react-native-modal try setting <Modal coverScreen={false} />.

0reactions
react-native-community-botcommented, Feb 11, 2021

🎉 This issue has been resolved in version 11.2.3 🎉

The release is available on:

Your semantic-release bot 📦🚀

Read more comments on GitHub >

github_iconTop Results From Across the Web

allowsFullscreenVideo breaks with <Modal> #1293 - GitHub
On Android, allowsFullscreenVideo on a WebView that's rendered inside a component completely breaks the app when the full screen button is ...
Read more >
How to allow fullscreen on a modal? - Stack Overflow
I have a modal uses an html file which is an embed code (video). If I click on fullscreen, it fits the video...
Read more >
react-native-webview: Versions - Openbase
android: Fix full=screen video when in modals (#1748 by ... This change shouldn't break any apps, but we are marking it as a...
Read more >
SwiftUI Fullscreen Modal Hack withAnimation - YouTube
Something missing in SwiftUI right now is the ability to present a modal fullscreen. With a little bit of creativity we can hack...
Read more >
How to trigger full-screen mode on play for emb...anycodings
... scrollEnabled={false} _left).offset allowsFullscreenVideo={true} ... import React from 'react'; import (TINY_ {Modal, StyleSheet, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found