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

Ionic Framework
1

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?

2

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:

3

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

4

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:

5

or even simpler solution in app.module.ts

IonicModule.forRoot({
			mode: 'ios'
		}),
2 Likes