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?

score 30 · Accepted Answer · edited May 05 '20 at 09:36

30

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 05 '20 at 09:36

Ben Everard

13,652
14
67
96

answered Oct 12 '17 at 09:22

Sampath

63,341
64
307
441

1

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 – David Haddad Oct 12 '17 at 09:32
Glad to hear that it helped :) – Sampath Oct 12 '17 at 09:34
2

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. – sebaferreras Oct 12 '17 at 10:21
1

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 :-) – David Haddad Oct 12 '17 at 10:22
1

You can use this `CLI` too: `--lab, -l Test your apps on multiple platform types in the browser` – Sampath Oct 12 '17 at 10:34
Thanks @Sampath... I wish I could upvote the answer twice lol – sebaferreras Oct 12 '17 at 11:39

Snowbases · Answer 2 · 2023-07-08T12:50:35.433

14

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 08 '23 at 12:50

answered May 28 '19 at 01:04

Snowbases

2,316
2
20
26

this one save me. ionic documentation tell us to use class="ios". which is should be mode="ios". thank you ! – arced Oct 20 '21 at 03:33

Lars Blumberg · Answer 3 · 2020-07-06T08:34:04.767

10

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 06 '20 at 08:34

answered Jul 02 '20 at 09:55

Lars Blumberg

19,326
11
90
127

score 4 · Answer 4 · answered Oct 09 '19 at 14:53

4

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 09 '19 at 14:53

David Smith

593
2
10

score 4 · Answer 5 · edited Nov 23 '20 at 17:44

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 '20 at 17:44

sajjad

834
6
13

answered Nov 23 '20 at 14:12

Mohit Ghodke

41
1

score 4 · Answer 6 · edited Oct 27 '22 at 16:56

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

score 2 · Answer 7 · edited Jan 04 '20 at 18:03

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 04 '20 at 18:03

Ashley Medway

7,151
7
49
71

answered Feb 01 '19 at 12:16

Albin C S

340
1
5

score 1 · Answer 8 · answered Dec 11 '22 at 10:32

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 '22 at 10:32

jaletechs

501
1
7
19

score 0 · Answer 9 · edited Oct 27 '22 at 16:56

0

Ionic V6 - VUE

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

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

edited Oct 27 '22 at 16:56

miken32

42,008
16
111
154

answered Oct 27 '22 at 16:55

aero

1,654
1
21
31

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

9 Answers9

Ionic v6 (React)

Ionic v6 (Angular)

Ionic V6 - VUE

Linked