What effect 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 user interface elements provided by Apple automatically adapt to the new layout that comes with the new phone. Therefore, the browser application should also work fine, without leaving significant buttons half cut off for rounded corners. But what about hybrid apps that run in a Cordova container? How do they adapt to new iPhone screen shapes?

Ios interface guides for ip x

ionic dev guide for bars

Answer 1

Just by reading the interface recommendations for the new iPhone X, I would say that all the elements (including the bottom tabs) in the full-screen web view are cut off at the edges:

When designing for iPhone X, you need to make sure that the layouts fill the screen and are not hidden using the rounded corners of the device, the sensor housing or indicator to access the main screen.

But just as Apple did for its native UI elements, Ionic is likely to come up with a solution for its interface elements (if necessary).

They also mention that there is already a simulator, so you can try what happens:

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