wonday/react-native-orientation-locker

A react-native module that can listen on orientation changing of device, get current orientation, lock to preferred orientation.

react-native-orientation-locker's Issues

Readme typo

There is a typo in readme

pod 'react-native-orientation-locker', :path => 'node_modules/react-native-orientation-locker'

should be:

pod 'react-native-orientation-locker', :path => '../node_modules/react-native-orientation-locker'

otherwise throws error No podspec found for react-native-orientation-locker in node_modules/react-native-orientation-locker when running pod install inside the ios folder of the project.

Android - lockToPortrait does not work.

I've tried to make it work as described on the main page, but it does not works.
`
import React from 'react';
import Orientation from 'react-native-orientation-locker';

export default class LoginScreen extends React.Component {
constructor(props){
super(props);
}
componentDidMount(){
Orientation.lockToPortrait();
}
`

Undefined is not an object (evaluating 'OrientationNative.lockToPortrait')

I followed all the linking steps in the ReadMe and still get this error.

undefined is not an object (evaluating 'OrientationNative.lockToPortrait')
lockToPortrait
    index.js:47:26
<unknown>
    App.js:16:2
loadModuleImplementation
    require.js:320:6
<unknown>
    index.js:5
loadModuleImplementation
    require.js:320:6
guardedLoadModule
    require.js:207:45
global code

In my App.js I have:

import Orientation from 'react-native-orientation-locker'; 
Orientation.lockToPortrait();

Any idea what I am doing wrong?

native module cannot be null

After importing 'react-native-orientation-locker', I get this error: native module cannot be null. Anyone else have this problem?

get device autoRotate status

Hi,
Is it possible to get device auto rotate state?
My app should be in Portrait lock always unless a video is visible.
I want to disable the option to change the orientation to Landscape when the auto rotate is off in the device level.

lockToPortrait not always working

Hi,
Great package, solved a lot of issues I had with react-native-orientation.

My scenario is this:

1. app is lockToPortrait when initialized -> working great
2. moving to a screen with video -> the app still locked in portrait, but now addOrientationListener is added.
3. rotate the device, the app remain in portrait (the app is still locked)
4. playing video -> unlockAllOrientations
5. rotating device -> video in full screen, in landscape.
6. pressing device back button when device remains in landscape orientation:
   6.1 rotating video, existing full screen
   6.2 lockToPortrait again

Actual result: app remain in landscape orientation in some Android devices and in some it rotate to portrait
Expected result: app rotate to portrait.

7. press device back button again, while device remains in landscape orientation.

Actual result: app rotate to portrait.
Expected result: app rotate to portrait.

I did debugging and this is what I found.
In onOrientationChanged method in OrientationModule.java file.
In line 70, the value is set to PORTRAIT: deviceOrientationValue = "PORTRAIT";
but in line 84, if isLocked is true than getCurrentOrientation method is called.
Now, isLocked flag is true, since in my JS I used Orientation.lockToPortrait method which set isLocked flag to true.
And in getCurrentOrientation method, since the device orientation is LANDSCAPE, the return value is LANDSCAPE-XXX.

I think that the problem is in line 181, setRequestedOrientation does not work properly inlockToPortrait method?

Maybe there is a need to add delay, some kind of timeout to make sure the lock will "catch"?

@wonday , What do you think?

Can we have the function to check if the screen is locked?

Hi @wonday , first of all, I really want to say thank you for continue this awesome project and did awesome things to improve it.

My question is that can we have a function to check if the screen is already locked by the library (not from Android Manifest or iOS Xcode).

Here is my case, I have a swipe view and the condition is that:
1/ Image: lock portrait
2/ Video: unlock

So when users swipe, library will keep calling the function lock screen, which sounds redundant, right?

If there is a way to check, please let me know.

Thank you again for the great work! 👍

Remove obsolete React podspec dependency

Please remove s.dependency 'React' from podspec file, If you don't remove it then it forces React 0.11.0 to be installed via pods and we'll have to install React and all the subspecs via pod. This could get messy for new comers to RN.

rnpm-install ERR! Something went wrong while linking. Error: Cannot read property 'match' of undefined

Hello,

When using react-native link react-native-orientation-locker, I got this error. I thought that maybe it's because I didn't install rnpm，so I install it and tried again, but it still report the error.

