nathanaela / nativescript-orientation Goto Github PK

A NativeScript plugin to deal with Declarative UI and Screen Orientation

JavaScript 100.00%

nativescript-orientation's Introduction

Archived

See: https://fluentreports.com/blog/?p=1434

NativeScript-Orientation

We have an awesome, new service in town! This service provides tested new and upgraded plugins. All ProPlugins are already known to work with NativeScript 6.x. If you are interested in getting the latest, known working, and enhanced plugins; check out https://ProPlugins.org -- because I strongly believe in what ProPlugins offers the community all of my development work is being done on the ProPlugins version.

Please feel free to continue to use this version of the plugin, it is now 100% being maintained by YOU the community, and as such I will gladly continue to support the community version by accepting any/all PR's for this plugin and publish it. I will attempt to verify the PR doesn't have any backdoors; but I won't be doing any testing, so if it is broken it is up to you to send a PR!

Documentation

The documentation for the plugin is located in the src folder.

nativescript-orientation's People

Contributors

Stargazers

Watchers

nativescript-orientation's Issues

Update to support NativeScript 8.x

This version current uses tns-core-modules, it needs to be updated to use @nativescript/core.

TypeError: page._refreshCss is not a function when require nativescript-orientation

I have added nativescript-orientation to a Angular shared project created with the nativescript/schematics, but when I add the "require( 'nativescript-orientation'
);" to my "app-module.tns.ts" I get the following error (you can see the project here https://www.dropbox.com/s/69hmhfkx7k8coot/oxon.zip?dl=0):

An uncaught Exception occurred on "main" thread.
com.tns.NativeScriptException:
Calling js method onViewAttachedToWindow failed

TypeError: page._refreshCss is not a function
File: "file:///data/data/org.nativescript.oxon/files/app/vendor.js, line: 65916, column: 6

StackTrace:
Frame: function:'applyOrientationToPage', file:'file:///data/data/org.nativescript.oxon/files/app/vendor.js', line: 65916, column: 7
Frame: function:'handleNavigatingTo', file:'file:///data/data/org.nativescript.oxon/files/app/vendor.js', line: 65946, column: 3
Frame: function:'runEvent', file:'file:///data/data/org.nativescript.oxon/files/app/vendor.js', line: 65120, column: 28
Frame: function:'', file:'file:///data/data/org.nativescript.oxon/files/app/vendor.js', line: 65173, column: 9
Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame-common.js.FrameBase._onNavigatingTo', file:'file:///data/data/org.nativescript.oxon/files/app/vendor.js', line: 98987, column: 37
Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame-common.js.FrameBase.performNavigation', file:'file:///data/data/org.nativescript.oxon/files/app/vendor.js', line: 98959, column: 14
Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame-common.js.FrameBase._processNextNavigationEntry', file:'file:///data/data/org.nativescript.oxon/files/app/vendor.js', line: 98952, column: 22
Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame.js.Frame._processNextNavigationEntry', file:'file:///data/data/org.nativescript.oxon/files/app/vendor.js', line: 99399, column: 58
Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame.js.Frame._onAttachedToWindow', file:'file:///data/data/org.nativescript.oxon/files/app/vendor.js', line: 99375, column: 14
Frame: function:'AttachListener.onViewAttachedToWindow', file:'file:///data/data/org.nativescript.oxon/files/app/vendor.js', line: 99299, column: 27

at com.tns.Runtime.callJSMethodNative(Native Method)
at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1101)
at com.tns.Runtime.callJSMethodImpl(Runtime.java:983)
at com.tns.Runtime.callJSMethod(Runtime.java:970)
at com.tns.Runtime.callJSMethod(Runtime.java:954)
at com.tns.Runtime.callJSMethod(Runtime.java:946)
at com.tns.gen.java.lang.Object_vendor_99293_36_AttachListener.onViewAttachedToWindow(Object_vendor_99293_36_AttachListener.java:17)
at android.view.View.dispatchAttachedToWindow(View.java:17456)
at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3326)
at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3333)
at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3333)
at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3333)
at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:1668)
at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1392)
at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:6752)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:911)
at android.view.Choreographer.doCallbacks(Choreographer.java:723)
at android.view.Choreographer.doFrame(Choreographer.java:658)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:897)
at android.os.Handler.handleCallback(Handler.java:790)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:164)
at android.app.ActivityThread.main(ActivityThread.java:6494)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:438)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:807)

