What impact do the rounded edges of the iPhone X have on hybrid apps with bottom toolbars or tabs?

Question

According to the IOS developer website, the UI elements provided by Apple automatically adapt to the new layout that comes with the new phone. Therefore a browser app should also be working fine without leaving essential buttons half cut off behind the rounded corners. But what about hybrid apps that run in a Cordova container? How do they adapt to the new shapes of the iPhone screen?

ios human interface guidelines for ip x

ionic dev guide for bars

Answer 1

Just by reading through the interface guidelines for the new iPhone X I'd say all elements (including bottom tabs) on a fullscreen webview are cut off at the edges:

When designing for iPhone X, you must ensure that layouts fill the screen and aren't obscured by the device's rounded corners, sensor housing, or the indicator for accessing the Home screen.

But just as Apple did for their native UI-elements, Ionic will probably come up with a solution for their UI-elements as well (if needed).

They also mention that there is already a simulator available, so you should be able to try out what happens yourself:

Preview your app on iPhone X. You can use Simulator (included with Xcode) to preview your app and check for clipping and other layout issues.