React-native-orientation: Orientation.lockToPortrait() not locking view

[patricktresp]

Hey,

i do want to lock certain views to portrait mode, but when calling
Orientation.lockToPortrait();

in any of the methods, it does not lock at all, landscape mode still changes view behaviour

i tried:
componentWillMount()
componentDidMount()

Any suggestions on that?

( the xcode Project allows "Portrait", "Landscape Left", "Landscape Right" , since i do have some views that i want to allow in landscape)

Best,

Patrick

[ardalann]

I'm having the same issue. For now I'm using this ugly work-around:
Orientation.addOrientationListener(() => Orientation.lockToPortrait());

[mickeyjc]

I have the same issue, Orientation.lockToPortrait() not locking at componentDidMount().
Orientation.addOrientationListener(() => Orientation.lockToPortrait()); is a bit weird as it did rotate the screen then rotate it back to Landscape, not an ideal solution.

UPDATE:
After following the Configuration section to modify the AppDelegate.m, the Orientation.lockToPortrait() starts working now. I am on React-Native 0.39. All good.

[44326334]

@mickeyjc I have the same issue on android. Orientation.lockToPortrait() not working at componentDidMount(), and throw a error :undefined is not an object(evaluating ‘Orientation.lockToportrait’)
How do I modify the Configuration in android？

[mickeyjc]

Follow the Android part of the Configuration section on the project README.md, it mentions to add extra two lines to the MainActivity.java, and implement the onConfigurationChanged method.

[44326334]

@mickeyjc thanks your reponse . It could running that I make a mistake for no import a few pakerage on MainActivity.java
now，it is still the same error， but when I use the demo of ..\node_modules\react-native-orientation\demo\index.android.js running , throw the same error above.

In addition, after project import is normal, nothing write down, I guess the ‘Orientation.lockToportrait’ was wrong.

[patricktresp]

I now got it running on ios. i somehow missed the "configure" section in this. sorry about that.

[lavarajallu]

Yes!!!! I am not getting in IOS, but fixed in android.

[soutot]

I followed the linking and configuring steps but I couldn't get it to work on iOS (didn't test in Android).
When I use toLockPortrait() or toLockLandscape() the screen starts at correct orientation, but if I rotate the device or cmd+left/cmd+right in the simulator the orientation changes, it's not really being locked.

Any suggestions?

[schlaegerz]

I was just playing with this, it appears if you add any listeners with:
Orientation.addOrientationListener

It unlocks all the orientations

[soutot]

I still couldn't get it to work. I created this repo to show a simple example of my situation: https://github.com/soutot/react-native-orientation-test

Any suggestions?

Thanks in advance

[lavarajallu]

this method call in componentWillMount

On Mar 29, 2017 11:13 PM, "Tiago Souto" [e-mail] wrote:

I still couldn't get it to work. I created this repo to show a simple
example of my situation: https://github.com/soutot/
react-native-orientation-test

Any suggestions?

Thanks in advance

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/yamill/react-native-orientation/issues/136#issuecomment-290167080,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ATmTnNOX93F7arpOI3PIXwrJPB3u4VLlks5rqpg1gaJpZM4LaX-N
.

[soutot]

@lavarajallu I changed it, but it's still not locking

[lavarajallu]

I will give on some code after 10hrs okay

On Mar 29, 2017 11:26 PM, "Tiago Souto" [e-mail] wrote:

@lavarajallu https://github.com/lavarajallu I changed it, but it's
still not locking

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/yamill/react-native-orientation/issues/136#issuecomment-290170874,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ATmTnA4Gur1rRJF22xDDR0miiwje4wVJks5rqps_gaJpZM4LaX-N
.

[lavarajallu]

Dear Tiago Souto,

var Orientation = require('react-native-orientation');

• follow this when you want change or lock to portrait*

componentWillMount(){ if(this.props.sportName == 'Pro Football'){
Orientation.lockToLandscape(); this.setState({ HEIGHT:375,
WIDTH:667 }) } else{ Orientation.lockToPortrait();
} } _orientationDidChange(orientation) { if (orientation ==
'LANDSCAPE') { //do something with landscape layout } else {
Orientation.lockToLandscape(); } }onBack(){
Orientation.lockToPortrait(); this.setState({ open:false
}) }

On Wed, Mar 29, 2017 at 11:29 PM, ALLU LAVARAJU [e-mail]
wrote:

I will give on some code after 10hrs okay

On Mar 29, 2017 11:26 PM, "Tiago Souto" [e-mail] wrote:

@lavarajallu https://github.com/lavarajallu I changed it, but it's
still not locking

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/yamill/react-native-orientation/issues/136#issuecomment-290170874,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ATmTnA4Gur1rRJF22xDDR0miiwje4wVJks5rqps_gaJpZM4LaX-N
.

[soutot]

@lavarajallu I really appreciate your effort. I tried to run the following code and still getting the same scenario: the screen loads as landscape but when I rotate it (cmd + left), the whole content turns to portrait view.