How to track change in the orientation?

I am reading the docs but this paragraph seems to be missing something:
This function (if exists) will be ran when the page is first opened so you can set any needed defaults. (This is ran at the same time as the PageNavigatedTo event) This function (if exists) will be ran each time the orientation changes. Unfortunately at this moment some items can't be controlled by CSS like orientation on ScrollView, so this allows you to control change those things when the orientation changes.

Which function is that (mentioned in bold above)? Any examples?

Add support for differentiating between portrait and portrait upside down

Not working with angular

Css rules not working with Angular

It not work in tns Angular 2 project, only work in js project. -Resolved.

show as:
Fail to find module:"nativescript-orientation", relative to :/app/tns_modules/

Using application.run() breaks screen locking

Found this bug as a result of this prior issue: #40

For some reason, using application.run() instead of application.start() makes the screen locking aspect of this plugin no longer work.

Also, if you use application.start() you will get a deprecation warning in the console, urging to use application.run() instead.

Issues with the CSS plugin?

I am using both plugins (orientation and CSS) and I am trying to have something like this (not working):
.android .compass {
width: 100;
height: 100;
margin-left: -250;
margin-bottom: -350;
}
/* Tried both examples below */
.android .landscape .compass {
width: 100;
height: 100;
margin-left: -0;
margin-bottom: -350;
}
.landscape .android .compass {
width: 100;
height: 100;
margin-left: -0;
margin-bottom: -350;
}

How to do that?

Nativescript 3.0 rc: "page.style._resetCssValues()" is not a function

I have a Nativescript 2.5 / Angular project that uses nativescript-orientation that works fine. When upgrading to Nativescript 3.0 rc following the instruction in https://www.nativescript.org/blog/nativescript-3.0-release-candidate-available-today, the app fails to run with the error message

"page.style._resetCssValues()" is not a function

probably the new Nativescript internal interface changed, so the plugin needs updating to work with Nativescript 3.0

Screens(Pages) with background image flicker on iOS

Screens which have a background image set, flicker when using orientation.disableRotation()
The background turns white for a moment and then gets the background image, and this keeps repeating every time you rotate the device.

Disabling rotation on one view disables it for all application views

I'm currently using orientation.disableRotation(); for my home view, but I noticed that all other views are now locked as well. is this how it's supposed to function ? is there a way to lock the rotation for only one view ?

Xcodebuild failed with exit code 65: Plugin conflict nativescript-orientation and kinvey-nativescript-sdk

