How to fix app layout shrinking on iOS after upgrading RN version from 0.63.4 to 0.71.1?

Question

After upgrading RN version from 0.63.4 to 0.71.1, app layout shrink like the image bellow. I'm using Xcode 14.3, run app in Rosetta simulator

Do you have any idea about this issue?

Some info about environment 
  System:
    OS: macOS 13.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 3.14 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 19.0.0 - ~/.nvm/versions/node/v19.0.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v19.0.0/bin/npm
    Watchman: 2023.03.13.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.3 AI-213.7172.25.2113.9123335
    Xcode: 14.3/14C18 - /usr/bin/xcodebuild
  Languages:
    Java: 17.0.5 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.1 => 0.71.1 
    react-native-macos: Not Found

App layout shrink on iOS after upgrade to RN 0.71

I did try to upgrade version of these following dependencies:

"@react-navigation/native-stack": "6.9.12",    
"@react-navigation/stack": "6.3.16",     
"react-native-safe-area-context": "4.5.3",    
"react-native-screens": "3.20.0",

I expect the app's frame is full screen on iOS , not shrink App layout shrink on iOS

Answer 1

The root cause is app did not found the Launch Image so it run default

How to fix:

Step 1: Create Launch Screen.storyboard

Step 2: Select Lunch Screen File point to Launch Screen.storyboard have just been created

Step 3: Update background color of Launch Screen , then reload app and it work normally

Answer 2

Open the Xcode Project,

Go to the General tab Then under Supported Destinations ensure the device you are testing/running on is on the list. e.g iPadscreenshot here is on the list