When rotating an app to landscape the statusbar is hidden

[raffij]

Description

An app loaded in portrait shows the statusbar and when rotated to landscape hides the statusbar. Rotating the app back to portrait shows the statusbar again.
An app loaded in landscape shows no statusbar. When rotated to portrait still shows no statusbar.

Reproduction

react-native init ProjectName

Additional Information

• React Native version: 0.36.1
• Platform: iOS
• Operating System: MacOS

[brentvatne]

I also noticed this! @lacker - any idea who to assign to?

[mmmulani]

does this repro in the UIExplorer or did something change with our initial config settings?

[raffij]

@mmmulani yes. It's something wrong in core.

When the following is done it happens.

git clone https://github.com/facebook/react-native.git
cd react-native
npm install
open Examples/UIExplorer/UIExplorer.xcodeproj

[mmmulani]

oh in that case, do you mind running a bisect? I'm a bit swamped with other work and won't get to look at it for a couple days

[mrpp01]

I would like to work on this bug. Any idea on how I should approach it?

[pvinis]

@mrpp01 just find out when this broke. do a git bisect and find out which commit broke it. that should make it easy to fix, or at least find out why.

[mrpp01]

@pvinis I have tried to identify a good version of react native where the error does not exist. But as far as version 0.14.2, the error still exists. I tried to test on older versions, but had not been able to make it run. I doubt that bisect would be helpful as the bug might exist since the beginning. Is there any other approaches that you think I should try?

[pvinis]

hm.. then i guess it was not broken. just never worked.. then if you still want to try to fix it, i would suggest to take a look at the statusbar api and the rotation detection for interface and for device api from apple. and maybe you can locate some thing with those.

[outaTiME]

Same here with react-native 0.41.

The status bar disappears in landscape mode, check out the dark blue bar on top in second image:

[mzmiric5]

Is it possible that this happens due to the fact that, since iOS8 UIViewController’s implementation of prefersStatusBarHidden returns YES when its trait collection’s horizontal size class is compact?

By default, this method returns false with one exception. For apps linked against iOS 8 or later, this method returns true if the view controller is in a vertically compact environment.

https://developer.apple.com/reference/uikit/uiviewcontroller/1621440-prefersstatusbarhidden

[ferrannp]

I am using 0.43.0 and this still happens.

[mzmiric5]

@ferrannp not sure if this will be resolved on the react-native end, but here is a solution that you can use

In your AppDelegate.m add the following lines in your application didFinishLaunchingWithOptions

[application setStatusBarHidden:YES withAnimation:UIStatusBarAnimationNone];
[application setStatusBarHidden:NO withAnimation:UIStatusBarAnimationNone];

and make sure that UIViewControllerBasedStatusBarAppearance is set to false in your app's Into.plist.

This will cause the status bar to be visible in landscape mode.

Hope this helps.

[ferrannp]

@mzmiric5 nice, this works, thank you! Although, I didn't know default behavior of iOS native apps was to hide it on landscape. I guess this could be documented somewhere if we do not want to add it to StatusBar but definitely this issue can be closed.