I work with:
Sidekick 1.16.1 (I just updated to 1.16.2
Nodejs 10.14.1
ppm 6.4.1
Nativescript Cli 5.1.1
kinvey-nativescript-sdk 3.12.4
nativescript-orientation 2.2.1

Update Sidekick 1.16.2 and Nativescript Cli 5.2.3 didn't solve the problem

There is a plugin conflict between kinvey-nativescript-sdk and nativescript-orientation.

To make this issue rebuildable I created a new app with Sidekick, based on the template "Drawer Navigation", project type Javascript.

I installed the plugin kinvey-nativescript-sdk. Build IOS and Android ok.
The I installed the plugin nativescript-orientation. Android build ok.
IOS build failed (command xcodebuild failed with exit code 65).

I deinstalled both plugins and tried the other way round. Same issue. One plugin is ok. But the second causes a failed build on IOS, no matter, which plugin comes first.

I also tried to install the plugins not via Sidekick, but via Terminal tns commands. Same issue.

Any idea? Thanks for your help!

Here is the package-lock.json file and an text file with the Terminal Output:
ios_build_failed.zip

TypeError: Cannot read property 'setOrientation' of undefined

Using https://github.com/tralves/nativescript-vue-webpack-template, orientation is undefined.

I hacked it to work (bottom code) by requiring 'application' then setting a timeout to 2000 with setOrientation. Setting Timeout to 0 works for android but iOS misses the call.

Original code that brings error.

import Vue from 'nativescript-vue'
import App from './components/App.vue'
import orientation from 'nativescript-orientation'
import Vuex from 'vuex'
import Router from 'vue-router'
import Physics from 'nativescript-physics-js'

new Vue({
    render: h => h('app'),
    components: {
        App
    },
    mounted() {
    	orientation.setOrientation('landscape');
        orientation.disableRotation();
    }
}).$start();

Error:

An uncaught Exception occurred on "main" thread.
com.tns.NativeScriptException: 
Calling js method run failed

TypeError: Cannot read property 'setOrientation' of undefined
File: "file:///data/data/org.nativescript.nativescriptvuewebpack/files/app/tns_modules/nativescript-orientation/orientation.js, line: 86, column: 38

StackTrace: 
	Frame: function:'', file:'file:///data/data/org.nativescript.nativescriptvuewebpack/files/app/tns_modules/nativescript-orientation/orientation.js', line: 86, column: 39
	Frame: function:'invoke', file:'file:///data/data/org.nativescript.nativescriptvuewebpack/files/app/tns_modules/tns-core-modules/timer/timer.js', line: 19, column: 48
	Frame: function:'run', file:'file:///data/data/org.nativescript.nativescriptvuewebpack/files/app/tns_modules/tns-core-modules/timer/timer.js', line: 23, column: 13


	at com.tns.Runtime.callJSMethodNative(Native Method)
	at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1088)
	at com.tns.Runtime.callJSMethodImpl(Runtime.java:970)
	at com.tns.Runtime.callJSMethod(Runtime.java:957)
	at com.tns.Runtime.callJSMethod(Runtime.java:941)
	at com.tns.Runtime.callJSMethod(Runtime.java:933)
	at com.tns.gen.java.lang.Runnable.run(Runnable.java:10)
	at android.os.Handler.handleCallback(Handler.java:789)
	at android.os.Handler.dispatchMessage(Handler.java:98)
	at android.os.Looper.loop(Looper.java:164)
	at android.app.ActivityThread.main(ActivityThread.java:6541)
	at java.lang.reflect.Method.invoke(Native Method)
	at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:240)
	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:767)

Hack to make things work:

const application = require('application')
import Vue from 'nativescript-vue'
import App from './components/App.vue'
import orientation from 'nativescript-orientation'
import Vuex from 'vuex'
import Router from 'vue-router'
import Physics from 'nativescript-physics-js'

setTimeout(()=>{
	orientation.setOrientation('landscape');
	orientation.disableRotation();
}, 2000)

new Vue({
    render: h => h('app'),
    components: {
        App
    },
    mounted() {
    	*/orientation.setOrientation('landscape');
        orientation.disableRotation();*/
    }
}).$start();

how to use it in typescript project

It is not work in other-common.css file, It only work in app.css file

The sensors option in getOrientation is not implemented

I needed a solution to guess the device rotation, while the app is locked in Portrait. I saw the method getOrientation(true), and the doc says it will infer the orientation from sensors on Android. Otherwise it doesn't seem this mecanism is implemented.

Don't know if you plan to do it one days (could be great to have Android+iOS), but this issue is a reminder.

css doesn't update in cached view

I am building an app with Angular and TypeScript, starting with Nativescript's TabView template (created using Sidekick), using the orientation plugin, which is very useful except for this one issue.

It worked as expected when switching orientations on one tab or page. But when I viewed all tabs on one orientation, switched my orientation, then navigated to the other tabs i'd already seen, they did not change their class to or from .landscape.

For instance, I open the app in portrait orientation, open each tab, and they all display correctly. Then I turn my device to landscape orientation, and my current view changes classes and styles appropriately. Staying in landscape orientation, I now switch to other tabs, which still have the portrait styles and classes applied to them.

