Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 550
David Haddad Avatar asked Oct 12 '17 09:10

David Haddad


People also ask

Does Ionic support iOS?

Because of this foundation in web technologies, Ionic can run anywhere the web runs — iOS, Android, browsers, PWAs, and more.

Does Ionic make native application?

Ionic developers can create Android, iOS, and web apps. Besides, Ionic offers native APIs and cross-platform UI components that can be used for developing amazing cross-platform mobile apps. The open-source Ionic framework and developers can create hybrid mobile applications with Ionic.


3 Answers

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.

like image 126
Lars Blumberg Avatar answered Oct 27 '22 10:10

Lars Blumberg


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.

like image 24
Sampath Avatar answered Oct 27 '22 11:10

Sampath


in index.html just define mode

For iOS

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

For android

<html lang="en" mode="md">
like image 41
Snowbases Avatar answered Oct 27 '22 10:10

Snowbases