How can Ionic be setup to render in the iOS style by default?

Question

Right now the ionic app renders with android styling by default. Instead of using the ?ionicplatform=ios param every single time I'd like that to be the default option.

I looked for hints in the config.xml as well as the config settings in app.module.ts such as:

IonicModule.forRoot(
      MyApp, 
      {
        swipeBackEnabled: true,
        platforms: {
          ios: {
            swipeBackEnabled: true,
            statusbarPadding: false
          }
        }
      }
    ),

and was unable to find an elegant way of doing it...Any ideas?

Ben Everard · Accepted Answer · 2020-05-05 09:36:11Z

33

You just need to do this:

app.module.ts

imports: [
IonicModule.forRoot(MyApp,{
    mode: 'ios'
})
],

Note: From @sebaferreras

Btw, by setting this config the app will use the ios styles and components even if you run it on an Android device. Please notice that ?ionicplatform=ios is just used to see how the app looks like when using the browser, but does not affect how the app is built. But setting mode: 'ios' will force the ios mode and apply the ios styles even if you build and create a .apk file.

edited May 5, 2020 at 9:36

Ben Everard

13.8k14 gold badges69 silver badges96 bronze badges

answered Oct 12, 2017 at 9:22

Sampath

66.2k70 gold badges328 silver badges462 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

David Haddad Over a year ago

Ok, works! Btw, for anyone reading this with the intention to do the opposite, the alternative mode to ios is not android but 'md' // material design

Sampath Over a year ago

Glad to hear that it helped :)

sebaferreras Over a year ago

Btw @DavidHaddad, by setting this config the app will use the ios styles and components even if you run it on an Android device. Please notice that?ionicplatform=ios is just used to see how the app looks like when using the browser, but does not affect how the app is built. But setting mode: 'ios' will force the ios mode and apply the ios styles even if you build and create a .apk file.

David Haddad Over a year ago

Thanks for the note! There’s an override for the node within platform Android section which sets mode to ‘md’. The reason why the question was asked was to override the styles when the app is seen on the web :-)

Sampath Over a year ago

You can use this CLI too: --lab, -l Test your apps on multiple platform types in the browser

|

Snowbases · Accepted Answer · 2023-07-08 12:50:35Z

15

in index.html just define mode (this is not recommended).

For iOS

<html lang="en" mode="ios">

For android

<html lang="en" mode="md">

Please just modify the mode in IonicModule (ios/md)

imports: [
  IonicModule.forRoot(MyApp,{
    mode: 'ios'
  })
],

edited Jul 8, 2023 at 12:50

answered May 28, 2019 at 1:04

Snowbases

2,4013 gold badges23 silver badges26 bronze badges

1 Comment

arced Over a year ago

this one save me. ionic documentation tell us to use class="ios". which is should be mode="ios". thank you !

Lars Blumberg · Accepted Answer · 2020-07-06 08:34:04Z

12

Using @ionic/react this is how you go:

import {setupConfig} from '@ionic/react'

setupConfig({mode: 'ios'})

Alternatively for enforcing Material Design:

setupConfig({mode: 'md'})

You could place this code in your main App.js/App.tsx file.

See also https://ionicframework.com/docs/react/config for further global settings.

edited Jul 6, 2020 at 8:34

answered Jul 2, 2020 at 9:55

Lars Blumberg

21.8k15 gold badges101 silver badges135 bronze badges

Comments

miken32 · Accepted Answer · 2022-10-27 16:56:26Z

6

Ionic v6 (React)

Go to your app.tsx

To force Android style (Material Design)

setupIonicReact({ mode: 'md' })

To force iOS style

setupIonicReact({ mode: 'ios' })

Reference: https://ionicframework.com/docs/react/config

Ionic v6 (Angular)

Go to your app.module.ts

To force Android style (Material Design)

imports: [ IonicModule.forRoot({ mode: 'md' }) ]

