Skip to main content

​
Quick Start

Get up and running with UI Kitten in just a few minutes. This guide will help you create your first UI Kitten application.
Choose the method that best fits your needs: start a new project with our template or add UI Kitten to an existing app.

​
Option 1: Start a New Project

The fastest way to start with UI Kitten is using the official template. This creates a pre-configured React Native app with UI Kitten already set up.
1

Install React Native CLI

First, ensure you have the correct React Native CLI installed:
npm uninstall -g react-native-cli
npm install -g @react-native-community/cli
This ensures you’re using the latest CLI tooling.
2

Create a new project

Create a new React Native project using the UI Kitten template:
npx react-native init MyApp --template @ui-kitten/template-js
This command will:
  • Create a new React Native project
  • Install UI Kitten and all dependencies
  • Set up ApplicationProvider with Eva theme
  • Include example code with icons and components
3

Navigate to your project

cd MyApp
4

Run your app

Start your application on iOS or Android:
npm run ios
# or with Yarn
yarn ios
For iOS, you may need to run cd ios && pod install && cd .. before running the app.

​
What’s Included in the Template

The template project includes:
  • ✅ UI Kitten components library
  • ✅ Eva Design System (light and dark themes)
  • ✅ Eva Icons package configured
  • ✅ ApplicationProvider set up
  • ✅ Example components (Button, Text, Layout, Icon)
  • ✅ TypeScript support (if using TS template)

​
Option 2: Add to Existing Project

If you already have a React Native project, follow these steps to add UI Kitten.
1

Install dependencies

Install UI Kitten and required peer dependencies:
npm install @ui-kitten/components @eva-design/eva react-native-svg
2

Link native dependencies (iOS only, non-Expo)

If you’re not using Expo, link the native dependencies for iOS:
cd ios
pod install
cd ..
3

Configure ApplicationProvider

Open your App.js or App.tsx and wrap your app with ApplicationProvider:
App.js
import React from 'react';
import * as eva from '@eva-design/eva';
import { ApplicationProvider, Layout, Text } from '@ui-kitten/components';

const HomeScreen = () => (
  <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text category='h1'>HOME</Text>
  </Layout>
);

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

Restart the bundler

Restart your React Native bundler with cache cleared:
npm start -- --reset-cache

​
Your First Component

Now let’s create a simple UI Kitten component to see everything in action.

​
Basic Example

Here’s a complete example with multiple UI Kitten components:
App.js
import React from 'react';
import { StyleSheet } from 'react-native';
import * as eva from '@eva-design/eva';
import {
  ApplicationProvider,
  Layout,
  Text,
  Button,
} from '@ui-kitten/components';

const HomeScreen = () => {
  const [count, setCount] = React.useState(0);

  return (
    <Layout style={styles.container}>
      <Text category='h1' style={styles.title}>
        Welcome to UI Kitten
      </Text>
      <Text category='s1' style={styles.subtitle}>
        You clicked the button {count} times
      </Text>
      <Button
        style={styles.button}
        onPress={() => setCount(count + 1)}
      >
        Click Me
      </Button>
    </Layout>
  );
};

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
  },
  title: {
    marginBottom: 8,
  },
  subtitle: {
    marginBottom: 16,
  },
  button: {
    marginVertical: 16,
  },
});

​
Example with Icons

To use icons, first install the Eva Icons package: 
npm install @ui-kitten/eva-icons
Then update your app:
App.js
import React from 'react';
import { StyleSheet } from 'react-native';
import * as eva from '@eva-design/eva';
import {
  ApplicationProvider,
  Button,
  Icon,
  IconRegistry,
  Layout,
  Text,
} from '@ui-kitten/components';
import { EvaIconsPack } from '@ui-kitten/eva-icons';

// Create an icon component
const HeartIcon = (props) => (
  <Icon {...props} name='heart' />
);

const HomeScreen = () => (
  <Layout style={styles.container}>
    <Text category='h1' style={styles.text}>
      Welcome to UI Kitten 😻
    </Text>
    <Text category='s1' style={styles.text}>
      Start with editing App.js to configure your App
    </Text>
    <Text style={styles.text} appearance='hint'>
      For example, try changing theme to Dark by using eva.dark
    </Text>
    <Button style={styles.likeButton} accessoryLeft={HeartIcon}>
      LIKE
    </Button>
  </Layout>
);

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    textAlign: 'center',
    marginBottom: 8,
  },
  likeButton: {
    marginVertical: 16,
  },
});

