Android keyboard overlay.

[morzyns]

Keyboard overlays the inputs on Android.
package.json:

"nativescript": {
    "id": "org.nativescript.BTrex",
    "tns-android": {
      "version": "4.0.0"
    },
    "tns-ios": {
      "version": "4.0.1"
    }
  },
  "scripts": {
    "lint": "tslint \"app/**/*.ts\""
  },
  "dependencies": {
    "@angular/animations": "~5.2.0",
    "@angular/common": "~5.2.0",
    "@angular/compiler": "~5.2.0",
    "@angular/core": "~5.2.0",
    "@angular/forms": "~5.2.0",
    "@angular/http": "~5.2.0",
    "@angular/platform-browser": "~5.2.0",
    "@angular/platform-browser-dynamic": "~5.2.0",
    "@angular/router": "~5.2.0",
    "ccxt": "^1.12.137",
    "crypto-js": "^3.1.9-1",
    "email-validator": "^1.0.7",
    "nativescript-angular": "^5.3.0",
    "nativescript-async": "^1.0.2",
    "nativescript-iqkeyboardmanager": "^1.1.0",
    "nativescript-nodeify": "^0.7.0",
    "nativescript-numeric-keyboard": "^3.0.3",
    "nativescript-theme-core": "1.0.4",
    "nativescript-ui-listview": "^3.5.4",
    "nativescript-ui-sidedrawer": "^4.0.0",
    "nativescript-webview-interface": "^1.4.2",
    "qs": "^6.5.1",
    "reflect-metadata": "0.1.10",
    "rxjs": "^5.5.5",
    "rxjs-tslint-rules": "^3.14.0",
    "tns-core-modules": "^4.0.0",
    "tns-platform-declarations": "^3.4.1",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~5.2.0",
    "@ngtools/webpack": "~1.9.4",
    "@types/node": "^9.6.4",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "clean-webpack-plugin": "~0.1.19",
    "codelyzer": "3.2.2",
    "copy-webpack-plugin": "~4.3.0",
    "css-loader": "~0.28.7",
    "extract-text-webpack-plugin": "~3.0.2",
    "lazy": "1.0.11",
    "nativescript-dev-sass": "^1.5.0",
    "nativescript-dev-typescript": "0.7.0",
    "nativescript-dev-webpack": "^0.10.1",
    "nativescript-worker-loader": "~0.8.1",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.2.1",
    "sass-loader": "~6.0.6",
    "tslint": "5.8.0",
    "typescript": "~2.7.2",
    "uglifyjs-webpack-plugin": "~1.1.6",
    "webpack": "~3.10.0",
    "webpack-bundle-analyzer": "^2.9.1",
    "webpack-sources": "~1.1.0"
  }

Presentation

   <GridLayout *ngIf="!isBuyTabActive" class="market-trade sell" rows="auto, auto, auto, auto, auto, *" columns="*, auto" row="2">
                                    <Label [text]="'Balance Available:'" col="0" row="1"></Label>
                                    <Label *ngIf="balances" [text]="balances['BTC'].BalanceWithCurrency" col="0" row="2" class="balance-label"></Label>
                                    <TextField col="0" hint="Price (BTC)" [(ngModel)]="rateSell" row="3" keyboardType="number" style.placeholderColor="#ccc" class="std-text-field"
                                    autocorrect="false" autocapitalizationType="none"></TextField>
                                    <TextField col="0" hint="Amount" [(ngModel)]="quantitySell" keyboardType="number" (ngModelChange)="onChange($event)" row="4" style.placeholderColor="#ccc" class="std-text-field"
                                    autocorrect="false" autocapitalizationType="none"></TextField>

                                    <Button text="Ask Price" (tap)="populatePriceAsk()" class="btn btn-function" col="1" row="3" borderRadius="2"></Button>
                                    <Button text="Max" (tap)="getMaxSell()" class="btn btn-function" col="1" row="4" borderRadius="2"></Button>
                                    <StackLayout colSpan="2" row="5" class="button-container">
                                        <Button text="Sell" (tap)="processTransaction()" class="btn sell-button" borderRadius="2"></Button>
                                    </StackLayout>
                                </GridLayout>

I have checked many times removing platforms, upgrading as much as possible.
tns --version -> 4.0.0-2018-04-05-11377

