CODEWITHSUNDEEP
iosreact-nativemobileorientation
SmoggeR_js
SmoggeR_js

Reputation: 3160

How to lock orientation to Portrait in iOS React Native App?

I'm trying to untick the Device Orientation Settings leaving alone Portrait option ticked but it doesn't work. In Android it doesn't rotate but it does in iOS and I don't know why. It rotate in my whole app, no matter which window I am. Do you know another alternatives to lock the rotate caused by orientation?

enter image description here

This is my Info.plist:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>CFBundleDevelopmentRegion</key>
    <string>en</string>
    <key>CFBundleDisplayName</key>
    <string>NEXT PORTAL</string>
    <key>CFBundleExecutable</key>
    <string>$(EXECUTABLE_NAME)</string>
    <key>CFBundleIdentifier</key>
    <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
    <key>CFBundleInfoDictionaryVersion</key>
    <string>6.0</string>
    <key>CFBundlePackageType</key>
    <string>APPL</string>
    <key>CFBundleShortVersionString</key>
    <string>7.7</string>
    <key>CFBundleSignature</key>
    <string>????</string>
    <key>CFBundleVersion</key>
    <string>12</string>
    <key>LSRequiresIPhoneOS</key>
    <true/>
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>
    <key>NSCameraUsageDescription</key>
    <string>$(PRODUCT_NAME) necesita acceder a su cámara para poder escanear el código QR.</string>
    <key>NSLocationWhenInUseUsageDescription</key>
    <string></string>
    <key>NSMainNibFile</key>
    <string>LaunchScreen</string>
    <key>NSMainNibFile~ipad</key>
    <string>LaunchScreen</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to your microphone (for videos)</string>
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string>$(PRODUCT_NAME) necesita acceder a la galería para adjuntar fotos.</string>
    <key>NSPhotoLibraryUsageDescription</key>
    <string>$(PRODUCT_NAME) necesita acceder a la galería para adjuntar fotos.</string>
    <key>UIAppFonts</key>
    <array>
        <string>Entypo.ttf</string>
        <string>EvilIcons.ttf</string>
        <string>Feather.ttf</string>
        <string>FontAwesome.ttf</string>
        <string>Foundation.ttf</string>
        <string>Ionicons.ttf</string>
        <string>MaterialCommunityIcons.ttf</string>
        <string>MaterialIcons.ttf</string>
        <string>Octicons.ttf</string>
        <string>SimpleLineIcons.ttf</string>
        <string>Zocial.ttf</string>
    </array>
    <key>UILaunchStoryboardName</key>
    <string>LaunchScreen</string>
    <key>UIRequiredDeviceCapabilities</key>
    <array>
        <string>armv7</string>
    </array>
    <key>UIRequiresFullScreen</key>
    <true/>
    <key>UISupportedInterfaceOrientations</key>
    <array>
        <string>UIInterfaceOrientationPortrait</string>
    </array>
    <key>UIViewControllerBasedStatusBarAppearance</key>
    <false/>
</dict>
</plist>

Upvotes: 4

Views: 9197

Answers (5)

Rakesh Jha
Rakesh Jha

Reputation: 379

In my case I have total 10 screens, in which 2 screens are in Potrait mode and 8 are in Landscape mode.

import Orientation from 'react-native-orientation';

So If you want to put some screen in Landscape mode then use

Orientation.lockToLandscape()

Or If you want to put some screen in Potrait mode then use

Orientation.lockToPortrait()

Upvotes: 0

Nhat Truong
Nhat Truong

Reputation: 21

I had the same problem with you, and it turns out that the reason is because of the configuration of react-native-orientation in my AppDelegate.m

If I uncommented these 2 configs

#import "Orientation.h"

And

- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {return [Orientation getOrientation];}

Then it works fine. But these configuration is necessary if you're using react-native-orientation. So I think the final solution is using Orientation.lockToPortrait()

Upvotes: 2

SmoggeR_js
SmoggeR_js

Reputation: 3160

Finally, I found the answer. Is not the solution I expected because I thought it would be enough by locking in XCode as I mentioned before in the ask but at least it worked.

I installed react-native-orientation and I applied the Orientation.lockToPortrait() function on the constructor of App.js file and it locked the app to portrait.

I hope it helps!

Upvotes: 3

Sandy.....
Sandy.....

Reputation: 2870

Please perform following steps to lock the orientation to portrait in React Native iOS App:

1] Open Your_React_Native_Project -> go to ios -> project_name.xcodeproj file in X-Code.
2] After opening the project in Xcode, select your project name.
3] Now Goto -> General -> Deployment Info and select device orientation as portrait.
4] Execute the "react-native run-ios" command and compile the entire project. Now you can see the effect.

Also it has been observed that orientation lock doesn't seem to work on an iPad if "Devices" is set to Universal. If it changed to iPad then it works fine.

Upvotes: 2

Helmer Barcos
Helmer Barcos

Reputation: 2085

try to clean the project, rebuild the app, and maybe it helps. once i wasnt able to lock the device orientation and the only way was by ticking the Portrait option.

Upvotes: -2

Related Questions