Switching tabs does not reload the views, but turning the screen does reload the view (only the current one). A possible solution would be to move away from the tab scheme, and use the bottom icons exclusively as links to the top level of each section (6-icon grid). But this would be a dramatic change in the navigation scheme and may not be worth it. Another possible solution would be to force a reload of the views as they open, but I have not found a way to accomplish this.

For now I have applied a workaround which disables landscape orientation, keeping the views in portrait orientation, and stopping them form changing styles.

Any help would be appreciated, as I would like to be able to use portrait and landscape navigation in my app.

Here is an app that shows the problem:
https://github.com/rchisholm/orientation_bug_example.git

This app should appear green in portrait, red in landscape. if you navigate to each tab, turn the screen to landscape, then navigate back through the tabs (staying in landscape), they will appear green, when they should appear red.

Error on Android when change screen orientation

Hi! I'm getting this error Nativescript/Nativescript#4966 Thanks in advance!

v4 upgrade ?

Failed to find module

Hi, appreciate that you're working on this repo. IMO it should be a part of Nativescript core.
I'm running Node 9.2 with Nativescript 3, with https://github.com/tralves/nativescript-vue-webpack-template.

My Code:

import Vue from 'nativescript-vue'
import App from './components/App.vue'
import Orientation from 'nativescript-orientation'
import Vuex from 'vuex'
import Router from 'vue-router'
import Physics from 'nativescript-physics-js'

new Vue({
    render: h => h('app'),
    components: {
        App
    },
    mounted() {
    	Orientation.setOrientation('landscape');
    	Orientation.disableRotation();
    }
}).$start();

Error on Android Emulator

An uncaught Exception occurred on "main" thread.
java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: 

Error calling module function 

Error: com.tns.NativeScriptException: Failed to find module: "nativescript-orientation", relative to: app/tns_modules/
    com.tns.Module.resolvePathHelper(Module.java:146)
    com.tns.Module.resolvePath(Module.java:55)
    com.tns.Runtime.runModule(Native Method)
    com.tns.Runtime.runModule(Runtime.java:530)
    com.tns.Runtime.run(Runtime.java:522)
    com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:19)
    android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1118)
    android.app.ActivityThread.handleBindApplication(ActivityThread.java:5791)
    android.app.ActivityThread.-wrap1(Unknown Source:0)
    android.app.ActivityThread$H.handleMessage(ActivityThread.java:1661)
    android.os.Handler.dispatchMessage(Handler.java:105)
    android.os.Looper.loop(Looper.java:164)
    android.app.ActivityThread.main(ActivityThread.java:6541)
    java.lang.reflect.Method.invoke(Native Method)
    com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:240)
    com.android.internal.os.ZygoteInit.main(ZygoteInit.java:767)
File: "<unknown>, line: 1, column: 265

StackTrace: 
	Frame: function:'require', file:'', line: 1, column: 266
	Frame: function:'', file:'file:///data/data/org.nativescript.nativescriptvuewebpack/files/app/app.js', line: 6, column: 35
	Frame: function:'require', file:'', line: 1, column: 266


Error: com.tns.NativeScriptException: Failed to find module: "nativescript-orientation", relative to: app/tns_modules/
    com.tns.Module.resolvePathHelper(Module.java:146)
    com.tns.Module.resolvePath(Module.java:55)
    com.tns.Runtime.runModule(Native Method)
    com.tns.Runtime.runModule(Runtime.java:530)
    com.tns.Runtime.run(Runtime.java:522)
    com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:19)
    android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1118)
    android.app.ActivityThread.handleBindApplication(ActivityThread.java:5791)
    android.app.ActivityThread.-wrap1(Unknown Source:0)
    android.app.ActivityThread$H.handleMessage(ActivityThread.java:1661)
    android.os.Handler.dispatchMessage(Handler.java:105)
    android.os.Looper.loop(Looper.java:164)
    android.app.ActivityThread.main(ActivityThread.java:6541)
    java.lang.reflect.Method.invoke(Native Method)
    com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:240)
    com.android.internal.os.ZygoteInit.main(ZygoteInit.java:767)
