Skip to main content

Improving Performance

By default, UI Kitten is configured with processing Eva mapping packages during the runtime. This may lead to performance issues when using mapping customization or React Native Navigation by Wix. By following this guide, you will know how to get rid of these issues and save the time your application takes on loading.

Requirements​

The following steps are only possible with installing UI Kitten package, which manages these issues:

npm i -D @ui-kitten/metro-config

// Using Yarn?
yarn add -D @ui-kitten/metro-config

The props passed to ApplicationProvider should also be modified:

import React from 'react';
import * as eva from '@ui-kitten/eva';
import { ApplicationProvider } from '@ui-kitten/components';

export default () => (
  <ApplicationProvider {...eva} theme={eva.light}>
    // ...
  </ApplicationProvider>
);

By spreading eva we say UI Kitten to use compiled Eva mapping if there is such. If there is no, it still be compiled during the runtime. Notice we omit customMapping property as well, since it's not required anymore.

Metro Bundler​

Metro Bundler is used to bundle React Native applications. By using it with extra configuration, we may compile Eva packages during the application build time. This means, the application will start with ready-to-go stylings.

Create metro.config.js at the root of your project (if you don't have this file yet) and use the MetroConfig.create method to add necessary handlers into default config object.

For bare React Native project:

const MetroConfig = require('@ui-kitten/metro-config');

const evaConfig = {
  evaPackage: '@ui-kitten/eva',
  // Optional, but may be useful when using mapping customization feature.
  // customMappingPath: './custom-mapping.json',
};

module.exports = (() => {
  const previousConfig = {};
  const uiKittenMixedConfig = MetroConfig.create(evaConfig, previousConfig);
  return uiKittenMixedConfig;
})();

For Expo project:

const { getDefaultConfig } = require("expo/metro-config");

const MetroConfig = require('@ui-kitten/metro-config');

const evaConfig = {
  evaPackage: '@ui-kitten/eva',
  // Optional, but may be useful when using mapping customization feature.
  // customMappingPath: './custom-mapping.json',
};

module.exports = (async () => {
  const defaultConfig = await getDefaultConfig(__dirname);
  const uiKittenMixedConfig = MetroConfig.create(evaConfig, defaultConfig);
  return uiKittenMixedConfig;
})();

Shut down the current bundler process and restart the app with clearing cache.

npm start -- --reset-cache

// Using Expo?
expo start -c

Command Line Interface​

Despite that configuring Metro Bundler may cover most of the use cases, we also provide a command line interface to do the same job, but manually. Running within the CI environment is one of the cases when it should be done before the application is built.

Assuming @ui-kitten/metro-config package is installed, we may run the following command:

ui-kitten bootstrap @ui-kitten/eva

Or, if there is a custom mapping:

ui-kitten bootstrap @ui-kitten/eva ./path-to/mapping.json

Definition​

Let's take a look on the evaConfig we define:

evaPackage represents the name of Eva Design System package installed. In this example, we use @ui-kitten/eva. It may be one of the valid Eva Design System packages.

customMappingPath represents a path to custom mapping if you use mapping customization feature. You may omit it if you do not customize Eva.

The second argument of create function is a standard configuration of Metro Bundler. In case you had metro.config.js previously, pass the object you had to merge it with UI Kitten configuration.