[RN/Short] React Native Android / iOS 앱의 화면 방향 고정: 가로 모드 막는 설정 방법

해당 글에서는 react-native 환경에서 Android / iOS 환경에서 가로 모드를 지원하지 않는 경우 이를 막는 설정 방법에 대해 알아봅니다.

 

1) 디바이스 가로모드 막는 설정 방법

---

💡 디바이스 가로모드 막는 설정 방법

 
 

💡디바이스 가로모드로 적용하였을 때 장점

장점	설명
사용자 경험 일관성	모든 화면이 일관된 방향으로 표시되어 사용자 경험이 향상됩니다.
레이아웃 단순화	개발자 입장에서는 가로 모드 레이아웃을 별도로 설계할 필요가 없어 개발 과정이 간소화됩니다.
리소스 최적화	세로 모드만 지원하므로 메모리 및 처리 리소스를 더 효율적으로 사용할 수 있습니다.

 

1. 안드로이드 방향 설정: android/src/main/AndroidManifest.xml

---

💡안드로이드 : android/src/main/AndroidManifest.xml

- 해당 경로의 있는 파일에서 android:screenOrientation="portrait" 속성 값을 추가합니다.
- 이는 세로모드를 고정하는데 사용이 됩니다. 즉, 앱이 항상 세로 모드로만 표시되며 사용자가 기기를 회전해도 화면이 가로 모드로 전환되지 않습니다.
- 특정 화면에만 가로 모드를 허용하고 싶다면 개발 액티비티 레벨에서 설정해야 하며, 앱 전체에 적용이 됩니다.

<application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:roundIcon="@mipmap/ic_launcher"
  android:allowBackup="false"
  android:theme="@style/AppTheme"
  android:supportsRtl="true">
  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
    android:launchMode="singleTask"
    <!-- ✅ 여기에 추가 -->
    android:screenOrientation="portrait" 
    android:windowSoftInputMode="adjustResize"
    android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
</application>

 
 
 

2. iOS 방향 설정: ios/app/Info.plist

---

 💡iOS : ios/app/Info.plist

- 해당 경로에 있는 파일들에서 UIInterfaceOrientationLandscapeLeft, UIInterfaceOrientationLandscapeRight 속성 값을 제거합니다.
- 제거하는 두개의 요소는 가로모드를 허용하는 속성입니다.

<key>UISupportedInterfaceOrientations</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
    // 아래의 목록들을 제거합니다.
    <string>UIInterfaceOrientationLandscapeLeft</string>
    <string>UIInterfaceOrientationLandscapeRight</string>
</array>

 

설정 값	설명
UIInterfaceOrientationPortrait	세로 모드 (홈 버튼이 아래쪽)
UIInterfaceOrientationLandscapeLeft	가로 모드 (홈 버튼이 오른쪽)
UIInterfaceOrientationLandscapeRight	가로 모드 (홈 버튼이 왼쪽)

 
 

+ 추가 ) AppDelegate.mm

---

💡 AppDelegate.mm

- 위에 코드가 적용이 안되어서 아래와 같이 추가적인 설정을 수행하였습니다.

- 해당 메서드에서는 앱이 지원하는 화면 방향을 지정합니다.
- UIInterfaceOrientationMaskPortrait를 반환함으로써, 앱이 세로 방향(portrait)만을 지원하도록 설정합니다. 즉, 가로 모드(landscape)를 지원하지 않도록 세로모드로만 실행되게 설정하였습니다.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
}

// 가로 모드 제외
- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
    return UIInterfaceOrientationMaskPortrait;
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge

 
 

 

+ 추가 ) AppDelegate.swift

---

import UIKit
import React
import React_RCTAppDelegate
import ReactAppDependencyProvider

@main
class AppDelegate: RCTAppDelegate {
  override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
  }

   // ✅ 여기에 추가!
  override var supportedInterfaceOrientationsFor: UIInterfaceOrientationMask {
    return .portrait
  }
}

 

 

오늘도 감사합니다. 😀