UI bottom bar not behaving correctly in iOS when keyboard is showing


#1

Hello,

I am working on a angular 2 nativescript app. On one of the pages, we have a bottom bar that needs to appear on bottom of the page initially and when the keyboard is called move up with it (see screen shot). The bar is displaying correctly in Android, i.e. the Bottom bar (id: bottom-bar) is moving up with the key board. But this behaviour is not working correctly in iOS. The bar remains at the bottom of the page even when the keyboard slides up. How do I fix this behaviour in iOS? My template is below

Parent template: 
<StackLayout>
    <StackLayout sdkToggleNavButton>
        <ActionBar title="Parent" backgroundColor="#f82462">
        </ActionBar>
    </StackLayout>

    <GridLayout rows="auto, *">
        <GridLayout row="0" rows="auto auto">
            <StackLayout row="0" id="horizontal-tag-container">
                <horizontal-tag [name]="detailItem['item']"></horizontal-tag>
            </StackLayout>
            <StackLayout row="1" id="segmented-bar-container">
                <SegmentedBar class="m-5" #sb [items]="myItems" selectedIndex="0" (selectedIndexChange)="onChange(sb.selectedIndex)"></SegmentedBar>
            </StackLayout>
        </GridLayout>
        <GridLayout row="1" rows="*, auto">
            <!--The child template is replaced by router outlet-->
            <router-outlet></router-outlet>
        </GridLayout>
    </GridLayout>
</StackLayout>


Child template, Which is the substitute for the <router-outlet>
<GridLayout>
    <GridLayout rows="*, auto">
        <StackLayout row="0" class="form">
            <StackLayout class="input-field">
                <TextView [(ngModel)]="textContent" class="input" hint="Write something"></TextView>
            </StackLayout>
        </StackLayout>
        <GridLayout row="1" backgroundColor="#f82462">
            <GridLayout height="50" columns="25*, 25*, 25*, 25*" backgroundColor="#f82462" id="bottom-bar">
                <GridLayout col="0" (tap)="setTab(0)">
                    <Label class="fa fa-tab-icon" text="&#xf060;" [ngClass]="{'tab-selected': selected === 0}"></Label>
                </GridLayout>
                <GridLayout col="0" (tap)="setTab(0)">
                    <Label text="Back" class="tabLabel" [ngClass]="{'tab-selected': selected === 0}"></Label>
                </GridLayout>
                <!--<GridLayout col="1" (tap)="setTab(1)">
                    <Label class="fa fa-tab-icon" text="&#xf249;" [ngClass]="{'tab-selected': selected === 1}"></Label>
                </GridLayout>
                <GridLayout col="1" (tap)="setTab(1)">
                    <Label text="Test" class="tabLabel" [ngClass]="{'tab-selected': selected === 1}"></Label>
                </GridLayout>-->
                <GridLayout col="2" (tap)="setTab(2)">
                    <Label class="fa fa-tab-icon" text="&#xf030;" [ngClass]="{'tab-selected': selected === 2}"></Label>
                </GridLayout>
                <GridLayout col="2" (tap)="setTab(2)">
                    <Label text="" class="tabLabel" [ngClass]="{'tab-selected': selected === 2}"></Label>
                </GridLayout>
                <GridLayout col="3" (tap)="setTab(3)">
                    <Label class="fa fa-tab-icon" text="&#xf061;" [ngClass]="{'tab-selected': selected === 3    }"></Label>
                </GridLayout>
                <GridLayout col="3" (tap)="setTab(3)">
                    <Label text="Next" class="tabLabel" [ngClass]="{'tab-selected': selected === 3}"></Label>
                </GridLayout>
            </GridLayout>
        </GridLayout>
    </GridLayout>
</GridLayout>

Here are the link of the Screen shots of Android and IOS.
Android : https://drive.google.com/file/d/0B6qoeWfbya4yd2tOOXRESFVMMWM/view?usp=sharing
IOS: https://drive.google.com/file/d/0B6qoeWfbya4yaUpuVUpyQmNKLUk/view?usp=sharing


#2

Any luck figuring this out?