To force iOS style

imports: [ IonicModule.forRoot({ mode: 'ios' }) ]

https://ionicframework.com/docs/angular/config

edited Oct 27, 2022 at 16:56

miken32

42.5k16 gold badges127 silver badges177 bronze badges

answered Feb 18, 2022 at 13:34

ElyasAsmad

1371 silver badge7 bronze badges

Comments

David Smith · Accepted Answer · 2019-10-09 14:53:26Z

5

For anybody using the new Vue.js support for Ionic, forcing the rendering mode can be achieved by doing this when you import Vue:

import Vue from 'vue';

// ios
Vue.use(Ionic, {
  mode: 'ios'
});

// material design
Vue.use(Ionic, {
  mode: 'md'
});

answered Oct 9, 2019 at 14:53

David Smith

6034 silver badges10 bronze badges

Comments

sajjad · Accepted Answer · 2020-11-23 17:44:52Z

4

Just adding to Ben Everard's answer, if you are using more recent version of Ionic (4.8.0 in my case)

IonicModule.forRoot ->

will not accept two parameters. Just drop the first parameter making it as:

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

edited Nov 23, 2020 at 17:44

sajjad

8576 silver badges14 bronze badges

answered Nov 23, 2020 at 14:12

Mohit Ghodke

411 bronze badge

Comments

Ashley Medway · Accepted Answer · 2020-01-04 18:03:56Z

2

Please try this in your index.html file

I tried the below html code in ionic 4 and it works

Use the below one for getting styled your apk same as ios.

<html lang="en" dir="ltr" class="plt-iphone plt-ios plt-phablet plt-mobile ios" mode="ios">

Use the below one for getting styled your ios app same as android.

<html lang="en" dir="ltr" class="plt-android plt-mobile md" mode="md">

edited Jan 4, 2020 at 18:03

Ashley Medway

7,3197 gold badges54 silver badges73 bronze badges

answered Feb 1, 2019 at 12:16

Albin C S

3482 silver badges5 bronze badges

Comments

jaletechs · Accepted Answer · 2022-12-11 10:32:57Z

1

For Vue 3 and Ionic 6

import { createApp } from "vue";
import App from "./App.vue";
import { IonicVue } from "@ionic/vue";


const app = createApp(App);
app.use(IonicVue, {mode: "ios"});
app.mount("#app");

answered Dec 11, 2022 at 10:32

jaletechs

5812 gold badges7 silver badges21 bronze badges

Comments

miken32 · Accepted Answer · 2022-10-27 16:56:06Z

0

Ionic V6 - VUE

createApp(App).use(IonicVue, {
  mode: 'ios',
});

Documentation: https://ionicframework.com/docs/vue/config

edited Oct 27, 2022 at 16:56

miken32

42.5k16 gold badges127 silver badges177 bronze badges

answered Oct 27, 2022 at 16:55

aero

1,7341 gold badge21 silver badges34 bronze badges

Comments

Sergio Ponce Domínguez · Accepted Answer · 2025-11-15 21:46:30Z

0

If you are using bootstrapApplication() in Angular, you can modify the global configuration of Ionic using provideIonicAngular() like this in main.ts file

bootstrapApplication(AppComponent, {
  providers: [
    // other providers
    provideIonicAngular({ mode: 'ios' }),
  ]
});

answered Nov 15 at 21:46

Sergio Ponce Domínguez

1411 silver badge6 bronze badges

Collectives™ on Stack Overflow

How can Ionic be setup to render in the iOS style by default?

10 Answers 10

6 Comments

1 Comment

Comments

Ionic v6 (React)

Ionic v6 (Angular)

Comments

Comments

Comments

Comments

Comments

Ionic V6 - VUE

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

6 Comments

1 Comment

Comments

Ionic v6 (React)

Ionic v6 (Angular)

Comments

Comments

Comments

Comments

Comments

Ionic V6 - VUE

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related