File: "<unknown>, line: 1, column: 265

StackTrace: 
	Frame: function:'require', file:'', line: 1, column: 266
	Frame: function:'', file:'file:///data/data/org.nativescript.nativescriptvuewebpack/files/app/app.js', line: 6, column: 35
	Frame: function:'require', file:'', line: 1, column: 266


	at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5794)
	at android.app.ActivityThread.-wrap1(Unknown Source:0)
	at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1661)
	at android.os.Handler.dispatchMessage(Handler.java:105)
	at android.os.Looper.loop(Looper.java:164)
	at android.app.ActivityThread.main(ActivityThread.java:6541)
	at java.lang.reflect.Method.invoke(Native Method)
	at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:240)
	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:767)
Caused by: com.tns.NativeScriptException: 

Error calling module function 

Error: com.tns.NativeScriptException: Failed to find module: "nativescript-orientation", relative to: app/tns_modules/
    com.tns.Module.resolvePathHelper(Module.java:146)
    com.tns.Module.resolvePath(Module.java:55)
    com.tns.Runtime.runModule(Native Method)
    com.tns.Runtime.runModule(Runtime.java:530)
    com.tns.Runtime.run(Runtime.java:522)
    com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:19)
    android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1118)
    android.app.ActivityThread.handleBindApplication(ActivityThread.java:5791)
    android.app.ActivityThread.-wrap1(Unknown Source:0)
    android.app.ActivityThread$H.handleMessage(ActivityThread.java:1661)
    android.os.Handler.dispatchMessage(Handler.java:105)
    android.os.Looper.loop(Looper.java:164)
    android.app.ActivityThread.main(ActivityThread.java:6541)
    java.lang.reflect.Method.invoke(Native Method)
    com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:240)
    com.android.internal.os.ZygoteInit.main(ZygoteInit.java:767)
File: "<unknown>, line: 1, column: 265

StackTrace: 
	Frame: function:'require', file:'', line: 1, column: 266
	Frame: function:'', file:'file:///data/data/org.nativescript.nativescriptvuewebpack/files/app/app.js', line: 6, column: 35
	Frame: function:'require', file:'', line: 1, column: 266


Error: com.tns.NativeScriptException: Failed to find module: "nativescript-orientation", relative to: app/tns_modules/
    com.tns.Module.resolvePathHelper(Module.java:146)
    com.tns.Module.resolvePath(Module.java:55)
    com.tns.Runtime.runModule(Native Method)
    com.tns.Runtime.runModule(Runtime.java:530)
    com.tns.Runtime.run(Runtime.java:522)
    com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:19)
    android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1118)
    android.app.ActivityThread.handleBindApplication(ActivityThread.java:5791)
    android.app.ActivityThread.-wrap1(Unknown Source:0)
    android.app.ActivityThread$H.handleMessage(ActivityThread.java:1661)
    android.os.Handler.dispatchMessage(Handler.java:105)
    android.os.Looper.loop(Looper.java:164)
    android.app.ActivityThread.main(ActivityThread.java:6541)
    java.lang.reflect.Method.invoke(Native Method)
    com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:240)
    com.android.internal.os.ZygoteInit.main(ZygoteInit.java:767)
File: "<unknown>, line: 1, column: 265

StackTrace: 
	Frame: function:'require', file:'', line: 1, column: 266
	Frame: function:'', file:'file:///data/data/org.nativescript.nativescriptvuewebpack/files/app/app.js', line: 6, column: 35
	Frame: function:'require', file:'', line: 1, column: 266


	at com.tns.Runtime.runModule(Native Method)
	at com.tns.Runtime.runModule(Runtime.java:530)
	at com.tns.Runtime.run(Runtime.java:522)
	at com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:19)
	at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1118)
	at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5791)
	... 8 more

Error on iOS

