Ionic 4 Platform continuity: Is it possible to load Android (MD) styles even in ios app

Platform continuity is very cool but is it possible to have same UI for both android and ios. Like can my app always use Android MD styles?

Yes

Note: Just don’t use Ionic 4 to build a Production application, as it’s in Beta and there are over 1,100 open issues.

For example:

How to do that? Is it like I have to apply any class to body?

In Ionic 3 you use the ‘Config’ object.

app.component.ts:

import { Component, OnInit, OnDestroy } from '@angular/core';

import { Config, Platform } from '@ionic/angular';

import { LoggerService } from '@core/index';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit, OnDestroy {

  constructor(public config: Config,
              private platform: Platform,
              private logger: LoggerService) {}

  private initialiseApp() {
  
    this.getPlatformInfo();

    this.platform.ready().then(() => {
      
      // do stuff

    });
  }
  
  private getPlatformInfo() {
    
    this.logger.info('AppComponent: getPlatformInfo()');
    
    if (this.platform.is('mobileweb') || this.platform.is('core')) {
      this.logger.info('The Application is running in a browser');
    } else {
      this.logger.info('The Application is running on a device');
    }
    
    if (this.platform.is('android')) {
      
      this.logger.info('The Platform is Android');
      this.config.set('mode', 'md');
      this.config.set('backButtonIcon', 'fa-fal-arrow-left');
      
    } else {
      
      this.logger.info('The Platform is iOS');
      // this.config.set('mode', 'ios');
      // this.config.set('backButtonIcon', 'fa-fal-angle-left');
      this.config.set('mode', 'md');
      this.config.set('backButtonIcon', 'fa-fal-arrow-left');
    }
  }

  ...

}

See:

or even simpler solution in app.module.ts

IonicModule.forRoot({
			mode: 'ios'
		}),
1 Like