TextView with text-align: center changes to left align when focus moves off the TextView

[BasyaLipman]

Which platform(s) does your issue occur on?

• tested on iOS only

Please, provide the following version numbers that your issue occurs with:

• CLI: 4.1.0
• Cross-platform modules: 4.2.0
• Runtime(s): tns-ios - 4.1.1
• Plugin(s):

"dependencies": {
    "@angular/animations": "~6.0.0",
    "@angular/common": "~6.0.0",
    "@angular/compiler": "~6.0.0",
    "@angular/core": "~6.0.0",
    "@angular/forms": "~6.0.0",
    "@angular/http": "~6.0.0",
    "@angular/platform-browser": "~6.0.0",
    "@angular/platform-browser-dynamic": "~6.0.0",
    "@angular/router": "~6.0.0",
    "angular-logger": "^0.1.8",
    "crypto-js": "^3.1.9-1",
    "nativescript-angular": "~6.0.0",
    "nativescript-background-http": "^3.2.7",
    "nativescript-camera": "^4.0.2",
    "nativescript-cardview": "^3.1.1",
    "nativescript-drop-down": "^4.0.0",
    "nativescript-gradient": "^2.0.1",
    "nativescript-imagecropper": "^1.0.4",
    "nativescript-imagepicker": "^6.0.2",
    "nativescript-iqkeyboardmanager": "^1.3.0",
    "nativescript-theme-core": "~1.0.2",
    "nativescript-ui-listview": "^3.5.7",
    "nativescript-ui-sidedrawer": "^4.1.1",
    "nativescript-version-number": "^1.1.0",
    "reflect-metadata": "~0.1.8",
    "rxjs": "^6.2.0",
    "rxjs-compat": "^6.2.0",
    "tns-core-modules": "^4.1.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/core": "~0.6.3",
    "@angular/compiler-cli": "~6.0.0",
    "@ngtools/webpack": "~6.0.3",
    "@types/crypto-js": "^3.1.40",
    "@types/jasmine": "^2.8.8",
    "babel-traverse": "6.25.0",
    "babel-types": "6.25.0",
    "babylon": "6.17.4",
    "clean-webpack-plugin": "~0.1.19",
    "copy-webpack-plugin": "~4.5.1",
    "cross-env": "^5.1.6",
    "css-loader": "~0.28.11",
    "del": "^2.2.2",
    "extract-text-webpack-plugin": "~3.0.2",
    "gulp": "github:gulpjs/gulp#4.0",
    "gulp-debug": "^3.1.0",
    "gulp-rename": "^1.2.3",
    "gulp-string-replace": "^0.4.0",
    "lazy": "1.0.11",
    "mkdirp": "^0.5.1",
    "nativescript-css-loader": "~0.26.0",
    "nativescript-dev-android-snapshot": "^0.*.*",
    "nativescript-dev-sass": "^1.6.0",
    "nativescript-dev-typescript": "~0.5.0",
    "nativescript-dev-webpack": "^0.12.0",
    "nativescript-worker-loader": "~0.9.0",
    "raw-loader": "~0.5.1",
    "replace-in-file": "^3.4.0",
    "resolve-url-loader": "~2.3.0",
    "sass-loader": "~7.0.1",
    "scripty": "^1.7.2",
    "tns-platform-declarations": "4.1.0",
    "typescript": "~2.7.2",
    "uglifyjs-webpack-plugin": "~1.2.5",
    "webpack": "~4.6.0",
    "webpack-bundle-analyzer": "~2.13.0",
    "webpack-cli": "~2.1.3",
    "webpack-sources": "~1.1.0"
  }

Please, tell us how to recreate the issue in as much detail as possible.

Created a TextView element as follows:

 <CardView elevation="20" shadowOffsetHeight="0" shadowRadius="7" shadowOpacity="0.25">
                        <TextView [(ngModel)]="this.model.m" hint="m" text="" editable="true" height="140></TextView>
  </CardView>

With scss as follows:

TextView{
    font-size: 16;
    color: $muted;
    font-weight: normal;
    text-align: center;
}

...and all seems well at first - the text in the TextView shows center aligned at first. However when Done is tapped on the keyboard, or focus is moved to another input on the screen, the text shifts to being left aligned.

[tsonevn]

Hi @BasyaLipman,
I tested your case in a sample project while reusing parts from provided SCSS, however, was unable to recreate this abnormality with the text-align. For your convenience, I am attaching the project and the GIF file.

Archive.zip

You can check if the CardView is causing this problem. You can try temporarily removing it. For example:

<StackLayout>
<TextView [(ngModel)]="this.model.m" hint="m" text="" editable="true" height="140></TextView>
</StackLayout>

Also you can try setting up the TextView inside some of the available Layouts(e.g GridLayout) and check if this will solve the case. For example:

<CardView elevation="20" shadowOffsetHeight="0" shadowRadius="7" shadowOpacity="0.25">
        <GridLayout backgroundColor="green" rows="140" class="page">
                        <TextView row="0" [(ngModel)]="this.model.m" hint="m" text="" editable="true" ></TextView>
      </GridLayout>
  </CardView>

[BasyaLipman]

Hi @tsonevn

I have downloaded and run the code you attached here. When I change the following file:
Archive/app/item/items.component.html

and add a second TextView as follows, the issue occurs when you move the focus to the second TextView:

<GridLayout backgroundColor="green" rows="50, 50" class="page">
    <TextView row="0" backgroundColor="yellow" hint="m" text="" height="140" editable="true"></TextView>
    <TextView row="1" backgroundColor="yellow" hint="R" text="" height="140" editable="true"></TextView>
</GridLayout>

[tsonevn]

Hi @BasyaLipman,
I was able to recreate the same scenario in a non-Angular project for iOS. I will move the issue to the modules repository, and we will investigate further the case. I would suggest keeping track on the issue for further info.
Archive.zip

[tsonevn]

This issue was moved to NativeScript/NativeScript#6345