iPhone X Lower Navbar UI Suggestions?

Ionic Framework ionic-v3
1

Hey everyone - I’m trying to make sure everything is up-to-date for the iPhone X release next Friday, and I’m not 100% sure how I should work around my app’s navigation and the new ‘home bar’ at the bottom of the screen.

Currently I have a 3-segment navbar with page forward/back navigation and the middle returns to the lesson list/menu. Running in the simulator, the home bar directly overlaps the menu portion of the segment. It’s still tappable, but clearly not an ideal placement.

Does anyone have any suggestions for how I could work around this UI/UX issue?

Thanks!

2

Have to read Max’s post: https://blog.ionic.io/ios-11-checklist/ ?

3

I followed all of the instructions on the blog post, but it doesn’t seem like the content ‘safe zone’ affects the navbar/footer.

Here’s an image I just took in the simulator (ignore the white bar at top, it is from status bar plugin not being updated).

15
Simulator Screen Shot - iPhone X - 2017-10-24 at 10.40.15.png2436×1125 264 KB

4

Absolutely not sure but maybe are the Ionic team still working on iPhoneX improvements specially in landscape mode?

Like I said absolutely not sure but https://twitter.com/mhartington tweeted some iPhoneX landscape screenshots

That’s for the possible good news, the bad news is, that I read that the next Ionic version is postponed because they face some nav issues (if I remember correctly) and also got no idea if improvements for iPhoneX would be included

1 Like
5

Awesome @reedrichards thanks for the link. I hadn’t thought to check twitter, but I do see a number of gifs and photos from the last week, so hopefully an update will help out soon-ish.

I think that iPhone X day 1 owners are going to understand that not all apps will be perfect and that some updates will be necessary to improve things, similar to issues faced when Apple has changed screen sizes/resolution in the past (though even more dramatic in this case because of the shape and home bar).

1 Like
6

Well seing the price of these phones not sure 1st owners gonna be so patient :wink:

1 Like
7

@EvanW Ionic-angular 3.8.0 is out. I didn’t tested it but first lines of the changelog may interest you:

This release includes improvements for iOS11 and specifically, the iPhone X.

1 Like
8

@reedrichards thanks for the heads up!

I’m going to update today and try a new build! The only real issue I’m having on iPhone X is the footer, everything else is working quite well.

1 Like
9

There is also a fix in the footer in this version, could confirm it works

1 Like