Question 32853 in React native Question posted in
The official React Native documentation can be found here.

How to start React Native App in portrait orientation only in both iOS and Android?

I want to start React Native app with Portrait orientation. Currently I’m using the react-native-orientation-locker library to handle the initial orientation. But it’s not working correctly.

My App.js looks like this.

import Orientation from 'react-native-orientation-locker';

export const App = () => {
    useLayoutEffect(() => {
        Orientation.lockToPortrait();
    }, []);

    return (
        <RootContainer>
            <MyApp />
        </RootContainer>
    );
};

export default App;

I think this has to be handled from the native side because the JavaScript codes run after the initial process. Maybe I have to add a code MainApplication.java and AppDelegate.mm?

Tags:

3

Answers


  1. 0

    You should wait until you lock the orientation. See the example below:

    import { useState, useEffect } from 'react';
import Orientation from 'react-native-orientation-locker';

const App = () => {
  const [appReady, setAppReady] = useState(false);

  useEffect(() => {
    Orientation.lockToPortrait();
    setAppReady(true);
  }, []);

  if (!appReady) {
    return <Text>Loading</Text>;
  }

  return (
    <RootContainer>
      <MyApp />
    </RootContainer>
  );
};

export default App;
    Login or Signup to reply.
  2. 0

    There is a possibility that the useLayoutEffect hook is causing issues.

    If you use useLayoutEffect to lock orientation, your screen may flicker or render slowly because it is called after all DOM mutations are complete.

    In most cases, it’s better to use the useEffect hook because it’s called asynchronously after rendering is complete.

    import React, { useEffect } from 'react';
import Orientation from 'react-native-orientation-locker';

export const App = () => {
  useEffect(() => {
    Orientation.lockToPortrait();
    return () => {
      Orientation.unlockAllOrientations();
    };
  }, []);

  return (
    <RootContainer>
      <MyApp />
    </RootContainer>
  );
};

export default App;
    Login or Signup to reply.
  3. 0

    If you want the application to have a static orientation and not allow it to change dynamically inside of the app, you should add the orientation natively for both Android and iOS.

    For Android:

    Open up AndroidManifest.xml and add the following inside of the application tag

    android:screenOrientation="portrait
    So you’d have something like this

        <activity 
      android:name=".MainActivity" 
      android:label="@string/app_name" 
      android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode" 
      android:screenOrientation="portrait"
      android:launchMode="singleTask" />

    For iOS:

    Open up xCode and inside of the general tab, go down to Deployment info and check the Portrait box

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search