This is the log:
react-native link react-native-orientation-locker
Scanning folders for symlinks in /Users/tianmiao185/Documents/Projects/smartcitycard/node_modules (17ms)
rnpm-install info Linking react-native-orientation-locker ios dependency
rnpm-install ERR! Something went wrong while linking. Error: Cannot read property 'match' of undefined
Please file an issue here: https://github.com/facebook/react-native/issues

Cannot read property 'match' of undefined

thank you for your work!

ios use question

My app only has one screen that will be displayed landscape under certain conditions, otherwise all screens it is always Portrait screen, so IOS must be set the orientation "Portrait" and "Landscape Left" in xcode ?

Locking to Portrait on app launching rotates from Landscape to Portrait (iOS)

I want to lock the orientation of the first screen of app to Portrait. But when I launch the application I see for a while landscape orientation and then quickly rotating to the Portrait orientation. Next screens are okey.

Here is my code:

componentDidMount() {
        Orientation.lockToPortrait()
}

Is it possible to solve this performance issue?

lock to portrait doesnot work on iOS

Hi,
I am locking the orientation to portrait, in componentDidMount of my screen.
It locks the screen to portrait on android, but doesnt seem to work on iOS.

Snippet:
import Orientation from "react-native-orientation-locker";
componentDidMount() {
Orientation.lockToPortrait(); // this will lock the view to Portrait
}

this._nativeModule.addListener is not function error

Hi,

I got this error, when I try to use orientation-locker.

RN version 0.58

componentDidMount() {
Orientation.lockToPortrait();
Orientation.addOrientationListener(this._onOrientationDidChange);
}

_onOrientationDidChange = (orientation) => {
if (orientation == 'LANDSCAPE') {
//do something with landscape left layout
} else {
//do something with portrait layout
}
};

Android: addOrientationListener gets triggered infinite times

The addOrientationListener keeps getting triggered many times irrespective of if the device changed its orientation or not. Holding the device in portrait, will trigger this listener many times.

Also, this does not get triggered when we do a lockToPortrait().

Tried it on RN 0.39.2 and 0.44

Trigger change orientation when a button is pressed...

Can i use this plugin to implement orientation change when a button is pressed?

[feature request] get orientation for app and device

there is a difference between app orientation and device orientation, e.g. you may lock an app to a specific orientation (portrait) and later you want to know the device orentation (which may change to landscape) without unlocking the app orientation itself.

Typescript definitions

I've come up to this, forking @types/react-native-orientation, for those who are interested:

// Definitions by: Jules Randolph <https://github.com/jsamr>

declare module 'react-native-orientation-locker' {
  namespace Orientation {
    type Orientation = "PORTRAIT" | "PORTRAIT-UPSIDEDOWN" | "LANDSCAPE-LEFT" | "LANDSCAPE-RIGHT" | "UNKNOWN";
  
    export function addOrientationListener(callback: (orientation: Orientation, deviceOrientation: Orientation) => void): void;
    export function removeOrientationListener(callback: (orientation: Orientation, deviceOrientation: Orientation) => void): void;
  
    export function getInitialOrientation(): Orientation;
    export function lockToPortrait(): void;
    export function lockToLandscape(): void;
    export function lockToLandscapeLeft(): void;
    export function lockToLandscapeRight(): void;
    export function unlockAllOrientations(): void;
    export function getOrientation(callback: (orientation: Orientation) => void): void;
    export function getDeviceOrientation(callback: (orientation: Orientation) => void): void;
  }
  
  export = Orientation;
}

Edit: Rev 1.1

