iPhoneX - full screen

The ProJucer generated iOS project doesn’t go full screen on iPhone X and newer iPhones. There are black bars at the top and bottom.

How can I make a component that covers the whole screen?

FYI: https://medium.com/rosberryapps/ios-safe-area-ca10e919526f

Thanks but the ProJucer makes the safe area much smaller:

Any reason for this?

Can you post your code for the main component, how you set its bounds and such?

We had the opposite problem with the iPhone X* devices, where our app stretched all the way side-to-side (landscape mode), so we had to reduce our viewable area so the notch didn’t cover up our app.

This is with the unmodified code that comes out of the the ProJucer (tip on master branch). It setFullScreen(true), but apparently that doesn’t make the component full screen on newer iOS devices. Is there any reason for this?

            setUsingNativeTitleBar (true);
            setContentOwned (new MainComponent(), true);

           #if JUCE_IOS || JUCE_ANDROID
            setFullScreen (true);
            setResizable (true, true);
            centreWithSize (getWidth(), getHeight());

            setVisible (true);

We set the window bounds explicitly with


And we also set it as the kiosk mode component:

Desktop::getInstance().setKioskModeComponent(this, false);

Carls, I tried those, but Kiosk, Fullscreen, and no matter what I do it looks like the image posted by jam-o above on iPhone XR.

I think it may have to do with the Launch Images set by the ProJucer?

Yes you need to give Xcode the correct launch image for iPhone X.

Ah, yeah, you need to have all your launch images set up correctly, too.

Ok, thanks for the pointers.
Using Launch Images I can make JUCE components use the whole screen, but then every time the ProJucer re-generate the project, they become invalid.
So you set Launch Images manually every time?


<string>Launch Screen</string>


make your launchScreen in xcode then add it as an xcode Resource in Projucer along with this custom plist

1 Like

Thanks! This works great.
Now there is a full screen component.

The next question is now: how do we know that we should be careful with the corners? We could hardcode tests for known iPhones X models, but what about future models? Is there some kind of way to get the Safe Area?

combine the info here:

and here:

Hey there

Interestingly I had exactly the same issue as @jam-o above. However the other day when I updated to the latest dev commit and recompiled the new Projucer 5.4.2 the situation changed with no other alteration from me.

Now I have the opposite problem where the app is full-screen and as such cutout by the notch, curved corners and (orientation dependent) drag-up bar.

Is there a unified approach to handling this? Or is it a case of choosing between hard code testing for iPhone X models, vs combining the information that @matkatmusic pointed out?

Best wishes

1 Like