[tsonevn]

Hi @morzyns,
You should add the GridLayout container inside a ScrollView. For example:

<ScrollView>
<GridLayout *ngIf="!isBuyTabActive" class="market-trade sell" rows="auto, auto, auto, auto, auto, *" columns="*, auto" row="2">
                                    <Label [text]="'Balance Available:'" col="0" row="1"></Label>
                                    <Label *ngIf="balances" [text]="balances['BTC'].BalanceWithCurrency" col="0" row="2" class="balance-label"></Label>
                                    <TextField col="0" hint="Price (BTC)" [(ngModel)]="rateSell" row="3" keyboardType="number" style.placeholderColor="#ccc" class="std-text-field"
                                    autocorrect="false" autocapitalizationType="none"></TextField>
                                    <TextField col="0" hint="Amount" [(ngModel)]="quantitySell" keyboardType="number" (ngModelChange)="onChange($event)" row="4" style.placeholderColor="#ccc" class="std-text-field"
                                    autocorrect="false" autocapitalizationType="none"></TextField>

                                    <Button text="Ask Price" (tap)="populatePriceAsk()" class="btn btn-function" col="1" row="3" borderRadius="2"></Button>
                                    <Button text="Max" (tap)="getMaxSell()" class="btn btn-function" col="1" row="4" borderRadius="2"></Button>
                                    <StackLayout colSpan="2" row="5" class="button-container">
                                        <Button text="Sell" (tap)="processTransaction()" class="btn sell-button" borderRadius="2"></Button>
                                    </StackLayout>
                                </GridLayout>
</ScrollView>

This should resolve the overlay issue for Android. For iOS use nativescript-iqkeyboardmanager plugin.

[morzyns]

Hi @tsonevn,
that suggestion doesn't help unfortunately. We are completely stuck with this bug, can't go to production. Already checked as much we could.

Our last try was that (with scrollView), the solution you suggested also didn't solve this issue.