undefined is not an object (evaluating 'OrientationNative.initialOrientation)

Hello
I'm trying to lock my app orientation to portrait using this repo, but I get this error:
TypeError: undefined is not an object (evaluating 'OrientationNative.initialOrientation)

Below is the code I'm using. I really appreciate any help you can get me. Thank you.

_onOrientationDidChange = (orientation) => {
    if (orientation == 'LANDSCAPE-LEFT') {
      alert("landscape");
    } else {
      alert("portrait");
    }
  };
componentWillMount() {
	   var initial = Orientation.getInitialOrientation();
    if (initial === 'PORTRAIT') {
      alert ("portrait");
    } else {
      alert ("landscape");
    }
}

async componentDidMount() {
	  Orientation.getAutoRotateState((rotationLock) => this.setState({rotationLock}));
	   Orientation.lockToPortrait();
	   Orientation.addOrientationListener(this._onOrientationDidChange);
}
    

haste module naming collision

i just install this library and configure pod, when i try to run my project i get this error

UnhandledPromiseRejectionWarning: Error: jest-haste-map: Haste module naming collision:
Duplicate module name: react-native
Paths: /MyDrive/Projects/React/xxx/node_modules/react-native/package.json collides with /MyDrive/Projects/React/xxx/ios/Pods/React/package.json

if i remove this library, project start working again..

"react": "16.6.0-alpha.8af6728",
 "react-native": "0.57.4",
"react-native-orientation-locker": "^1.0.19",

is it necessary to use pod? when i execute "pod install" it install two module

1. react
2. react-native-orientation-locker

why react? and its also a deprecated react.

Orientation.h not found error in AppDelegate.m

RN version is : "0.43.3",
My package.json content is;
{
"name": "FirstApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"@shoutem/theme": "^0.9.0",
"@shoutem/ui": "^0.15.0",
"install": "^0.10.1",
"npm": "^5.3.0",
"react": "16.0.0-alpha.6",
"react-native": "0.43.3",
"react-native-fcm": "^1.0.15",
"react-native-orientation-locker": "^1.0.3",
"react-native-tab-view": "0.0.66",
"react-navigation": "^1.0.0-beta.11"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "1.9.2",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.6"
},
"jest": {
"preset": "react-native"
}
}

RCTOrientation.xcodeproj is built successfully.

AppDeletage.m imports are ;
#import "AppDelegate.h"
#import "React/RCTBundleURLProvider.h"
#import "React/RCTRootView.h"
#import "Orientation.h"
#import "RNFIRMessaging.h"

Header search paths of my project;All of them recursive.
$(inherited)
$(SRCROOT)/../../react-native/React
$(SRCROOT)/../../react-native/Libraries
$(SRCROOT)/../node_modules/react-native-fcm/ios

And still getting same error. What should I do ?

RN 0.58 + Android target SDK 27 = Problem with orientation locker

Hi,

its looks like that Android by SDK 27 and up change ability to locking screen which are not fullscreen.
It is only issue when target SDK is set to 27, which is default in RN 0.58. But when is compiled with target SDK 26 it works.
Error:
Issue: java.lang.IllegalStateException: Only fullscreen activities can request orientation

Any hints how to fix it without any complex solution ? Maybe add oneliner into AndroidManifest.xml ?

Same issues in different repositories
Instabug/Instabug-Android#68
ParkSangGwon/TedPermission#63

iOS pod instructions didn't work

In the README it says to do
pod 'react-native-orientation-locker', :path => '../node_modules/react-native-orientation-locker'
however this produces an error for me:

An error occurred while redirecting file '../node_modules/react-native-orientation-locker'
open: Is a directory

The following command worked for me:
pod 'react-native-orientation-locker', :path => '../node_modules/react-native-orientation-locker/react-native-orientation-locker.podspec

lockToPortrait on Ios

I'm having this exception when i use lockToPortrait on ios

Application threw exception NSInternalInconsistencyException: Could not locate shadow view with tag #472 Originated at or in a subcall of __32-[RCTUIManager setSize:forView:]_block_invoke

Why no pure Landscape mode? Only LandscapeLeft/Right?

It's very important to have it. This library works for me, unlike react-native-orientation, but it doesn't have lockToLandscape...

[iOS] Native module cannot be null.

I manually linked this library and it works perfectly on Android. On iOS, it also works fine when I run the app through xcode. However, when I try to run the app through react-native-cli using the command react-native run-ios, I get the following error:

Native module cannot be null.

On iPad, iOS 11, everything working great if don't select Portrait Upside Down. But...

On iPad, iOS 11, everything working great if don't select Portrait Upside Down. If select, then the locking doesn't seem to work. The problem is for Multitasking mode to work on iPad apps, Apple requires Portrait Upside Down to be checked.

[Android] undefined is not an object

Hi there, i'm having a issue in Android.
When i try to do any function like Orientation.lockToPortrait() i keep getting this same error :

The stranger thing is when i do a console.log(Orientation) i get this:

{ [Function: Orientation]
getOrientation: [Function],
lockToPortrait: [Function],
lockToPortraitUpsideDown: [Function],
 lockToLandscapeRight: [Function],
lockToLandscapeLeft: [Function],
unlockAllOrientations: [Function],
 addOrientationListener: [Function],
removeOrientationListener: [Function],
getInitialOrientation: [Function] }

From what i understand this is the correct result from the console.log, thats why i'm writing here, i just can't figure out the problem.
PS: keep in mind that his bug is in android only, iOS works like a charm :)

