React Native tab bar app upside down not rotating

user_922401 0
Viewed 840

I am working on a React Native iOS app which is a universal app and has a tab bar layout and I am trying to get it to rotate upside down but it's not rotating. I have checked the device orientation checkboxes in Xcode for Portrait and Upside Down

And have seen the changes in the Info.plist

<key>UISupportedInterfaceOrientations</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
    <string>UIInterfaceOrientationPortraitUpsideDown</string>
</array>

I have read in this stackoverflow post that I may need to programmatically specify accepted orientations in (what I assume to be) the view controller that isn't rotating, but I don't have access to the main view controller (the app is mostly JavaScript). So, that seems kind of not do-able at this point.

In trying to figure this out I have checked the Landscape options in Xcode and verified that those do work, just not the Upside Down option.

Any help or direction on this would be great. Thanks!

react-native xcode iphone ios
1 Answers

The react-native code does not support upside down right out of the box.

To get it to work, you need to check the Upside Down box just like you did, and add the following code at the bottom of your AppDelegate.h file:

@interface AllOrientationViewController : UIViewController
@end

Once that is done add the following at the bottom of the AppDelegate.m file:

@implementation AllOrientationViewController
- (UIInterfaceOrientationMask)supportedInterfaceOrientations
{
   return UIInterfaceOrientationMaskAll;
}
@end

The last part is to modify the following line of code in AppDelegate.m:

UIViewController *rootViewController = [UIViewController new];

With this one:

UIViewController *rootViewController = [AllOrientationViewController new];

Note: That still won't work on iPhoneX since it does not support portraitUpsideDown.

user_6953400
Related