componentWillMount() {
        Orientation.lockToLandscape();
    }  

    _orientationDidChange(orientation) {    
        if (orientation == 'LANDSCAPE') {
            Orientation.lockToLandscape();    
        }  
    } onBack() {
        Orientation.lockToPortrait();
    }

    render() {
        return(
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                <Text>This is my content</Text>
            </View>
        );
    }

My package.json:

{
  "name": "teste",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "~15.4.1",
    "react-native": "^0.42.3",
    "react-native-orientation": "^1.17.0"
  },
  "devDependencies": {
    "babel-jest": "19.0.0",
    "babel-preset-react-native": "1.9.1",
    "jest": "19.0.2",
    "react-test-renderer": "~15.4.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

I also tried with RN 39, no success.

Here's the demo:

Would you mind trying to run the code from my repo? I still don't know why it doesn't work. I even tried to create new blank projects to check if I followed the correct setup steps.

https://github.com/soutot/react-native-orientation-test

Thanks in advance

[soutot]

Hey,
Thank you everyone for the help! After an observation of @ibussieres I found that there was an error of RCTBridgeModule.h' file not found
I replaced the import to this #import <React/RCTBridgeModule.h> in my node_modules/react-native-orientation/iOS/Orientation.h and it seems to be working now!

Thank you very much!

[ibussieres]

Glad you got it working. You, should close the issue. Cheers !

[larryranches]

@soutot Is this still working for you? I want to actually lock to Portrait Orientation.lockToPortrait() but it's still allowing to go landscape. Is this scenario doing the same for you? If not, how did you get it to work?

Thanks!

[soutot]

@larryranches Yes, it's working fine here. After npm install I opened this file node_modules/react-native-orientation/iOS/Orientation.h and replaced the import to #import <React/RCTBridgeModule.h> since it's the new syntax of RN. After this it worked perfectly here.
I created a repo with a simple example. Try cloning it and check if it works for you. If you have any issue, I'll try to help!
https://github.com/soutot/react-native-orientation-test

[timCF]

for me, after these fixes Orientation.lockToLandscape() works fine, but Orientation.lockToPortrait() still is not working...

[soutot]

@timCF that's odd. If landscape works portrait should works as well. I guess it might be something regarding your setup.
Try cloning my repo and setting up the lib. Check if it works for you.

[danilvalov]

@soutot
Thank you for your solution! It works for me!

[andrerfneves]

Closing this for now as it works as expected

[kf729ik]

My imports in Orientation.h look like:

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
#if __has_include(<React/RCTBridgeModule.h>)
#import <React/RCTBridgeModule.h>
#else
#import "RCTBridgeModule.h"
#endif

and it's still not working on IOS, but on Android is working well. Any suggestions? Thanks a lot!

SOLVED!

[callmejm]

@soutot I try your solution but the problem still exist

[soutot]

@JayricMok can you try running this sample, please? https://github.com/soutot/react-native-orientation-test
After the changes mentioned on readme it worked as expected.

Make sure to have done the following:

• Replace #import Orientation.h to #import "../../node_modules/react-native-orientation/iOS/RCTOrientation/Orientation.h" in AppDelegate.m
• Replace #import RCTBridgeModule.h to #import in your node_modules/react-native-orientation/iOS/Orientation.h

Also, make sure you have followed all steps given here:
https://github.com/yamill/react-native-orientation#linking-native-dependencies
https://github.com/yamill/react-native-orientation#configuration

Let me know if it helps

[andrerfneves]

Thanks a lot for this @soutot!

@JayricMok if there are any outstanding issues after testing @soutot's solution out that is related to this topic, let's create a new issue and move discussion there. This one has been closed a while now.

[oriharel]

Problem still exist for me too

[supermanxiacheng]

@kf729ik

in else block , i still import #import
I think the if condition may be something wrong ....
It works for me now.

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
#if __has_include(<React/RCTBridgeModule.h>)
#import <React/RCTBridgeModule.h>
#else
#import <React/RCTBridgeModule.h>
#endif

[hto]

@mickeyjc Thank you!

[dutchwebs]

Update your environment, it seemed like it fixed itself in a later version of RN for me. Before the update this also worked: "Orientation.addOrientationListener(() => Orientation.lockToPortrait());"

[grantd77]

hey there, I have tried all the solutions mentioned, as I have encountered the same road blocks too, but none have helped me.

The project begins to compile but it ends up complaining further about missing files and can't get the library to build as part of the whole project, just to support orientations.

Error is: React/RCTDefines.h file not found when building RCTOrientation.

Also, I have included ReactNative via a pod, is that a bad way of including it?

any other tips?

[Sheleya]

Still Orientation.lockToPortrait is not working. Any suggestions?

[HaseemUlHaq]

Make sure you have installed Pods
cd ios && pod install

Use:
Orientation.lockToLandscape()
Orientation.lockToPortrait()

In AppDelegate.m
write before @end

- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow ``*)window {
while ([[UIDevice currentDevice] isGeneratingDeviceOrientationNotifications]) {
[[UIDevice currentDevice] endGeneratingDeviceOrientationNotifications];
}

return [Orientation getOrientation];
}