Config

Ionic Config provides a way to change the properties of components globally across an app. It can set the app mode, tab button layout, animations, and more.

Global Config

To override the initial Ionic config for the app, import the setupConfig method from @ionic/react, and call it before you render any Ionic components (including IonApp).

setupConfig({
  rippleEffect: false,
  mode: 'md'
});

In the above example, we are disabling the Material Design ripple effect across the app, as well as forcing the mode to be Material Design.

Per-Platform Config

Ionic Config can also be set on a per-platform basis. For example, this allows you to disable animations if the app is being run in a browser on a potentially slower device. Developers can take advantage of the Platform utilities to accomplish this.

In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser. The isPlatform() call returns true or false based upon the platform that is passed in. See the Platform Documentation for a list of possible values.

import { isPlatform, setupConfig } from '@ionic/react';

setupConfig({
  animated: !isPlatform('mobileweb')
});

The next example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match:

import { isPlatform, setupConfig } from '@ionic/react';

const getConfig = () => {
  if (isPlatform('hybrid')) {
    return {
      backButtonText: 'Previous',
      tabButtonLayout: 'label-hide'
    }
  }

  return {
    menuIcon: 'ellipsis-vertical'
  }
}

setupConfig(getConfig());

Finally, this example allows you to accumulate a config object based upon different platform requirements:

import { isPlatform, setupConfig } from '@ionic/react';

const getConfig = () => {
  let config = {
    animated: false
  };

  if (isPlatform('iphone')) {
    config = {
      ...config,
      backButtonText: 'Previous'
    }
  }

  return config;
}
setupConfig(getConfig());

Config Options

Below is a list of config options that Ionic uses.