How can I lock the orientation to portrait mode on Android using React Native?

I want my react native app to support only portrait view . I have tried updating the android manifest but it does not seems to be working . When I disable the lock orientation mode on my device , my app turns into landscape mode .

I have tried updating the android manifest file using , android:screenOrientation="portrait" But when I turn off the screen orientation lock on my device the app turns into landscape mode . Can anyone suggest a solution please .

To lock the screen orientation to portrait mode in your React Native Android app, updating the AndroidManifest.xml should generally work. However, if you're still experiencing issues where the app switches to landscape mode when you disable screen orientation lock on your device, you can try the following steps to ensure that the screen stays in portrait mode.

1. Update the AndroidManifest.xml

Ensure you have the correct configuration in your AndroidManifest.xml file. It seems like you’ve already tried this, but I’ll outline the full process to make sure everything is set up properly.

Open your AndroidManifest.xml file located at android/app/src/main/AndroidManifest.xml, and modify the activity definition like so:

<activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:screenOrientation="portrait" <!-- This forces portrait mode -->
    android:windowSoftInputMode="adjustResize">
    <!-- Other configurations -->
</activity>

Make sure that:

• android:screenOrientation="portrait" is added.
• android:configChanges="keyboard|keyboardHidden|orientation|screenSize" is present to prevent the app from restarting on orientation change and to handle the screen configuration changes more gracefully.

2. Use React Native Orientation Locking Libraries (Optional)

If updating the AndroidManifest.xml doesn’t work as expected or you want more control over the orientation, you can use a library to lock the orientation programmatically.

react-native-orientation-locker is a popular library to lock orientation. To use it:

1. Install the library:

   npm install react-native-orientation-locker
   

   If you're using React Native 0.60 or later, the package should auto-link. If not, you may need to link it manually.

2. Use the library to lock orientation in your app code. For example, in your App.js or the main screen component:

   import React, { useEffect } from 'react';
   import { View, Text, SafeAreaView } from 'react-native';
   import Orientation from 'react-native-orientation-locker';
   
   const App = () => {
     useEffect(() => {
       // Lock to portrait
       Orientation.lockToPortrait();
   
       // Optionally, you can unlock it later or for specific screens
       // Orientation.unlockAllOrientations(); 
   
       return () => {
         // Cleanup if necessary
         Orientation.unlockAllOrientations();
       };
     }, []);
   
     return (
       <SafeAreaView>
         <View>
           <Text>Your app content here</Text>
         </View>
       </SafeAreaView>
     );
   };
   
   export default App;
   

   The Orientation.lockToPortrait() method will lock the screen to portrait mode for the entire app or the particular screen where it is called.

3. For additional configuration or to handle other orientations, you can use other methods like lockToLandscape() and unlockAllOrientations().

3. Ensure Device Settings Aren't Overriding

Sometimes, if the device settings have a global override (such as force rotating apps), it might cause your app to behave unexpectedly. You should double-check that your device's screen rotation settings are not causing conflicts. On some Android devices, the system settings might force apps to rotate unless locked via the app itself.

4. Test on Multiple Devices and Simulators

Make sure you are testing on different devices and screen configurations, as some Android versions might have quirks with respect to orientation handling. Always test on both physical devices and emulators to ensure consistency.

---

By following these steps, you should be able to lock the orientation to portrait mode on Android devices. The first solution (via AndroidManifest.xml) is usually sufficient, but if it doesn't work due to specific device or OS behavior, using the react-native-orientation-locker library will give you additional control.