How to allow only these orientations in my Cordova/Phonegap app?

Question

I created an iOS (iPhone) App using Cordova and want to only allow the following orientations:

• Portrait
• Landscape Left
• Landscape Right

This also means that "upside down" should not be allowed:

I know that I can set this in Xcode but when ever I start a new Cordova build this setting gets overwritten.

So I checked Cordova docs and found this: http://cordova.apache.org/docs/en/5.1.1/config_ref_index.md.html#The%20config.xml%20File

It says that I can set orientation in config.xml like this:

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

But I don't see how I can set a more fine granular setting as I described above. How can this be done?

---

Note: I am on Cordova 5.1.1

Answer 1

You can use config.xml'

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

along with shouldRotateToOrientation(degrees) callback as stated in the docs like this:

onDeviceReady: function() {
    app.receivedEvent('deviceready');
    window.shouldRotateToOrientation = function(degrees) {
        return degrees !== 180;
    };
},

Answer 2

You can use an after_prepare hook which will apply the settings after the cordova prepare and therefore avoid them getting overwritten on each cordova build. Place the following code in <your_project>/hooks/after_prepare/some_file.js:

#!/usr/bin/env node

// Set support for all orienations in iOS .plist - workaround for this cordova bug: https://issues.apache.org/jira/browse/CB-8953
var platforms = process.env.CORDOVA_PLATFORMS.split(',');
platforms.forEach(function(p) {
    if (p == "ios") {
        var fs = require('fs'),
            plist = require('plist'),
            xmlParser = new require('xml2js').Parser(),
            plistPath = '',
            configPath = 'config.xml';
        // Construct plist path.
        if (fs.existsSync(configPath)) {
            var configContent = fs.readFileSync(configPath);
            // Callback is synchronous.
            xmlParser.parseString(configContent, function (err, result) {
                var name = result.widget.name;
                plistPath = 'platforms/ios/' + name + '/' + name + '-Info.plist';
            });
        }
        // Change plist and write.
        if (fs.existsSync(plistPath)) {
            var pl = plist.parseFileSync(plistPath);
            configure(pl);
            fs.writeFileSync(plistPath, plist.build(pl).toString());
        }
        process.exit();
    }
});
function configure(plist) {
    var iPhoneOrientations = [
        'UIInterfaceOrientationLandscapeLeft',
        'UIInterfaceOrientationLandscapeRight',
        'UIInterfaceOrientationPortrait'
    ];
    var iPadOrientations = [
            'UIInterfaceOrientationLandscapeLeft',
            'UIInterfaceOrientationLandscapeRight',
            'UIInterfaceOrientationPortrait'
    ];
    plist["UISupportedInterfaceOrientations"] = iPhoneOrientations;
    plist["UISupportedInterfaceOrientations~ipad"] = iPadOrientations;
}

Note: you'll need to install the plist and xml2js node modules if you don't already have them.