unlockAllOrientations() not working

Let me say that this is a great pluggin for react native. But I have an issue

In the first screen, I locked to portrait, but in my second screen, I called unlockallorientations(), but it's not working. The second screen is still locked to portrait. Is there a way to fix this?

Orientation.lockToPortrait(), but is there a way to detect if it's in landscape or portrait

I have portrait to locked, but I want specific items (buttons and text) to rotate if phone is rotated either to landscape or portrait.

Here is what I did:

_onOrientationDidChange = orientation => {
if (orientation == "LANDSCAPE-LEFT" || orientation == "LANDSCAPE-RIGHT") {
alert("landscape");
} else {
alert("portrait");
}
};

componentDidMount() {
Orientation.lockToPortrait();
Orientation.addOrientationListener(this._onOrientationDidChange);
}

componentWillUnmount() {
Orientation.removeOrientationListener(this._onOrientationDidChange);
}

CocoaPod fails to install

I get the following error when I try to install the CocoaPod:

[!] The `react-native-orientation-locker` pod failed to validate due to 1 error:
    - ERROR | attributes: Missing required attribute `homepage`.
    - WARN  | description: The description is equal to the summary.

orientationDidChange, Why extend it by one second?

Jest test fails!

All seem to work fine for me, except the test fails. After installing and Linking the module, jest throws error.

 Invariant Violation: Native module cannot be null.

from the log:

at invariant (node_modules/fbjs/lib/invariant.js:42:15)
      at new NativeEventEmitter (node_modules/react-native/Libraries/EventEmitter/NativeEventEmitter.js:29:7)
      at Object.<anonymous> (node_modules/react-native-orientation-locker/index.js:23:25)

Need help please.
Thanks!

No visible @interface for 'Orientation' declares the selector 'addOrientationListener:' and 'removeListeners'

Orientation.m

• (instancetype)init
  {
  if ((self = [super init])) {
  [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(deviceOrientationDidChange:) name:@"UIDeviceOrientationDidChangeNotification" object:nil];
  [self addListener:@"orientationDidChange"];
  }
  return self;
  }

• (void)dealloc
  {
  [[NSNotificationCenter defaultCenter] removeObserver:self];
  [self removeListeners:1];
  }

iOS build fail after adding library

Hi @wonday , it is me again. I just run my project in Xcode and suddenly the build is fail.

Here is the image for the error report:

My installation steps:
1/ I typed react-native link react-native-orientation-locker
2/ Add import and the required function
3/ Add $(SRCROOT)/../node_modules/react-native-orientation-locker/iOS/RCTOrientation

UPDATE

When I comment the required function in AppDelegate.m. The project is able to be built

Please help me out... Thank you in advance!

Can't find variable: Platform

In version 1.1.0 a platform check was added to getAutoRotateState, but Platform was never imported from react-native so it's failing to resolve.

license issue

Can the license change to MIT instead of Apache License 2.0, so I can use this package instead of react-native-orientation in my App?

Thanks

does it work for expo app ?

i want to know that does that app work for expo or not ?

Bluetooth permission

Why does your modules need Bluetooth permission?

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="org.wonday.orientation">

          <uses-permission android:name="android.permission.BLUETOOTH"/>

</manifest>

Thank you.

iOS Crash on Orientation.getAutoRotateState

This PR was implemented too include the ability to check if the user has enabled or disabled auto lock, but calling it is causing a crash on iOS.

I don't know what the best way to work around this is, since for iOS the auto lock should override all other functionality regardless of what the JS side of the code is doing. Perhaps the callback should always return true, though the documentation should be explicit about that for iOS. But a hard crash is not ideal.

React Native Orientation

How is this different than react-native-orientation? The code is almost exactly the same.

Calling UI code from background thread (iOS)

Hi, Xcode emits runtime issues inside the native getOrientation method. The problem is that [UIApplication statusBarOrientation] is UI code, which may only be called from the main thread.

Since this function is already asynchronous (by having a callback), the solution would be to wrap the UIApplication call inside a GCD or NSOperationQueue async block and subsequently call the callback from the originating queue.

addOrientationListener returns wrong orientation

Not sure why this happens, but the listeners passed to addOrientationListener return the previous orientation from what it actually is.

For example if I turn my device from portrait to landscape-left, the orientation value will be portrait.

As a result I know have to do:

Orientation.addOrientationListener((/* wrongOrientation */) => {
    Orientation.getOrientation((orientation) => {
      store.dispatch(setOrientation(orientation));
    });
  });

