[React Native] 세로모드 고정 방법 정리 (화면 회전 막기, 화면 고정)

 

React Native 세로모드 고정 방법 정리

앱을 개발하다 보면 사용자가 화면을 회전해도 항상 세로모드로만 앱을 사용하게 하고 싶은 경우가 많습니다.

React Native에서 세로모드로 고정하는 방법을 Android와 iOS로 나누어 정리하였습니다.

---

Android: AndroidManifest.xml 수정

1.아래 경로의 AndroidManifest.xml 파일을 엽니다.

android/app/src/main/AndroidManifest.xml

 

2. <activity> 태그에 아래 속성을 추가합니다.

<activity android:name=".MainActivity" 
    	android:screenOrientation="portrait" <!-- 추가 -->
	... 
</activity>

• android:screenOrientation="portrait" 이 부분이 세로모드 고정의 핵심입니다

 

3. 변경 후에는 그레들 클린을 해주는 것이 좋습니다.

• android:screenOrientation="portrait" 이 부분이 세로모드 고정의 핵심입니다.변경 후에는 그레들 클린을 해주는 것이 좋습니다.

cd android 
./gradlew clean

---

iOS: Info.plist 수정

1.아래 경로의 Info.plist 파일을 엽니다.

ios/프로젝트이름/Info.plist

 

2. <key>UISupportedInterfaceOrientations</key> 항목을 찾아 세로모드만 남깁니다.

<key>UISupportedInterfaceOrientations</key>
    <array>
        <string>UIInterfaceOrientationPortrait</string> <!-- 회전 막기 추가-->
    </array>

• 기본적으로 여러 줄이 있을 수 있는데, UIInterfaceOrientationPortrait만 남기고 나머지는 삭제합니다. 변경 후에는 pod install을 한 번 실행해줍니다.

3. 변경 후에는 pod install을 한 번 실행해줍니다.

cd ios 
pod install

---

정리

• Android는 AndroidManifest.xml에서, iOS는 Info.plist에서 각각 세로모드만 지원하도록 설정하면 됩니다.
• 별도의 라이브러리 없이 네이티브 설정만으로도 세로모드 고정이 가능합니다.

---

추가 Tip

• 만약 특정 화면에서만 세로/가로모드를 고정하고 싶다면, react-native-orientation-locker 같은 라이브러리를 사용할 수 있습니다. 하지만 전체 앱 고정은 위 방법이 가장 간단합니다.

---

이렇게 설정하면 React Native 앱이 항상 세로모드로만 동작하게 됩니다!