CODEWITHSUNDEEP
androidreact-native
rahulje9
rahulje9

Reputation: 162

Android screen orientation even when screen orientation lock is added

I'm having a React Native app, which I'm currently updating the UI. one of the requirements of the app was to lock screen orientation in portrait mode. For that, I had added android:screenOrientation="portrait" in the Manifest file. It is working fine in the live app, however now with the updated UI, it is not working anymore. I had tried many things and nothing helped.

I'm sharing the manifest file, old and new package.json file, if someone knows something please let me know.

Android Manifest

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

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.VIBRATE" />

    <application
        android:name=".MainApplication"
        android:allowBackup="false"
        android:hardwareAccelerated="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity"
            android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
            android:exported="true"
            android:label="@string/app_name"
            android:launchMode="singleTask"
            android:screenOrientation="portrait"
            android:windowSoftInputMode="adjustPan" />
        <activity
            android:name="com.zoontek.rnbootsplash.RNBootSplashActivity"
            android:launchMode="singleTask"
            android:theme="@style/BootTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>

            <intent-filter>
                <action android:name="android.intent.action.VIEW" />

                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />

                <data android:scheme="xxxx" />
            </intent-filter>
        </activity>

        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

Old Package.json

{
    "scripts": {
        "android": "react-native run-android",
        "ios": "react-native run-ios",
        "start": "react-native start",
        "test": "jest",
        "lint": "eslint .",
        "prettier": "prettier --write src/**/*.js"
    },
    "dependencies": {
        "@apollo/client": "^3.1.3",
        "@react-native-community/async-storage": "^1.11.0",
        "@react-native-community/masked-view": "^0.1.10",
        "@react-native-community/netinfo": "^5.9.5",
        "@react-native-firebase/analytics": "^7.3.1",
        "@react-native-firebase/app": "^8.2.0",
        "@react-native-firebase/crashlytics": "^8.1.2",
        "@react-navigation/bottom-tabs": "^5.7.2",
        "@react-navigation/native": "^5.7.1",
        "@react-navigation/stack": "^5.7.1",
        "amazon-cognito-identity-js": "^4.3.3",
        "aws-amplify": "3.0.21",
        "aws-amplify-react-native": "4.2.2",
        "aws-sdk": "^2.719.0",
        "d3-shape": "^1.3.7",
        "date-fns": "^2.15.0",
        "graphql": "^15.3.0",
        "i18n-js": "^3.7.1",
        "lodash": "^4.17.19",
        "lottie-ios": "^3.1.8",
        "lottie-react-native": "^3.5.0",
        "moment": "^2.29.0",
        "paho-mqtt": "^1.1.0",
        "ramda": "^0.27.0",
        "react": "16.13.1",
        "react-native": "0.63.3",
        "react-native-actionsheet": "^2.4.2",
        "react-native-awesome-alerts": "^1.3.2",
        "react-native-bootsplash": "^2.2.6",
        "react-native-camera": "^3.39.1",
        "react-native-device-info": "^5.6.2",
        "react-native-gesture-handler": "^1.6.1",
        "react-native-inappbrowser-reborn": "^3.4.0",
        "react-native-keyboard-aware-scroll-view": "https://github.com/APSL/react-native-keyboard-aware-scroll-view#fb40649a9c84aa23d6a55355e9e0e432795967a6",
        "react-native-keyboard-spacer": "^0.4.1",
        "react-native-linear-gradient": "^2.5.6",
        "react-native-loading-dots": "^1.1.1",
        "react-native-localize": "^1.4.1",
        "react-native-reanimated": "^1.9.0",
        "react-native-safe-area-context": "^3.1.1",
        "react-native-screens": "^2.9.0",
        "react-native-simple-radio-button": "^2.7.4",
        "react-native-snap-carousel": "^3.9.1",
        "react-native-status-bar-height": "^2.5.0",
        "react-native-svg": "^12.1.0",
        "react-native-svg-charts": "^5.4.0",
        "react-redux": "^7.2.0",
        "redux": "^4.0.5",
        "redux-logger": "^3.0.6",
        "redux-persist": "^6.0.0",
        "redux-thunk": "^2.3.0",
        "rn-horizontal-switcher": "^1.1.0",
        "rn-motion": "^1.0.2",
        "tinygradient": "^1.1.1",
        "typescript": "^3.9.7"
    },
    "devDependencies": {
        "@babel/core": "^7.10.5",
        "@babel/runtime": "^7.10.5",
        "@react-native-community/eslint-config": "^2.0.0",
        "babel-eslint": "^10.1.0",
        "babel-jest": "^26.1.0",
        "eslint": "^7.5.0",
        "eslint-config-prettier": "^6.11.0",
        "eslint-plugin-prettier": "^3.1.4",
        "eslint-plugin-react-hooks": "^4.0.8",
        "jest": "^26.1.0",
        "metro-react-native-babel-preset": "^0.61.0",
        "prettier": "^2.0.5",
        "react-native-svg-transformer": "^0.14.3",
        "react-test-renderer": "16.13.1"
    },
    "jest": {
        "preset": "react-native"
    }
}

New Package.json

