Open todorspetkov opened 2 years ago
I can confirm I am also having this same issue on iOS only. It happens on both simulators and physical devices. Android seems to be just fine. Here are some screenshots. To replicate the problem create a new Shell application using tabs. Use a grid as the base container and put a button inside of the grid. Use HorizontalOptions="End" and set HeightRequest of button relatively close to the height of the tabbar. You will see on Android the button is placed right above the tabbar as expected. On iOS it will look as though the button isn't rendering at all, but if you then debug the application and set height request to something like 300, you will see the button appear, but behind the tabbar. I am assuming that @todorspetkov is probably using the same layout by using a grid as their base container given their screenshots with floating buttons.
Android:
iOS (Initial page load):
iOS (after setting NavBarIsVisible to True and back to False):
As I am testing this, to replicate you also have to set Shell.NavBarIsVisible to False on the page. It seems on iOS this property makes the page not account for the tab bar in its padding for some controls. However, if I change this property while debugging from False to True and back to False, the controls will re-locate appropriately above the tabbar.
I tried to reproduce this issue, but could not (in Xamarin.Forms 5.0). Can someone supply a reproduction project?
Also, this is described as iOS only but I see Android screenshots demonstrating the issue. And the iOS screen recording does not clearly display the described issue, so a bit confused on this one.
@jgold6 The screenshots and the video I provided in the beginning of the thread are from iOS. As you can see in lower part of the "Before" and "After" screenshots the content has gone under the bottom tab bar after a PushAsync and a PopAsync. The PushAsync adds a view that covers the whole screen (SetTabBarIsVisible(destination , false);).
Sorry, the screen shots looked like they had Android status bars at first glance. (I have gotten so used to the notch on iOS)
Still a project that reproduces the issue would help since I cannot reproduce it with the steps provided.
Here is a project that I have reproducing the issue. The steps I used to reproduce are:
Current workarounds are to set the iOS specific value of UseSafeArea to True, or to not hide the Navigation Bar. In the specific screenshots above that I provided from another project, that just won't suffice. The map utilizes the full screen and I would either have to have a blank space (provided by the iOS safe area) or a Navigation Bar unecessarily taking up a lot of space above the map.
Description
Page content goes under bottom tabbar on iOS.
Steps to Reproduce
Only on iOS (tested 14.8.1), on Android all works fine.
Shell.SetTabBarIsVisible(destination , false); Shell.Current.Navigation.PushAsync(destination) is called to visualize a page
This "hiding" the Tabbar works on Android but not on iOS. Is there a workaround of some kind?
Expected Behavior
The bottom tabbar should not cover content.
Actual Behavior
The bottom tabbar covers content. It seems (by visual inspection) that upon calling Shell.Current.Navigation.PushAsync the caller page gets redrawn (why?) and its content finishes "under" the bottom tab bar even though its constructor contains the following: On().SetUseSafeArea(true);.
Basic Information
Environment
Video capture
https://user-images.githubusercontent.com/20183131/155336199-2739513d-3f3f-4d0d-b02b-b9e42188fce9.mp4
Screenshots
Before![image1](https://user-images.githubusercontent.com/20183131/155322803-23733ed9-2500-467e-8f1a-b5e0f687c822.png)
After![image0](https://user-images.githubusercontent.com/20183131/155322824-9a196937-4fb9-450f-be2f-cdeec03784db.jpeg)