Has anyone faced that?

react-native: 0.56
environment: iOS Simulator iPhone XR
Xcode 10
"react-native-orientation-locker": "^1.0.18",

[Android] Orientation changed event fired before OS rotates

I haven't test on iOS devices, but have on Android.

Both events addOrientationListener and addDeviceOrientationListener seem to fire before the OS actually rotates the screen.
Ex. Hold the phone upright portrait and slowly rotate about 45deg towards landscape. The event will fire for landscape while the phone/app is still portrait. Continue rotating and then the OS will finally rotate.
It's not a race condition because you can hold it at that position and stay there. It seem's like its based on the gyro alone and not what the device/OS thinks.

This is causing some where situations where the JS thinks it's landscape, but the device is still portrait, causing weird layout issues.

react-native-orientation didn't have this issue.

linker command failed with exit code 1

I did npm install and react-native link.
I added in header search path path (recursive).
During build time I got this error:

Undefined symbols for architecture i386:
  "_OBJC_CLASS_$_Orientation", referenced from:
      objc-class-ref in AppDelegate.o
ld: symbol(s) not found for architecture i386
clang: error: linker command failed with exit code 1 (use -v to see invocation)

Any idea what could be wrong?

[android] Orientation.unlockAllOrientations () does not work

I'm using react-navigation,
In the previous screen, I used lockToPortrait () to prevent landscape.

In the next screen, I was working on unlockAllOrientations () to make the landscape change possible.

But unlockAllOrientations () does not work on Android!
The addDeviceOrientationListener obviously changes, but the UI does not change.

Is there a way to solve it? I need help

The problem only occurs with Android.
iOS works fine.

lock landscape screen

componentDidMount = () => {
    this.getFeedData();
    setTimeout(() => {
      Orientation.lockToPortrait();
    }, 10);
  };

I was going to go to the next screen and unlock it using unlockAllOrientations ().

unlock screen

componentDidMount = () => {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
    Orientation.addDeviceOrientationListener(this.onOrientationDidChange);
    Orientation.unlockAllOrientations();
  }

android version

buildToolsVersion = "28.0.3"
minSdkVersion = 19
compileSdkVersion = 28
targetSdkVersion = 28
supportLibVersion = "28.0.0"

I run it with version 8.1 Android emulator.
react-native-orientation-locker, use 1.1.1 version now

Ui Doesnt redraw when device is already in the locked orientation

Hi my app is always locked to portrait, however in certain views i want to rotate them to landscape and then want to have them locked in that orientation.

So in a view i have Orientation.lockToPortrait() and in the new view i do Orientation.lockToLandscapeRight().
This works if the user has his device in portait and clicks on something and the view is take to landscape right.

Problem comes when the user is already in landscape right and the clicks my initial view which is locked to portrait. Now if i do Orientation.lockToLandscapeRight() when the user is already in landscapeRight the view is not redrawn in landscape right

UI Layout getting issue when quit app from landscape

iOS lockToPortrait always returns Portrait on orientation change

Using Orientation.lockToPortrait on iOS works fine but when the device orientation changes, the value returned is always 'portrait'.

I guess this would be the expected result but what if I want to keep the device visually locked to portrait and want to trigger a special overlay when it is rotated to landscape.

On Changing Orientation on simulator

Environment : ios,
simulator: iPhone X,
xcode 10

when i change the orientation on simulator to check weather it's working i got the following error-

deviceOrientationDidChange is not a supported event type for Orientation. Supported events are: orientationDidChange

android first open app then back Mobile desktop . go back android app repeated execution (componentWillMount)

`componentWillMount() {
alert(' frist ');
var initial = Orientation.getInitialOrientation();
if (initial === 'PORTRAIT') {
//do stuff
} else {
//do other stuff
}
}

componentDidMount() {
Orientation.getAutoRotateState((rotationLock) => this.setState({ rotationLock }));
Orientation.lockToLandscape();
Orientation.addOrientationListener(this._onOrientationDidChange);
}

componentWillUnmount() {
	AppState.removeEventListener('change', this._handleAppStateChange);

	 // Remember to remove listener
	Orientation.removeOrientationListener(this._onOrientationDidChange);
}

_onOrientationDidChange = (orientation) => {
	if (orientation == 'LANDSCAPE-LEFT') {
		//do something with landscape left layout
	} else {
		//do something with portrait layout
	}
};```