Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Youtube video in WebView: StatusBar is gone after fullscreen (iOS 12) #62

Closed
sebk opened this issue Sep 27, 2018 · 6 comments

Comments

Projects
None yet
7 participants
@sebk
Copy link

commented Sep 27, 2018

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
Memory: 529.69 MB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 8.11.2 - /usr/local/bin/node
Yarn: 1.7.0 - /usr/local/bin/yarn
npm: 6.1.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
IDEs:
Android Studio: 3.1 AI-173.4907809
Xcode: 10.0/10A255 - /usr/bin/xcodebuild
npmPackages:
react: 16.5.0 => 16.5.0
react-native: 0.57.1 => 0.57.1
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

Description

I'm including a youtube video via a WebView.

Code snippet:

<WebView 
  style={styles.videoWebView}
  source={{uri: 'https://www.youtube.com/embed/tgbNymZ7vqY?playsinline=1'}}
  allowsInlineMediaPlayback={true}
/>

When the video comes back from fullscreen the StatusBar is gone.

This happens since iOS 12. On iOS 11 this problem doesn't occure (technically in iOS 11 there is also a StatusBar disappear problem, but a little bit different, and I would like to focus on iOS 12 only for now).

Reproducible Demo

A react-native project can be found here:
https://github.com/sebk/RN-WebViewTest

@Titozzz Titozzz added the bug label Sep 27, 2018

@congnd

This comment has been minimized.

Copy link

commented Oct 21, 2018

same with me. any update?

@Titozzz

This comment has been minimized.

Copy link
Collaborator

commented Oct 21, 2018

This project mostly depends on community to address the issues, we are trying to help to precess and review as fast as possible everything, however we can't be full time on this! I hope someone can submit a PR, and I'll be happy to get it merged

@malonguwa

This comment has been minimized.

Copy link

commented Dec 14, 2018

@sebk @congnd
Maybe give a try for this code?

import { StatusBar } from 'react-native';
StatusBar.setHidden(false) 

I found the solution in here, but I have not tested myself yet... please let me know if it is working :P
react-native-community/react-native-video#591

@sebk

This comment has been minimized.

Copy link
Author

commented Dec 14, 2018

Kind of...The problem is to know when to hide and when to show the StatusBar. In the App I want to show the Bar. Only when the video is in fullscreen the bar should be hidden. I have to know when the video goes into fullscreen and when it leaves it. The question is: When do I call setHidden(false) and when setHidden(true)?

On iOS I found a native solution:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(videoExitFullScreen:) name:@"UIWindowDidBecomeHiddenNotification" object:nil];
...
}

- (void)videoExitFullScreen:(id)sender
{
  [[UIApplication sharedApplication] setStatusBarHidden:NO animated:YES];
}
@mahavirvataliya

This comment has been minimized.

Copy link

commented Jan 31, 2019

@sebk Thanks its working

ericlewis added a commit to ericlewis/react-native-webview that referenced this issue Apr 29, 2019

@Titozzz Titozzz closed this in #544 Apr 30, 2019

Titozzz added a commit that referenced this issue Apr 30, 2019

react-native-community-bot pushed a commit that referenced this issue Apr 30, 2019

chore(release): 5.8.1 [skip ci]
## [5.8.1](v5.8.0...v5.8.1) (2019-04-30)

### Bug Fixes

* **WKWebView:** StatusBar is gone after fullscreen (iOS 12) ([#544](#544)) ([c2914a8](c2914a8)), closes [#62](#62)
@react-native-community-bot

This comment has been minimized.

Copy link
Collaborator

commented Apr 30, 2019

🎉 This issue has been resolved in version 5.8.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

SebiVPS added a commit to vivid-planet/react-native-webview that referenced this issue May 2, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.