`

<NavigationButton (tap)="navigateBack()" android.systemIcon="ic_menu_back" ios.position="left">

<Label class="action-bar-title" [text]="watchService.baseCurrencyRatio | async">

<RadSideDrawer tkExampleTitle tkToggleNavButton showOverNavigation="true" class="settings">
    <StackLayout tkDrawerContent>
        <MyDrawer [selectedPage]="'markets'"></MyDrawer>
    </StackLayout>
       <GridLayout class="page page-content market" tkMainContent rows="*" columns="*">
            <ScrollView row="0" column="0">
               <GridLayout class="market-main-tabs" rows="*" columns="*, *" row="0">
                    <Button text="Trade" (tap)="selectMainTab(0)" class="tab-market" [ngClass]="{open: isActive(0)}" col="0" row="1"></Button>
                    <Button text="Open Orders" (tap)="selectMainTab(1)" class="tab-market" [ngClass]="{'open': isActive(1)}" col="1" row="1"></Button>
                </GridLayout>
                <GridLayout #tabContent class="market-main-tabs-content" rows="*" columns="auto" row="1" *ngIf="market">
                    <GridLayout [visible]="isActive(0)" class="market-main-tabs-content" rows="auto, *, *, auto" columns="*" row="1">
                            <GridLayout class="market-info" rows="auto, auto, auto, auto, auto" columns="auto, *, auto, *, *" row="0">
                                <StackLayout colSpan="4" row="0" orientation="horizontal">
                                    <GridLayout rows="*" columns="auto, auto">
                                            <Label [text]="market.MarketName" class="market-name"></Label>
                                            <Label [text]="' / $' +  market.lastDollar" class="market-pair" row="0" col="1"></Label>
                                    </GridLayout>
                                </StackLayout>
                                <StackLayout col="5" row="0" class="span-row" orientation="horizontal" horizontalAlignment="right">
                                    <Label textWrap="true" class="market-offset" [text]="market.Percentage + '%'" [ngClass]="{'market-increments': market.offsetSign, 'market-decrements': !market.offsetSign}" horizontalAlignment="right"></Label>
                                </StackLayout>
                                <Label [text]="'Vol:'" col="0" row="1" class="high-label"></Label>
                                <Label [text]="market.BaseVolume" col="1" row="1"></Label>
                                <Label [text]="'Last:'" col="0" row="2" class="high-label"></Label>
                                <Label [text]="market.Last" col="1" row="2" [ngClass]="{'increments': lastPriceOffset, 'decrements': !lastPriceOffset}"></Label>
                                <Label [text]="'Spread:'" col="0" row="3" class="high-label"></Label>
                                <Label [text]="spread" col="1" row="3"></Label>
                                <Label [text]="'High:'" col="3" row="1" class="high-label"></Label>
                                <Label [text]="market.High" col="4" row="1"></Label>
                                <Label [text]="'Low:'" col="3" row="2" class="high-label"></Label>
                                <Label [text]="market.Low" col="4" row="2"></Label>
                                <Label [text]="'Balance:'" col="3" row="3" class="high-label" [ngClass]="{'gray': !marketBalance}"></Label>
                                <Label *ngIf="marketBalance" [text]="marketBalance" col="4" row="3"></Label>
                                <Label *ngIf="marketBalanceAvailable" [text]="'Available:'" col="3" row="4" class="high-label" [ngClass]="{'gray': !marketBalanceAvailable}"></Label>
                                <Label *ngIf="marketBalanceAvailable" [text]="marketBalanceAvailable" col="4" row="4"></Label>
                            </GridLayout>
                            <GridLayout class="market-chart" rows="*" columns="*" row="1">
                                <Ohlcv [last]="market.Last" [ticker]="market.symbol" *ngIf="market.symbol"></Ohlcv>
                            </GridLayout>
                            <GridLayout row="2" *ngIf="isBuyTabActive" class="market-trade buy" rows="auto, auto, auto, auto, auto, *" columns="*, auto" row="2">
                                <Label [text]="'Balance Available:'" col="0" row="1"></Label>
                                <Label *ngIf="balances" [text]="balances['BTC'].BalanceWithCurrency" col="0" row="2" class="balance-label"></Label>
                                <TextField col="0" style.placeholderColor="#ccc" hint="Price (BTC)" [(ngModel)]="rate" row="3" class="std-text-field"
                                autocorrect="false" autocapitalizationType="none" keyboardType="number"></TextField>
                                <TextField col="0" hint="Amount" [(ngModel)]="quantity" (ngModelChange)="onChange($event)" row="4" style.placeholderColor="#ccc" class="std-text-field"
                                autocorrect="false" autocapitalizationType="none" keyboardType="number"></TextField>

                                <Button text="Bid Price" (tap)="populatePrice()" class="btn btn-function" col="1" row="3" borderRadius="2"></Button>
                                <Button text="Max" (tap)="getMax()" class="btn btn-function" col="1" row="4" borderRadius="2"></Button>
                                <StackLayout colSpan="2" row="5" class="button-container">
                                        <Button text="Buy" colSpan="2" row="5" (tap)="proceedTransaction()" class="btn buy-button" borderRadius="2"></Button>
                                    </StackLayout>
                                    </GridLayout>
                            <GridLayout *ngIf="!isBuyTabActive" class="market-trade sell" rows="auto, auto, auto, auto, auto, *" columns="*, auto" row="2">
                                <Label [text]="'Balance Available:'" col="0" row="1"></Label>
                                <Label *ngIf="balances" [text]="balances['BTC'].BalanceWithCurrency" col="0" row="2" class="balance-label"></Label>
                                <TextField col="0" hint="Price (BTC)" [(ngModel)]="rateSell" row="3" keyboardType="number" style.placeholderColor="#ccc" class="std-text-field"
                                autocorrect="false" autocapitalizationType="none"></TextField>
                                <TextField col="0" hint="Amount" [(ngModel)]="quantitySell" keyboardType="number" (ngModelChange)="onChange($event)" row="4" style.placeholderColor="#ccc" class="std-text-field"
                                autocorrect="false" autocapitalizationType="none"></TextField>

                                <Button text="Ask Price" (tap)="populatePriceAsk()" class="btn btn-function" col="1" row="3" borderRadius="2"></Button>
                                <Button text="Max" (tap)="getMaxSell()" class="btn btn-function" col="1" row="4" borderRadius="2"></Button>
                                <StackLayout colSpan="2" row="5" class="button-container">
                                    <Button text="Sell" (tap)="proceedTransaction()" class="btn sell-button" borderRadius="2"></Button>
                                </StackLayout>
                            </GridLayout>

                            <GridLayout class="market-tabs" rows="auto" columns="*, *" row="3">
                                <StackLayout col="0" row="1"> 
                                    <Button text="BUY" (tap)="selectBuySellTab(true)" class="trade-btn buy" [ngClass]="{open: isBuyTabActive}" borderRadius="3"></Button>
                                </StackLayout>
                                <StackLayout col="1" row="1"> 
                                    <Button text="SELL" (tap)="selectBuySellTab(false)" class="trade-btn sell" borderRadius="3" [ngClass]="{open: !isBuyTabActive}"></Button>
                                </StackLayout>
                            </GridLayout>
                    </GridLayout>

                    <GridLayout *ngIf="isActive(1)" class="market-main-tabs-content" rows="auto, auto" columns="auto" row="2">
                        <GridLayout class="open-orders-header" columns="*,*,*,*">
                            <Label [text]="'Market'" col="0"></Label>
                            <Label [text]="'Remains'" col="1"></Label>
                            <Label [text]="'Price Limit'" col="2"></Label>
                            <Label [text]="'Cancel'" col="3"></Label>
                        </GridLayout>
                        <ListView [items]="watchService.openOrdersSubject | async" row="1" separatorColor="transparent" class="open-orders" (itemTap)="cancelOrder($event.index)">
                            <ng-template let-item="item" let-i="index">
                                <GridLayout class="orders-item" rows="auto" columns="*, *, *, *">
                                        <StackLayout col="0" row="0" class="item" [ngClass]="{'sell-order': item.side === 'sell', 'buy-order': item.side === 'buy'}">
                                            <GridLayout rows="*" columns="auto, auto">
                                                <Label [text]="item.Exchange" row="0" colSpan="2"></Label>
                                            </GridLayout>
                                        </StackLayout>
                                        <StackLayout col="1" row="0" class="item" [ngClass]="{'sell-order': item.side === 'sell', 'buy-order': item.side === 'buy'}">
                                            <Label [text]="item.QuantityRemaining"></Label>
                                        </StackLayout>
                                        <StackLayout col="2" row="0" class="item" [ngClass]="{'sell-order': item.side === 'sell', 'buy-order': item.side === 'buy'}">
                                            <Label [text]="item.Limit" class="market-price"></Label>
                                        </StackLayout>
                                        <StackLayout col="3" row="0" class="item" [ngClass]="{'sell-order': item.side === 'sell', 'buy-order': item.side === 'buy'}">
                                            <GridLayout>
                                                <StackLayout>
                                                    <Image src="res://delete" class="delete-container"></Image>
                                                </StackLayout>
                                            </GridLayout>
                                        </StackLayout>
                                </GridLayout>
                            </ng-template>
                        </ListView>
                    </GridLayout>
            </GridLayout>
            </ScrollView>
        </GridLayout>
</RadSideDrawer>

`

