문제

React Native ios 환경에서 가로 방향 전환 시 화면이 가로로 전환되지 않음

• 이전 코드

//GameOverScreen.js

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  Modal,
  ImageBackground,
  SafeAreaView,
  Image,
  useWindowDimensions,
  ScrollView,
} from "react-native";

...

return (
	<ScrollView style={styles.screen}>
      <View style={{ flex: 1 }}>
        <Modal animationType="slide">
          <ImageBackground
            source={bgImage}
            style={{
              flex: 1,
              justifyContent: "center",
              alignItems: "center",
              resizeMode: "cover",
            }}
            imageStyle={{ opacity: 0.5 }}
          >
            <SafeAreaView
              style={{
                // flex: 1,
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <View>
              
...
            
)

• 해당 컴포넌트로 진입했을 때 모달창을 띄워 gameover화면 띄우는 코드를 작성

//app.json
{
  "expo": {
    "name": "UdemyRNGame",
    "slug": "UdemyRNGame",
    "version": "1.0.0",
    "orientation": "default",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#00539C"
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#00539C"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

• "orientation": "default" 방향 설정

해결

Modal 프로퍼티 supportedOrientations={["default"]} 를 추가