Project successfully built.
Installing...
Successfully installed on device with identifier '0C285A6A-CE36-4D75-8122-D933CEC7F193'.
Successfully transferred all files.
Refreshing application...
Successfully synced application org.nativescript.nativescriptvuewebpack on device 0C285A6A-CE36-4D75-8122-D933CEC7F193.
Preparing project...
Project successfully prepared (iOS)
Successfully transferred app.css.
Successfully transferred app.js.
Refreshing application...
Successfully synced application org.nativescript.nativescriptvuewebpack on device 0C285A6A-CE36-4D75-8122-D933CEC7F193.
1   0x109235bc8 -[TNSRuntime executeModule:referredBy:]
2   0x108d17c71 main
3   0x10c06bd81 start
file:///app/app.js:6:42: JS ERROR Error: Could not find module 'nativescript-orientation'. Computed path '/Users/i/Library/Developer/CoreSimulator/Devices/0C285A6A-CE36-4D75-8122-D933CEC7F193/data/Containers/Bundle/Application/D0389E9B-0769-47CC-B7A4-F9BB2596F36D/tns.app/app/tns_modules/nativescript-orientation'.

Better integration in Angular-based projects

I was taking a look at this plugin as I needed to integrate some orientation-dependent functions in an application I am developing, but I'm sad to see there is no full and direct support for Angular-based projects.

I decided to develop a little extension to this plugin adding an Angular Module and an Angular Service to allow components to access orientation-related functionalities through Angular-DI.

If it is considered useful, I am willing to open a pull request to show my changes and, if you can help me, test the resulting plugin.

Using the plugin with different devices

Hi, Nathanael. First of all, thank you very much for this plugin. It has helped me a lot.

My questions is:

Is it possible to use the plugin like this:
.landscape .tablet .classname {

}

I have tried it but it did not work and just wanted to check if it's because it doesn't work or if I'm doing something wrong.

Thank you.

disableRotation() doesn't work in Android, in iOS it makes the background image flicker

I am trying to enforce disable rotation app wide. I installed the plugin and added the following code in my app.ts

var orientation = require('nativescript-orientation');
  orientation.disableRotation();

But on android the app is crashing and giving me an error:

An uncaught Exception occurred on "main" thread.
java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: 

Error calling module function 

TypeError: Cannot read property 'disableRotation' of undefined
File: "file:///data/data/org.sunapsis.iommobile/files/app/tns_modules/nativescript-orientation/orientation.js, line: 60, column: 34

StackTrace: 
	Frame: function:'orientation.disableRotation', file:'file:///data/data/org.sunapsis.iommobile/files/app/tns_modules/nativescript-orientation/orientation.js', line: 60, column: 35
	Frame: function:'', file:'file:///data/data/org.sunapsis.iommobile/files/app/app.js', line: 17, column: 13
	Frame: function:'require', file:'', line: 1, column: 266


TypeError: Cannot read property 'disableRotation' of undefined
File: "<unknown>, line: 1, column: 265

StackTrace: 
	Frame: function:'orientation.disableRotation', file:'file:///data/data/org.sunapsis.iommobile/files/app/tns_modules/nativescript-orientation/orientation.js', line: 60, column: 35
	Frame: function:'', file:'file:///data/data/org.sunapsis.iommobile/files/app/app.js', line: 17, column: 13
	Frame: function:'require', file:'', line: 1, column: 266


	at android.app.ActivityThread.handleBindApplication(ActivityThread.java:4747)
	at android.app.ActivityThread.-wrap1(ActivityThread.java)
	at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1418)
	at android.os.Handler.dispatchMessage(Handler.java:102)
	at android.os.Looper.loop(Looper.java:148)
	at android.app.ActivityThread.main(ActivityThread.java:5459)
	at java.lang.reflect.Method.invoke(Native Method)
	at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:728)
	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:618)
Caused by: com.tns.NativeScriptException: 

Error calling module function 

