wonday / react-native-orientation-locker Goto Github PK
View Code? Open in Web Editor NEWA react-native module that can listen on orientation changing of device, get current orientation, lock to preferred orientation.
License: MIT License
A react-native module that can listen on orientation changing of device, get current orientation, lock to preferred orientation.
License: MIT License
i want to know that does that app work for expo or not ?
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 ?
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?
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 ?
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
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.
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.
How is this different than react-native-orientation? The code is almost exactly the same.
Hi,
Great package, solved a lot of issues I had with react-native-orientation
.
My scenario is this:
lockToPortrait
when initialized -> working greataddOrientationListener
is added.unlockAllOrientations
lockToPortrait
againActual result: app remain in landscape orientation in some Android devices and in some it rotate to portrait
Expected result: app rotate to portrait.
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?
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?
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
After importing 'react-native-orientation-locker', I get this error: native module cannot be null. Anyone else have this problem?
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
}
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!
Can i use this plugin to implement orientation change when a button is pressed?
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.
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.
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.
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?
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
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.
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.
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.
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
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 :)
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();
}
`
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
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",
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
}
};
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?
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.
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);
}
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
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
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.
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! 👍
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);
}
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
why react? and its also a deprecated react.
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!
It's very important to have it. This library works for me, unlike react-native-orientation, but it doesn't have lockToLandscape...
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.
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
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.
`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
}
};```
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
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];
}
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
When I comment the required function in AppDelegate.m. The project is able to be built
Please help me out... Thank you in advance!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.