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

Question

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?

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>

Answer 1

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!

Answer 2

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.