Hi everyone
I’m updating the data to the object that the view is rendering , In android it is working fine but in IOS entire view is reloading like (it is flickering ) .below are projects files .
example code:
1. Html file: tab1.page.html
<ion-content class="bodyStyle">
<!-- <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content pullingIcon="" pullingText="" refreshingSpinner="circles" refreshingText="">
</ion-refresher-content>
</ion-refresher> -->
<div class="completegrid">
<ion-grid class="dashgrid" *ngIf="roomApp != 0">
<div class="col-12">
<div class="row">
<div *ngFor="let item of roomApp">
<div class="box" style="width:155px;" [ngClass]="{
'redBorder':item.current_status == 0,
'greenBorder':item.current_status == 1,
'amberBorder':item.current_status == 2
}">
<!-- <div class="d-flex align-items-center justify-content-between"> -->
<!-- <div>
<ion-icon (click)="editName(item.appliance_id);" name="refresh-circle"></ion-icon>
</div> -->
<div class="text-right">
<ion-icon (click)="editName(item.id,item.custom_appliance_name);" name="create"></ion-icon>
</div>
<!-- </div> -->
<p *ngIf="!item.custom_appliance_name" class='data font12 hometitle'>{{item.appliance_name}}</p>
<p *ngIf="item.custom_appliance_name" class='data font12 hometitle'>{{item.custom_appliance_name}}</p>
<img src="{{item.off_icon}}" *ngIf="item.current_status == 0" alt="" class="cardimg" />
<img src="{{item.on_icon}}" *ngIf="item.current_status == 1" alt="" class="cardimg" />
<img src="{{item.off_icon}}" *ngIf="item.current_status == 2" alt="" class="cardimg" />
<div class="d-flex justify-content-between">
<div *ngIf="item.current_status == 1 || item.current_status == 0">
<ion-toggle color="primary" style="padding-bottom: 4px;"
(click)="checkStatus(item.id,item.current_status)"
[checked]="item.current_status == 1 ? 'true' : 'false'"></ion-toggle>
<div *ngIf="item.current_status == 1" class="font10">On</div>
<div *ngIf="item.current_status == 0" class="font10">Off</div>
</div>
<div *ngIf="item.current_status == 2" class="d-flex align-items-center">
<div *ngIf="item.current_status == 2" class="font10 p-2"
style="background-color:red; color:#fff;border-radius:6px;">FAULTY</div>
</div>
<div>
<ion-toggle class="custom-toggle" (click)="checkNotification(item.id,item.notification_status)"
[checked]="item.notification_status == 1 ? 'true' : 'false'" style="padding-bottom: 4px;">
</ion-toggle>
<div class="font10">Notification</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ion-grid>
<ion-grid *ngIf="roomApp== 0" class="d-flex justify-content-center align-items-center red">
No Appliances found
</ion-grid>
</div>
</ion-content>
2. TS file: tab1.page.ts
doRefresh() {
this.apiService.rooms(this.uid).subscribe(response => {
if (!response[‘error’]) {
localStorage.setItem(“appliances”, JSON.stringify(response[‘appliances’]));
this.allAppliance = response[‘appliances’];
this.roomApp = this.allAppliance[this.room_id];
}
else {
this.resError = response[‘error’];
}
},
(err) => {
console.log("error==> ", err);
if (err[‘status’] == 401) {
this.navController.navigateForward(’/login’);
localStorage.setItem(‘loginValue’, ‘logout’);
}
})
}
3. scss file: tab1.page.scss
ion-content ion-toolbar {
–background: transparent;
}
.box {
box-shadow: 0 2px 4px rgba(var(–ion-color-dark-rgb), 0.24);
margin: 10px;
text-align: center;
padding: 6px;
min-height: 190px;
}
.cardimg {
width: 84px;
height: 84px;
}
.data {
margin: 0;
}
.font12{
font-size:12px;
}
.font10{
font-size:10px;
}
.red{
color:gray;
height: 100vh;
}
.greenBorder{
border-bottom:4px solid green;
}
.redBorder{
border-bottom:4px solid gray;
}
.amberBorder{
border-bottom:4px solid red;
}
.loading{
background-color:transparent !important;
}
Package.json
{
"name": "vidut",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "~8.2.14",
"@angular/core": "~8.2.14",
"@angular/forms": "~8.2.14",
"@angular/platform-browser": "~8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14",
"@angular/router": "~8.2.14",
"@ionic-native/core": "^5.31.1",
"@ionic-native/device": "^5.31.1",
"@ionic-native/fcm": "^5.31.1",
"@ionic-native/keyboard": "^5.31.1",
"@ionic-native/local-notifications": "^5.31.1",
"@ionic-native/preview-any-file": "^5.31.1",
"@ionic-native/screen-orientation": "^5.31.1",
"@ionic-native/splash-screen": "^5.31.1",
"@ionic-native/status-bar": "^5.31.1",
"@ionic/angular": "^5.5.4",
"bootstrap": "^4.4.1",
"cordova-browser": "6.0.0",
"cordova-ios": "6.2.0",
"cordova-plugin-screen-orientation": "^3.0.2",
"core-js": "^2.5.4",
"es6-promise-plugin": "^4.2.2",
"highcharts": "^8.1.0",
"highcharts-angular": "^2.4.0",
"rxjs": "~6.5.1",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.803.29",
"@angular/cli": "~8.3.23",
"@angular/compiler": "~8.2.14",
"@angular/compiler-cli": "~8.2.14",
"@angular/language-service": "~8.2.14",
"@ionic/angular-toolkit": "^2.1.1",
"@ionic/lab": "3.2.10",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"cordova-android": "^9.0.0",
"cordova-plugin-badge": "^0.8.8",
"cordova-plugin-device": "^2.0.3",
"cordova-plugin-fcm-with-dependecy-updated": "^7.8.0",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^5.0.0",
"cordova-plugin-local-notification": "^0.9.0-beta.2",
"cordova-plugin-preview-any-file": "^0.2.3",
"cordova-plugin-splashscreen": "^6.0.0",
"cordova-plugin-statusbar": "^2.4.3",
"cordova-plugin-whitelist": "^1.3.4",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-screen-orientation": {},
"cordova-plugin-preview-any-file": {},
"cordova-plugin-local-notification": {},
"cordova-plugin-fcm-with-dependecy-updated": {
"IOS_FIREBASE_MESSAGING_VERSION": "~> 7.4.0"
},
"cordova-plugin-ionic-webview": {}
},
"platforms": [
"android",
"browser",
"ios"
]
}
}
In Android it is working fine without flickering below you can see Gif.
In IOS it is not working ,it is flickering
As you can see from IOS gif ,images are flickering.
can anyone help me from this issue