Cordova iOS landscape orientation

Question

My Cordova app never rotates to landscape mode when running on iPhone.

I've tried many solutions as putting these lines in the config.xml files:

  <preference name="ios-orientation-iphone" value="portrait and landscape" />
  <preference name="ios-orientation-ipad" value="portrait and landscape" />
  <preference name="Orientation" value="default" />

I also put the following line inside the <platform name="ios"> block:

<preference name="Orientation" value="all" />

Then I did the following in my index.js file:

        window.shouldRotateToOrientation = function (degrees) {
            return true;
        };

Finally, I tried to create a custom plist file in the res/native/ios folder cause I noticed than the generated plist file didn't contain these lines:

            <key>UISupportedInterfaceOrientations</key>
            <string>UIInterfaceOrientationLandscapeLeft</string>
            <string>UIInterfaceOrientationLandscapeRight</string>
            <string>UIInterfaceOrientationPortrait</string>
            <string>UIInterfaceOrientationPortraitUpsideDown</string>

I don't know what to do next. Thanks

Answer 1

I finally did it. The trick was just to put the custom .plist file in the res/native//-Info.plist.

This link gave me the solution: Tools for Apache Cordova (VS2015): Adding custom entries to *info.plist for iOS

Answer 2

Yeah, this is a shortcoming of the cordova cli that creates the Xcode project -- it doesn't add those orientation tags.

A while back I had added the following to my config.xml (I'm using the PhoneGap build service currently).

<gap:config-file platform="ios" parent="UISupportedInterfaceOrientations" mode="replace">
    <array>
      <string>UIInterfaceOrientationPortrait</string>
      <string>UIInterfaceOrientationLandscapeLeft</string>
      <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
</gap:config-file>

There's more info on this blog post: http://phonegap.com/blog/2014/01/30/customizing-your-android-manifest-and-ios-property-list-on-phonegap-build/ .

---

Update : I had a link the <config-file> element, but it looks like that element is for plugins (in the plugin.xml file), not for the normal build -- so it won't work.

So... your best bets are:

• To programmatically adding orientation stuff, create a script that finds your .plist file and adds the following block to it if the block isn't there:

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

• To add it after the platform is added via cordova platform add ios , open the .xcodeproj file, go to the project node / General / Deployment info, and check all the orientations for both iPhone and iPad.

Answer 3

I see you've found a solution. Here's another one that uses build hooks and npm.js to do the work; the benefit is that this should work cross-platform, should you ever do development on linux or OSX. Here's more info about build hooks: http://cordova.apache.org/docs/en/latest/guide/appdev/hooks/index.html

1. Add the following to your config.xml file:

    <platform name="ios"> <hook type="after_prepare" src="iosAfterPrepare.js" /> </platform> 

2. Create a file named iosAfterPrepare.js in the top-level directory and copy in the following (replacing MyProject with the name of your project):

    // iosAfterPrepare.js // Node.js build script run after "cordova ios prepare" (part of cordova build). // This adds the various orientations to the plist file for your project. module.exports = function (context) { var fs = require('fs'), // nodejs.org/api/fs.html plist = require('plist'), // www.npmjs.com/package/plist // Here you will replace "MyProject" with the name of yours, // so that the .plist file can be found FILEPATH = 'platforms/ios/MyProject/MyProject-Info.plist', xml = fs.readFileSync(FILEPATH, 'utf8'), obj = plist.parse(xml); obj.UISupportedInterfaceOrientations = [ "UIInterfaceOrientationPortrait", "UIInterfaceOrientationPortraitUpsideDown", "UIInterfaceOrientationLandscapeLeft", "UIInterfaceOrientationLandscapeRight" ]; xml = plist.build(obj); fs.writeFileSync(FILEPATH, xml, { encoding: 'utf8' }); }; 

3. You might need to do call npm install --save plist to get the plist module on your machine (it'll complain that it can't find plist).

4. Call:

    cordova platform rm ios cordova platform add ios 

You should see the lines in the .plist file at this point.

Answer 4

This worked for me in cordova v 7.0.1

<preference name="Orientation" value="default" />

in config.xml

Answer 5

For iOS you need to add "gap://*" property into Content Security Policy in your index.html file (two slashed are required). For example:

 <meta http-equiv="Content-Security-Policy" content="default-src 'self' data:* gap://* tel:* 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'" />

Othewise phone changes orientation only if the user interacts with OS (pressing the front button, showing the notification center with drag down or go to device settings dragging up).

ondeviceready event will neither fire without gap://* value set.

You also need to add cordova-plugin-whitelist plugin.

from corvoda-plugin-whitelist description:

• gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication

Tested on cordova 8.1.2