That might be some conflicts with sideDrawer or webView?

AndroidManifest.xml:

<?xml version="1.0" encoding="utf-8"?>
<manifest
    xmlns:android="http://schemas.android.com/apk/res/android" package="__PACKAGE__" android:versionCode="1" android:versionName="1.0">
    <supports-screens android:smallScreens="true" android:normalScreens="true" android:largeScreens="true" android:xlargeScreens="true" />
    <uses-sdk android:minSdkVersion="17" android:targetSdkVersion="__APILEVEL__" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <application android:name="com.tns.NativeScriptApplication" android:allowBackup="true" android:icon="@drawable/icon" android:label="@string/app_name" android:theme="@style/AppTheme">
        <activity android:name="com.tns.NativeScriptActivity" android:label="@string/title_activity_kimera" android:configChanges="keyboardHidden|orientation|screenSize" android:theme="@style/LaunchScreenTheme" android:windowSoftInputMode="adjustResize">
            <meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name="com.tns.ErrorReportActivity" />
    </application>
</manifest>

[tsonevn]

Hi @morzyns,
This issue has been fixed with NativeScript 4.0. Can you confirm that you are reproducing the issue with latest NativeScript?
If you are using 3.4, try upgrading the project to 4.0.

{
    "description": "NativeScript Application",
    "license": "SEE LICENSE IN <your-license-filename>",
    "readme": "NativeScript Application",
    "repository": "<fill-your-repository-here>",
    "nativescript": {
        "id": "org.nativescript.testNg"
    },
    "dependencies": {
        "@angular/animations": "~5.2.0",
        "@angular/common": "~5.2.0",
        "@angular/compiler": "~5.2.0",
        "@angular/core": "~5.2.0",
        "@angular/forms": "~5.2.0",
        "@angular/http": "~5.2.0",
        "@angular/platform-browser": "~5.2.0",
        "@angular/platform-browser-dynamic": "~5.2.0",
        "@angular/router": "~5.2.0",
        "nativescript-angular": "~5.3.0",
        "nativescript-theme-core": "~1.0.4",
        "reflect-metadata": "~0.1.8",
        "rxjs": "~5.5.2",
        "tns-core-modules": "~4.0.0",
        "zone.js": "~0.8.2"
    },
    "devDependencies": {
        "nativescript-dev-typescript": "~0.7.0",
        "typescript": "~2.7.2"
    }
}

