Skip to main content

ApplicationProvider

ApplicationProvider is the root component of a UI Kitten application. It provides Eva Design System styles, theme variables, and icon packs to all descendant components. Every UI Kitten app must wrap its root component tree with ApplicationProvider.

Import​

import { ApplicationProvider } from '@ui-kitten/components';

Basic Usage​

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

const App = () => (
  <ApplicationProvider {...eva} theme={eva.light}>
    <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text category="h1">Welcome to UI Kitten</Text>
    </Layout>
  </ApplicationProvider>
);

export default App;

Props​

PropertyTypeDefaultDescription
mappingSchemaType-Eva mapping configuration object. Required unless styles is given.
themeThemeType-Eva theme object (e.g., eva.light or eva.dark).
customMappingCustomSchemaTypeundefinedCustom mapping overrides for component styles.
stylesThemeStyleType-Pre-processed styles, used instead of mapping and customMapping.
childrenReactNode-The application component tree.

ApplicationProvider accepts the mapping in one of two shapes, and exactly one of them is required:

  • mapping (plus optional customMapping) — the mapping is processed at runtime, on every app start.
  • styles — an already-processed style object, produced at build time by @ui-kitten/metro-config. Faster to start, and what you should use in production.

Storybook​

Live examples coming soon via Storybook.