How to set orientation in nativescript

Question

Hello I would like to know how to set device orientation in nativescript. Specifically I want the application that I am writing to stay in the same orientation (portrait) at all times so that rotating the device does not cause it to go into landscape.

I tried the nativescript-orientation plugin and setOrientation.

var orientation = require('nativescript-orientation');
console.log(JSON.stringify(orientation));// outputs JS: {}
orientation.setOrientation("portrait");

However I get the error "Cannot read property setOrientation of undefined. tns plugin list shows that the plugin is installed. Also I tried removing the platforms/android directory and running tns platform add android with the same result.

I also tried putting various combinations of android:screenOrientation="portrait" into AndroidManifest.xml without success.

AndroidManifest.xml from inside App_resources looks like this

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="__PACKAGE__"
    android:versionCode="1"
    android:versionName="1.0">

    <supports-screens
        android:smallScreens="true"
        android:normalScreens="true"
        android:largeScreens="true"
        android:xlargeScreens="true"/>

    <uses-sdk
        android:minSdkVersion="17"
        android:targetSdkVersion="__APILEVEL__"/>

    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:screenOrientation="portrait"
        android:name="com.tns.NativeScriptApplication"
        android:allowBackup="true"
        android:icon="@drawable/icon"
        android:label="@string/app_name"
        android:theme="@style/AppTheme">

        <activity
            android:name="com.tns.NativeScriptActivity"
            android:label="@string/title_activity_kimera"
            android:configChanges="keyboardHidden|orientation|screenSize"
            android:theme="@style/LaunchScreenTheme">
            <meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name="com.tns.ErrorReportActivity"/>
    </application>
</manifest>

after modifying the AndroidManifest.xml did you do a complete `build`? Also you likely need to uninstall the current .apk you have on the device/emulator and then `run` or `livesync` the new build. The manifest option is the better alternative to force one orientation on android apps from what I know. So it will work but if you didn't uninstall the old .apk you likely have a caching issue on the device :) — Brad Martin, Nov 03 '16 at 20:37
I have deleted the apk and run it using `tns run android`. Also I added the android manifest.xml in case I missed something — xerotolerant, Nov 03 '16 at 23:49

score 34 · Accepted Answer · edited Apr 24 '20 at 05:59

34

You will have to update your AndroidManifest.xml & Info.plist in your App_Resources.

AndroidManifest.xml

Set screenOrientation to portrait on your main activity

<activity android:name="com.tns.NativeScriptActivity" 
 ... 
 android:screenOrientation="portrait">

Info.plist

Keep only the portrait orientation, remove rest from UISupportedInterfaceOrientations.

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

Note: Make sure you run a clean build after these changes.

edited Apr 24 '20 at 05:59

Manoj

21,753
3
20
41

answered Nov 03 '16 at 21:50

Dean Le

2,094
13
17

Thanks for your suggestion however I added it the flag to the Android manifest already and it does not seem to work. I updated my post with the manifest. perhaps I put the flag in the wrong place? Can you look at it and tell me please? – xerotolerant Nov 04 '16 at 04:37
1

I put it inside the `activity` tag. Where did you put it? – Dean Le Nov 04 '16 at 06:52
I see that you put it inside `application` tag but outside `activity`. Try putting it into `activity`. P/s: edited answer – Dean Le Nov 04 '16 at 20:18
Oh wow. Idk I thought I put it in the activity tag. I guess the first time I did it I didn't delete the apk off of the device. – xerotolerant Nov 04 '16 at 20:26
10

For `iOS` you can go to `app/App_Resources/iOS/Info.plist`. Inside this file you will find `UIInterfaceOrientationPortrait` and Landscape etc... Just comment out or delete the orientations you don't want to support. No need to open Xcode :) – Mudlabs Dec 13 '17 at 01:54

score 8 · Answer 2 · answered Dec 16 '18 at 08:36

For iOS: (Without Xcode, just manipulate one file.)

Open file app/App_Resources/iOS/Info.plist
Comment out or delete:

<string>UIInterfaceOrientationLandscapeLeft</string> <string>UIInterfaceOrientationLandscapeRight</string>

app/App_Resources/iOS/Info.plist

    ...     
    <key>UISupportedInterfaceOrientations</key>
    <array>
        <string>UIInterfaceOrientationPortrait</string>
        <string>UIInterfaceOrientationLandscapeLeft</string>
        <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
    <key>UISupportedInterfaceOrientations~ipad</key>
    <array>
        <string>UIInterfaceOrientationPortrait</string>
        <string>UIInterfaceOrientationPortraitUpsideDown</string>
        <string>UIInterfaceOrientationLandscapeLeft</string>
        <string>UIInterfaceOrientationLandscapeRight</string>
    </array>

(Props to @mudlabs, who already mentioned this solution in a comment.)

score 4 · Answer 3 · answered Jul 01 '18 at 13:34

4

In case you are using NativeScript Sidekick it is possible to set orientation for Android an iOS from project properties.

answered Jul 01 '18 at 13:34

yavulan

267
4
8

score 4 · Answer 4 · answered Apr 20 '19 at 23:25

The top answer is correct but for some cases, adding only android:screenOrientation does not work.

I got it working by adding android:screenOrientation="portrait" android:configChanges="keyboardHidden|orientation|screenSize" and take note the order, screenOrientation first before the configChanges.

Actually i've tested it in both android studio and the Nativescript.

How to set orientation in nativescript

4 Answers4

Linked

Related