[morzyns]

tns --version
4.0

[jogboms]

@morzyns
Could you add android:windowSoftInputMode="stateHidden|adjustResize" to your root activity within App_Resources?

[morzyns]

hi @jogboms ,
im using the latest AndroidManifest.xml with suggested changes

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
	package="__PACKAGE__"
	android:versionCode="1"
	android:versionName="1.0">

	<supports-screens
		android:smallScreens="true"
		android:normalScreens="true"
		android:largeScreens="true"
		android:xlargeScreens="true"/>

	<uses-sdk
		android:minSdkVersion="17"
		android:targetSdkVersion="__APILEVEL__"/>

	<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
	<uses-permission android:name="android.permission.INTERNET"/>

	<application
		android:name="com.tns.NativeScriptApplication"
		android:allowBackup="true"
		android:icon="@drawable/icon"
		android:label="@string/app_name"
		android:theme="@style/AppTheme">

		<activity
			android:name="com.tns.NativeScriptActivity"
			android:label="@string/title_activity_kimera"
			android:configChanges="keyboardHidden|orientation|screenSize"
			android:theme="@style/LaunchScreenTheme"
			android:windowSoftInputMode="stateHidden | adjustResize">

			<meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />

			<intent-filter>
				<action android:name="android.intent.action.MAIN" />
				<category android:name="android.intent.category.LAUNCHER" />
			</intent-filter>
		</activity>
		<activity android:name="com.tns.ErrorReportActivity"/>
	</application>
</manifest>

Unfortunately the issue still exists.
Checked after removing platform android and running tns run android --clean

[tsonevn]

Hi @morzyns,
I reused some part of the attached code from your previous comment, however, I am unable to recreate the issue with the keyboard overlay. It would help if you could provide a sample project, which could be used for debugging.

[jogboms]

@morzyns
Oh! In that case, i might think it has something to do with

ScrollView
    > GridLayout
    > GridLayout

How about wrapping both GridLayouts with a StackLayout

ScrollView
    > StackLayout
        > GridLayout
        > GridLayout

[morzyns]

Hi again @jogboms & @tsonevn.

After checking everything up step by step it came up, the issue is when the navigation.

Issue is when navigating via angular/router

This caused the issue.
this.router.navigate(['/market', {market: this.markets[$event.index].symbol}]);
after changing to RouterExtensions it works good.

Thank you for the help.
@jogboms Btw. i think you're right that ScrollView should have just one child element.

[tsonevn]

Hi @morzyns,
We will check this scenario on our side.
Update: @morzyns can you provide sample project, which demonstrates the case with the Angular router and Android keyboard overlay?

[jogboms]

@morzyns That sure is a weird bug to experience. 🤓

[morzyns]

Another use case that caused the bug:

<StackLayout visibility="{{ !loading ? 'visible' : 'collapsed' }}" height="100%" width="100%" orientation="vertical" row="0">
        <web-view (loadFinished)="pageLoaded()" height="100%" width="100%" #wView></web-view>
</StackLayout> 

While using just

<web-view (loadFinished)="pageLoaded()" height="100%" width="100%" #wView></web-view>
works fine..
I don't know if it's just element's visibility or webView specific bug.

[jogboms]

@morzyns I believe i've experienced this one before i think i switched the StackLayout to a GridLayout