Nativescript: ios page.showModal platform inconsistancies & bugs

[NathanaelA]

1. By default on Android it will show a title bar; by default on iOS their is no title bar.
2. On Android you can can change the title bar by declaring an ActionBar and settings it title. This does not work on iOS, still no title bar present.
3. On iOS the only way to get a title is to create a small layout variation to have a
   wrapped in a or (so you have to add two or more additional elements to the layout to have a title on iOS).
4. By default on both iOS and Android fullScreen parameter is not working (well it is consistently broken to act like it is true on both platforms). I did put a bug report in #748 which I have figured out how to fix Android; but I have not bothered to dig into iOS (and probably won't). -- Patch #726 has a fix for this.

5. When you pull up the keyboard on ios it covers most of a dialog; I do believe the proper behavior is for the screen to scroll up so the fields are in focus and visible. At least it behaves properly on Android. #782

[hamorphis]

On iOS, the fullScreen=false mode is available only on iPads. iPhones ignore fullScreen=false and show the dialog on the entire screen since their displays are small and there is nothing we can do to force Apple change this.

[NathanaelA]

@hamorphis the thing is if you manually set the height on the Layout; then the dialog does NOT take up the whole screen on iOS. Which is why I say the layout engine is wrongly calculating the height on iOS also.

[hamorphis]

That is normal. When you set the height of the Layout, it becomes as high as you want. Its parent, which you don't see takes up the whole screen.

[vchimev]

I confirm issue 1. that in v.1.3.0 page.showModal shows a title bar on Android, but it should not. Also I confirm with reference to issue 4. that in v.1.3.0 fullScreen=false: does not work properly on Android, works as expected on iPads and is not expected to work on iPhones as @hamorphis explained.

[NathanaelA]

On 1 you an use actionBarHidden="true" in the page definition to hide it. So I assume this should be set to default to false on a modal.

I would love to see consistency on 2, so that 3 isn't required.

Since the code on iOS won't change for 4. I added to my #726 patch, the fix for Android and being full screen, so once it is accepted and merged I'll strike out 4.

And 5 probably should be moved to its own bug; it affects everything not just modal screens. see #782

[hshristov]

@NathanaelA I've fixed all issues so now it should be consistent.

1. No matter what you set as actionBarHidden it always stays hidden.
2. As of 1.4 we are using NavigationBar for iOS so it is not possible (at least not without a lot of changes) to show it in modal page that is why we always hide it in android (in android we are using Toolbar)
3. For the moment this is the recommended and cross platform way - to create a layout and place a label in it. If you think showing full blown ActionBar is needed please log a different issue.
4. fullScreen is now working as expected in android. On iOS - we sets the correct native parameter but iPhone doesn't respect it and always show the page in full screen. Only iPad do. I think this is some UX decision that could change in later iOS version.
5. There is a nice plugin - https://github.com/tjvantoll/nativescript-IQKeyboardManager

Closing this issue for now. Open it if there is something I have missed.

[rajivnarayana]

Workaround for 1.

I created a toolbar plugin for other things but I was able to extend it to mimic a navigation bar on iOS https://github.com/rajivnarayana/nativescript-toolbar#modal-screens. Has xml just like an action bar with support for tap events on items as well.

<Page xmlns="http://schemas.nativescript.org/tns.xsd" 
    xmlns:tools="nativescript-toolbar">
  <DockLayout stretchLastChild="false">
    <tools:ToolBar dock="top" barPosition="3">
        <tools.ToolBar.barItems>
            <tools:ToolBarItem text="Done" tap="onDoneButtonTapped" />
        </tools.ToolBar.barItems>
    </tools:ToolBar>
  </DockLayout>
</Page>

Add style="margin-bottom:0.5" attribute to allow the line below the toolbar to be not cut off when you have other elements like list-view below it.

[yss14]

Is there a possibility to show the ActionBar on a modal view?
@rajivnarayana linked a nice workaround for ios but I need the ActionBar or NavigationBaron both platforms...

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.