Nativescript: Move input field and button when keyboard is in screen

[oscar-78]

How can I move the input field and button of a login page when the keyboard appears in screen? I would like to prevent the keyboard from overlapping these input fields and buttons.

[bradmartin]

You could try TJ Vantoll's plugin for iOS here: https://www.npmjs.com/package/nativescript-iqkeyboardmanager

On Android I have not tried finding a solution for this, maybe someone else can chime in on this.

[oscar-78]

Thank you for the suggestion. I actually tried this plugin, but it only makes sure UITextView controls are not covered. But I also need the "Login" button to be visible.

[oscar-78]

Perhaps it can be solved by looking at another angle. Is there an event which is triggered when the keyboard comes in screen? Within the event handler I can move the view to the visible area.

[bnussey]

Hey @oscar-78 did you ever get a solution for this?

[patrickpereira]

+1

[viniciodeltoro]

In android the input filed goes above the keyboard automatically when you tap on the field. You should not do anything as far as I know.

[mhmo91]

Why the issue is closed? it's actually an annoying UX issue that should take a priority

[erjdriver]

This is still an issue on NS 3.3 on the iOS side...anyone on it???

Working fine on Android - the input fields move up and are visible.

[NickIliev]

@erjdriver @mhmo91 @steevelefont @paweldziura @federicomoretti @the1schwartz @viniciodeltoro @bnussey the issue is resolved for Android and the fix will be published in the next official release.
meanwhile, for testing purposes, you can test with installing tns-core-modules@next.

For iOS use nativescript-iqkeyboardmanager plugin

[mhmo91]

@NickIliev Awesome news Nick, thanks))

[mhmo91]

@NickIliev i have updated everything to the latest, n i'm using RadDataForm n the keyboard still overlap the form, here's my package.json
{
"description": "Darts Solutions Inc. (DSI) has supported a number of Ontario Government and private sector IT initiatives. Experience in social services has led DSI to realize many opportunities to help people with developmental disabilities to achieve their goals, participate in their communities, and have choice about how they and their families receive supports. MyDirectPlan (MDP) is a result of years of studying and meeting Passport and Direct Funding Families.",
"keywords": [
"My direct plan",
"funding management"
],
"license": "SEE LICENSE IN ",
"readme": "NativeScript Application",
"version": "0.1.0",
"homepage": "https://github.com/NativeScript/nativescript-sdk-examples-ng",
"repository": {
"type": "git",
"url": "https://github.com/NativeScript/nativescript-sdk-examples-ng"
},
"nativescript": {
"id": "org.nativescript.MyDirectPlan",
"tns-ios": {
"version": "next"
},
"tns-android": {
"version": "3.4.1-2018-02-06-02"
}
},
"scripts": {
"tslint": "tslint --project tsconfig.json --config tslint.json",
"ns-bundle": "ns-bundle",
"start-android-bundle": "npm run ns-bundle --android --run-app",
"start-ios-bundle": "npm run ns-bundle --ios --run-app",
"build-android-bundle": "npm run ns-bundle --android --build-app",
"build-ios-bundle": "npm run ns-bundle --ios --build-app",
"publish-ios-bundle": "npm run ns-bundle --ios --publish-app",
"generate-android-snapshot": "generate-android-snapshot --targetArchs arm,arm64,ia32 --install"
},
"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",
"moment": "^2.20.1",
"nativescript-angular": "next",
"nativescript-background-http": "^3.1.0",
"nativescript-camera": "^3.2.1",
"nativescript-cardview": "^2.0.5",
"nativescript-checkbox": "^3.0.3",
"nativescript-feedback": "1.1.1",
"nativescript-floatingactionbutton": "^4.1.3",
"nativescript-geolocation": "^4.2.3",
"nativescript-imagepicker": "^4.0.1",
"nativescript-intl": "^3.0.0",
"nativescript-pro-ui": "next",
"nativescript-textinputlayout": "^2.0.2",
"nativescript-theme-core": "^1.0.4",
"nativescript-toast": "^1.4.6",
"reflect-metadata": "^0.1.12",
"rxjs": "^5.5.0",
"tns-core-modules": "^4.0.0-2018-02-15-01",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/compiler-cli": "^5.2.2",
"@ngtools/webpack": "^1.9.6",
"babel-traverse": "6.26.0",
"babel-types": "6.26.0",
"babylon": "6.10.0",
"codelyzer": "3.2.2",
"copy-webpack-plugin": "~4.3.0",
"css-loader": "^0.28.9",
"extract-text-webpack-plugin": "~3.0.2",
"fs-extra": "^0.30.0",
"glob": "^7.1.2",
"lazy": "1.0.11",
"markdown-snippet-injector": "^0.2.0",
"nativescript-css-loader": "~0.26.0",
"nativescript-dev-sass": "^1.3.2",
"nativescript-dev-typescript": "next",
"nativescript-dev-webpack": "next",
"nativescript-worker-loader": "~0.8.1",
"node-sass": "4.5.3",
"opener": "^1.4.1",
"raw-loader": "~0.5.1",
"resolve-url-loader": "~2.2.1",
"rimraf": "^2.5.3",
"sass-loader": "~6.0.6",
"tar.gz": "^1.0.5",
"tns-platform-declarations": "^3.4.0",
"tslint": "5.8.0",
"typescript": "~2.6.2",
"uglifyjs-webpack-plugin": "~1.1.6",
"webpack": "~3.10.0",
"webpack-bundle-analyzer": "^2.9.1",
"webpack-sources": "~1.1.0"
},
"author": "Darts Solutions"
}

[skhye05]

Same here as well.

[mhmo91]

@skhye05 the problem was fixed for me by following the following procedures
1- Clean or verify npm cache (make sure u have the latest npm version by running npm i -g npm
2- remove nodemodules folder as well as platfroms n hooks
3- follow the instructions in here
https://docs.nativescript.org/releases/running-latest
it's important to update nativescrip globally before u update ur app

[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.