​
Understanding Key Concepts

​
ApplicationProvider

The ApplicationProvider is the root component that:
  • Provides theme context to all UI Kitten components
  • Processes Eva Design System mappings into styles
  • Enables runtime theme switching
  • Should be rendered only once at the application root
Key Props:
  • mapping - Eva Design System mapping (passed via {...eva})
  • theme - Current theme object (eva.light or eva.dark)
  • customMapping - Optional custom design tokens

​
Layout Component

The Layout component is a theme-aware container:
  • Similar to React Native’s View but with theme support
  • Background color automatically adapts to the current theme
  • Supports multiple levels (level='1' through level='4') for visual hierarchy
  • Should be used as the root component of screens
<Layout style={{ flex: 1 }} level='1'>
  {/* Your content */}
</Layout>

​
Text Component

The Text component provides themed typography:
  • Uses design system typography scale
  • Categories: h1, h2, h3, h4, h5, h6, s1, s2, p1, p2, c1, c2, label
  • Appearances: default, alternative, hint
  • Automatically applies theme colors
<Text category='h1'>Heading</Text>
<Text category='p1' appearance='hint'>Secondary text</Text>

​
Button Component

Buttons support multiple variants and states:
  • Status: primary, success, info, warning, danger, basic, control
  • Size: tiny, small, medium, large, giant
  • Appearance: filled, outline, ghost
  • Accessories: accessoryLeft and accessoryRight for icons
<Button
  status='primary'
  size='medium'
  appearance='filled'
  onPress={handlePress}
>
  Press Me
</Button>

​
Theme Switching

UI Kitten supports runtime theme switching. Here’s how to implement it: 
import React, { useState } from 'react';
import * as eva from '@eva-design/eva';
import { ApplicationProvider, Layout, Button, Text } from '@ui-kitten/components';

const App = () => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <ApplicationProvider {...eva} theme={eva[theme]}>
      <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text category='h1'>Current theme: {theme}</Text>
        <Button onPress={toggleTheme}>Toggle Theme</Button>
      </Layout>
    </ApplicationProvider>
  );
};

export default App;

​
Component Status Colors

All interactive components support status colors from Eva Design System: 
<Button status='primary'>Primary</Button>

​
Next Steps

Now that you have UI Kitten set up, explore these topics:

Component Library

Explore all 30+ UI components with examples and API reference

Theming

Customize themes and create your own brand identity

Navigation

Set up navigation in your React Native app

Eva Icons

Learn how to use and customize icons

​
Common Patterns

​
Creating Themed Components

Create your own components that respond to theme changes: 
import { useTheme } from '@ui-kitten/components';

const ThemedCard = () => {
  const theme = useTheme();

  return (
    <View style={{
      backgroundColor: theme['background-basic-color-2'],
      padding: 16,
      borderRadius: 8,
    }}>
      <Text>Themed content</Text>
    </View>
  );
};

​
Customizing Component Styles

You can customize any component using the style prop: 
<Button
  style={{
    backgroundColor: 'blue',
    borderRadius: 20,
  }}
>
  Custom Button
</Button>

​
Using Multiple Status Colors

<Layout style={styles.container}>
  <Button status='primary' style={styles.button}>Primary</Button>
  <Button status='success' style={styles.button}>Success</Button>
  <Button status='info' style={styles.button}>Info</Button>
  <Button status='warning' style={styles.button}>Warning</Button>
  <Button status='danger' style={styles.button}>Danger</Button>
</Layout>

​
Troubleshooting

Make sure ApplicationProvider wraps your entire app and you’re passing {...eva} and theme props.
  • Install @ui-kitten/eva-icons
  • Register icons with <IconRegistry icons={EvaIconsPack} />
  • Place IconRegistry before ApplicationProvider
UI Kitten includes TypeScript definitions. Ensure you’re using TypeScript 4.8.3 or higher.
  • Verify all packages are installed correctly
  • Restart the bundler with --reset-cache
  • On iOS, run cd ios && pod install

​
Additional Resources

Need help? Ask questions on Stack Overflow with the ui-kitten tag or open an issue on GitHub.

Build docs developers (and LLMs) love

Get started for freeTalk to us