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

Question

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 .

Answer 1

If you use a navigation library like react-navigation, you can lock the orientation per screen using react-native-screens.

import { enableScreens } from 'react-native-screens';
enableScreens();

import { Screen, enableOrientationLock } from 'react-native-screens';
import { View, Text } from 'react-native';

const MyScreen = () => {
  return (
    <Screen orientation="portrait">
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Portrait locked using react-native-screens!</Text>
      </View>
    </Screen>
  );
};

You can also use the react-native-orientation-locker library to manage screen orientation easily.