TypeError: Cannot read property 'disableRotation' of undefined
File: "file:///data/data/org.sunapsis.iommobile/files/app/tns_modules/nativescript-orientation/orientation.js, line: 60, column: 34

StackTrace: 
	Frame: function:'orientation.disableRotation', file:'file:///data/data/org.sunapsis.iommobile/files/app/tns_modules/nativescript-orientation/orientation.js', line: 60, column: 35
	Frame: function:'', file:'file:///data/data/org.sunapsis.iommobile/files/app/app.js', line: 17, column: 13
	Frame: function:'require', file:'', line: 1, column: 266


TypeError: Cannot read property 'disableRotation' of undefined
File: "<unknown>, line: 1, column: 265

StackTrace: 
	Frame: function:'orientation.disableRotation', file:'file:///data/data/org.sunapsis.iommobile/files/app/tns_modules/nativescript-orientation/orientation.js', line: 60, column: 35
	Frame: function:'', file:'file:///data/data/org.sunapsis.iommobile/files/app/app.js', line: 17, column: 13
	Frame: function:'require', file:'', line: 1, column: 266


	at com.tns.Runtime.runModule(Native Method)
	at com.tns.Runtime.runModule(Runtime.java:580)
	at com.tns.Runtime.run(Runtime.java:574)
	at com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:17)
	at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1036)
	at android.app.ActivityThread.handleBindApplication(ActivityThread.java:4744)
	... 8 more

Moreover the same thing is working fine in iOS, but the background image flickers and turns white for few secs on rotating the device.

Is there a way to enforce a app wide orientation?

cannot get property of undefined

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 lists the plugin so I am not sure what I might be doing wrong.

NativeScript 3.0: Causes error on iOS when used with nativescript-dom (t is undefined)

My app needs nativescript-dom upon initialization, but only needs nativescript-orientation in a single controller. When I require nativescript-orientation (in my controller) after having required nativescript-dom (earlier in app.js), I get the following error:

JS ERROR TypeError: undefined is not an object (evaluating 't.cssClasses.forEach')

(t is undefined)

This only occurs on iOS.

CLI: 3.0.3
Cross-platform modules: 3.0.1
iOS Runtime: 3.0.1
Plugin(s): nativescript-orientation: 1.6.1, nativescript-dom: 2.0.0, tns-core-modules: 3.0.1

As a temporary workaround, and since I already have nativescript-dom required in my app.js, I've commented out line 26 of orientation.js:

//require('nativescript-dom');

Right Landscape Doesnt Work as Expected

Hi,

I have a problem with right landscape. I didnt use any parameter like right or left. I only imported it and put landscape in css. However its working for left landscape but its not working for right landscape.

PS: When i tried turn it from left to right, right landscape worked without problem.

So it doesnt work if i first turn it right.

plugins orientation and listview 6.0.0 conflict

TestListView.zip

I have a project, which works fine with nativescript-ui-listview 5.1.1. But when I update to 6.0.0. the menu item 'open' runs into an error.

I have attached a zip-File, which contains the project.

In the meantime I found out, which code causes the error:
In app.js the statement
require("nativescript-orientation");

When I delete this statement, there is no error, when calling menu item 'open'.

Which platform(s) does your issue occur on?

Android 5.2.3

Please provide the following version numbers that your issue occurs with:

Progress NativeScript UI plugin version: 6.0.0.
CLI: 5.2.3.
Cross-platform modules: 5.2.2
Runtime(s): tns-android: 5.0.0

Please tell us how to recreate the issue in as much detail as possible.

Start the application ..
Chose Item 'open' from menu.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

I attached a runnable project (TestListView.zip)

Plugin causes double firing of resume event

I've noticed a strange behavior. I have an app that has a resume event. If I add setOrientation to the resume event, the event fires twice. I have tested this several times and found it consistently to be the case on device.

Plugin version 2.2.1, NS version 5.3.1. Angular. iOS. On plugged in device.

Running with $ tns run ios --bundle...

service.ts:

var orientation = require('nativescript-orientation');
...
constructor(){
   applicationOn(suspendEvent, this.suspendEvent)
   applicationOn(resumeEvent, this.resumeEvent
}

suspendEvent = (args) =>{ }

resumeEvent = (args) => {
  orientation.setOrientation("portrait")  //THIS IS THE LINE THAT CAUSES RESUME EVENT TO FIRE TWICE
}

app.module.ts

 import { Service} from "~/app/service"
...
  constructor(private service: Service){
    this.service.resumeEvent
  }

If I include the orientation.setOrientation("portrait") in the service resume event, like above, the event fires twice if the app is resumed from landscape mode. So, if the phone is in landscape mode when the app resumes, and the setOrientation line is there, the resume event fires twice.

It only fires once if the setOrientation line is not there.

@NathanaelA, I know you are focused on the proplugins version, but this seems to be an odd mystery.

Why might this happen?

Error with "page.style._resetCssValues" since NativeScript 3.0

Hi,

I have following error since nativescript 3.0 update.

file:///app/tns_modules/nativescript-orientation/orientation.js:302:28: JS ERROR TypeError: page.style._resetCssValues is not a function. (In 'page.style._resetCssValues()', 'page.style._resetCssValues' is undefined)

My solution is to comment this row in orientation.js.

Can you fix this or remove it in your next commit?

Thx.

page._refreshCss is not a function - NativeScript 3.3.0

After updating to nativescript 3.3.0 and version 2.0.0 of this package app crashes on launch.

Screenshot of error:

As a temporary fix I removed line 301 in orientation.js and the problem no longer occurs.

Neither page._refreshCss() or page._resetCssValues() seem to exists

disableRotation() does not have any effect

Calling disableRotation() appears to have no effect.

I get no errors, but rotating my device still rotates the app.

Blank screen when overview button is tapped in portrait mode.

Hello @NathanaelA

I'm using Galaxy s8 ( real device) with nativescript angular & and the orientation plugin in a game that I've built.

Tns : 4.1.0.

Ok. First , the game is a landscape game only. But although this , I've specified android:screenOrientation="portrait" , becuase of a known issue of 2 sec delay when app is declared as landscape :

Later , In main.ts I do this :

var orientation = require('nativescript-orientation');
orientation.setOrientation("landscape");

So the app startup like this : ( sorry for pixelation , it's still not published).

Even if the device is in protrait position :

Which is fine and the desired behaviour.

However , If the app is loading when the device in a landscape position , and then tap the Overview button , then I see this :

However , If the app is loading when the device in a portrait position , and then tap the Overview button , then I see this :

If I tap the window now , I do see the app correctly because of this :

  applicationOn(resumeEvent, (args: ApplicationEventData) =>{ orientation.setOrientation("landscape");})

If I completely remove the plugin , I do see full window when overview is tapped. ( both n landscape and portrait position). ( but then I see the game ui - messed up becuase the layouts were built to be displayed at landscape screen only)

Have I used the plugin Incorrectly that I see this problem ?

`setOrientation()` causes `ExpressionChangedAfterItHasBeenCheckedError`

Strange one here. iOS. "nativescript-angular": "~7.1.0", "nativescript-orientation": "~2.2.1"

landscape.component.ts:

...
  constructor(
    private route: ActivatedRoute,
    private page: Page,
    private routerExtensions: RouterExtensions
  ) {
    this.page.actionBarHidden = true;
  }

  ngOnInit() {
    this.id = this.route.snapshot.params['id'];
    orientation.setOrientation('landscape', false);
 }

my landscape.component.html is completely empty.

the LandscapeComponent is loaded via navigation from another component. The onCreate() method is called from a (tap)="onCreate() button press:

  async onCreate() {
    try {
      const item = await this.createItem();
      console.log(`Created`, item);

      this.routerExtensions.navigate(['../landscape', item.id], {
        clearHistory: true
      });
    } catch (error) {
      console.error('Problem creating', error);
    }
  }

If I comment out orientation.setOrientation() I don't get the error.

Any ideas? FWIW it still flops the screen orientation to landscape.