{

    "scripts": {
        "android": "react-native run-android",
        "ios": "react-native run-ios",
        "start": "react-native start",
        "test": "jest",
        "lint": "eslint .",
        "prettier": "prettier --write src/**/*.js",
        "postinstall": "patch-package"
    },
    "dependencies": {
        "@apollo/client": "^3.1.3",
        "@aws-amplify/api": "^3.2.17",
        "@aws-amplify/auth": "^3.4.17",
        "@aws-amplify/core": "^3.8.9",
        "@aws-amplify/pubsub": "^3.2.15",
        "@react-native-community/async-storage": "^1.12.1",
        "@react-native-community/masked-view": "^0.1.10",
        "@react-native-community/netinfo": "^5.9.10",
        "@react-native-firebase/analytics": "^7.3.1",
        "@react-native-firebase/app": "^8.2.0",
        "@react-native-firebase/crashlytics": "^8.1.2",
        "@react-navigation/bottom-tabs": "^5.7.2",
        "@react-navigation/material-top-tabs": "^5.3.10",
        "@react-navigation/native": "^5.7.1",
        "@react-navigation/stack": "^5.7.1",
        "amazon-cognito-identity-js": "^4.3.3",
        "aws-amplify-react-native": "4.2.2",
        "aws-appsync": "^4.0.2",
        "aws-sdk": "^2.819.0",
        "d3-shape": "^1.3.7",
        "date-fns": "^2.15.0",
        "graphql": "^15.3.0",
        "graphql-tag": "^2.11.0",
        "i18n-js": "^3.7.1",
        "lodash": "^4.17.19",
        "lottie-ios": "3.1.8",
        "lottie-react-native": "^3.5.0",
        "moment": "^2.29.0",
        "paho-mqtt": "^1.1.0",
        "patch-package": "^6.2.2",
        "postinstall-postinstall": "^2.1.0",
        "prop-types": "^15.7.2",
        "ramda": "^0.27.0",
        "react": "16.13.1",
        "react-hook-form": "^6.14.2",
        "react-native": "0.63.3",
        "react-native-actionsheet": "^2.4.2",
        "react-native-awesome-alerts": "^1.3.2",
        "react-native-bootsplash": "^3.1.2",
        "react-native-camera": "^3.39.1",
        "react-native-device-info": "^5.6.2",
        "react-native-gesture-handler": "^1.6.1",
        "react-native-inappbrowser-reborn": "^3.4.0",
        "react-native-keyboard-aware-scroll-view": "https://github.com/APSL/react-native-keyboard-aware-scroll-view#fb40649a9c84aa23d6a55355e9e0e432795967a6",
        "react-native-keyboard-spacer": "^0.4.1",
        "react-native-linear-gradient": "^2.5.6",
        "react-native-loading-dots": "^1.1.1",
        "react-native-localize": "^1.4.1",
        "react-native-reanimated": "^1.9.0",
        "react-native-redash": "^10.0.1",
        "react-native-safe-area-context": "^3.1.1",
        "react-native-screens": "^2.9.0",
        "react-native-simple-radio-button": "^2.7.4",
        "react-native-snap-carousel": "4.0.0-beta.4",
        "react-native-status-bar-height": "^2.5.0",
        "react-native-svg": "^12.1.0",
        "react-native-svg-charts": "^5.4.0",
        "react-native-tab-view": "^2.15.2",
        "react-redux": "^7.2.0",
        "redux": "^4.0.5",
        "redux-logger": "^3.0.6",
        "redux-persist": "^6.0.0",
        "redux-thunk": "^2.3.0",
        "rn-horizontal-switcher": "^1.1.0",
        "tinygradient": "^1.1.1",
        "typescript": "^3.9.7",
        "uuid": "^3.4.0"
    },
    "devDependencies": {
        "@babel/core": "^7.10.5",
        "@babel/runtime": "^7.10.5",
        "@react-native-community/eslint-config": "^2.0.0",
        "babel-eslint": "^10.1.0",
        "babel-jest": "^26.1.0",
        "eslint": "^7.5.0",
        "eslint-config-prettier": "^6.11.0",
        "eslint-plugin-prettier": "^3.1.4",
        "eslint-plugin-react-hooks": "^4.0.8",
        "jest": "^26.1.0",
        "metro-react-native-babel-preset": "^0.61.0",
        "prettier": "^2.0.5",
        "prop-types": "^15.7.2",
        "react-native-svg-transformer": "^0.14.3",
        "react-test-renderer": "16.13.1"
    },
    "jest": {
        "preset": "react-native"
    }
}

Upvotes: 1

Views: 1498

Answers (1)

rahulje9
rahulje9

Reputation: 162

Finally, I was able to fix the issue. The issue was in the router file(Navigation setup).

I was using the createNativeStackNavigator from react-native-screens/native-stack instead of createStackNavigator from @react-navigation/stack for better performance.

However, there was an option for screenOrientation in the screenOptions which I didn't know. By default it will allow all options which was causing the issue. In ios, the default falls to UIInterfaceOrientationMaskAllButUpsideDown.

Here goes the documentation.

Search for screenOrientation

Upvotes: 5

Related Questions