iPhone X
Simulator Issues
Aspect Ratio
Black Bars
App Development

Seeing black bars at the top and bottom of the iPhone X Simulator

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Introduction

If your app shows black bars at the top and bottom in the iPhone X simulator, iOS is usually running the app in compatibility mode instead of true edge-to-edge layout. That most often happens when the app is missing a proper launch storyboard or was built with settings that make the system think it does not support the newer screen shape.

This is not usually a safe-area bug inside your view controller. It is more often a signal that the app is not being treated as a full-screen modern layout on that device class.

Why the Black Bars Appear

The iPhone X introduced a taller screen, the notch area, and the home indicator area. Apps that do not advertise support for the modern full-screen layout can be letterboxed so the old layout size still fits.

That letterboxing shows up as black bars at the top and bottom. In other words, the simulator is not inventing a random rendering issue. It is intentionally preserving compatibility.

The Most Common Fix: Use a Launch Storyboard

Modern full-screen iPhone layouts rely on a launch storyboard instead of old fixed-size launch images. Make sure your app has a launch storyboard configured.

In Xcode, this means:

  • create or keep LaunchScreen.storyboard
  • set the target's launch screen file to that storyboard
  • remove outdated launch-image setups if the project still depends on them

Once the app advertises itself correctly as a modern full-screen app, the simulator usually stops adding the black bars.

Safe Areas Are a Separate Concern

It is important to separate two issues:

  • compatibility-mode black bars
  • layout inside the safe area once the app is full screen

After the app is recognized as full-screen capable, you still need proper constraints so content respects the notch and home indicator. In UIKit, safe-area anchors are the standard way to do that:

swift
1import UIKit
2
3final class ViewController: UIViewController {
4    override func viewDidLoad() {
5        super.viewDidLoad()
6
7        let label = UILabel()
8        label.translatesAutoresizingMaskIntoConstraints = false
9        label.text = "Hello"
10        view.addSubview(label)
11
12        NSLayoutConstraint.activate([
13            label.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20),
14            label.centerXAnchor.constraint(equalTo: view.centerXAnchor)
15        ])
16    }
17}

Safe-area constraints fix content placement. They do not by themselves fix compatibility-mode letterboxing if the app is not marked as full-screen capable.

Check the Deployment and Build Setup

Older project configurations can keep an app in an outdated mode longer than expected. Things worth checking include:

  • launch screen configuration
  • old launch image assets
  • base SDK and deployment target settings
  • any legacy project templates that predate iPhone X support

The exact combination depends on how old the project is, but the launch-screen configuration is still the first place to look.

Common Pitfalls

  • Treating the black bars as if they were just a constraint issue inside the app layout.
  • Forgetting that safe-area support and full-screen app recognition are related but different concerns.
  • Keeping old launch-image-based startup configuration instead of a launch storyboard.
  • Debugging individual view controllers before confirming the app itself is leaving compatibility mode.
  • Testing only in one simulator profile and assuming the issue is random rather than configuration-driven.

Summary

  • Black bars on iPhone X simulator usually mean the app is running in compatibility mode.
  • The most common fix is to configure a proper launch storyboard and modern full-screen app setup.
  • Safe-area constraints matter after the app is full screen, but they do not by themselves remove letterboxing.
  • Check launch configuration before rewriting layout code.
  • Once the app is recognized as modern full-screen, the simulator should stop adding those bars.

Course illustration
Course illustration

All Rights Reserved.