Guide · Open source

How to use react-native-ui-kitten: install, theme and build screens

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

UI Kitten (npm package @ui-kitten/components) is a React Native UI library with more than 30 ready-made components such as buttons, inputs, lists, tabs and modals. It is built on the Eva Design System, so the controls share one look that you can restyle with a theme. This guide shows you how to install it with Expo or bare React Native, render your first screen, and switch between light and dark themes.

UI Kittenakveo/react-native-ui-kitten · ★ 10.7k · MIT Install options & downloads

Quick start

1Check your versions. Confirm you have React Native 0.72+ or Expo SDK 49+ and Node.js installed.
2Install the packages. Run the Expo or bare React Native install command, including react-native-svg.
3Install iOS pods. In bare React Native projects, run cd ios && pod install.
4Wrap your app in ApplicationProvider. Pass the Eva mapping with the spread syntax and set theme to eva.light.
5Use components. Import components such as Layout, Text and Button from @ui-kitten/components.
6Switch themes. Set theme to eva.dark or a custom theme to change the palette at runtime.

What you need before installing UI Kitten

UI Kitten targets React Native and React. The README lists React Native 0.72 or newer, or Expo SDK 49 or newer, as the minimum versions, and Node.js is required for the package manager commands. The compatibility table in the README also lists react 18.2 as a minimum, and the library is tested with React 19.1, React Native 0.81 and Expo SDK 54.

Node.js installed
React Native 0.72+ or Expo SDK 49+
react-native-svg is installed alongside UI Kitten

Install UI Kitten with Expo or bare React Native

UI Kitten needs two packages plus react-native-svg. Use the Expo command if your project runs on Expo, or the npm command for a bare React Native project. Bare projects on iOS also need CocoaPods installed through pod install.

# Expo
npx expo install @ui-kitten/components @ui-kitten/eva react-native-svg

# Bare React Native
npm install @ui-kitten/components @ui-kitten/eva react-native-svg
cd ios && pod install

Render your first screen with ApplicationProvider

Wrap your app root in ApplicationProvider and pass it the Eva mapping and a theme. The example below uses the Layout, Text and Button components. Pass eva.light for the light theme; the README's quick start uses this pattern as the base of every app.

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

const HomeScreen = () => (
  <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text category='h1'>Hello UI Kitten</Text>
    <Button appearance='outline' status='primary'>
      GET STARTED
    </Button>
  </Layout>
);

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

Switch between light and dark themes at runtime

To switch themes, pass eva.dark to the theme prop instead of eva.light. The README states that every component re-renders with the new palette when the theme changes, and that switching works at runtime without a reload. You can also spread your own theme over the Eva theme to adjust brand colours.

The README points to two guides for this: Branding and Runtime Theming, both on the official documentation site.

Use eva.light or eva.dark as the base theme
Spread your own theme over the Eva theme for brand colours
Theme changes apply without reloading the app

<ApplicationProvider {...eva} theme={eva.dark}>
  <HomeScreen />
</ApplicationProvider>

Know which optional packages to add

The core install is enough for the components. Optional packages add more features: @ui-kitten/eva-icons provides a set of 480+ Eva Icons, and @ui-kitten/moment or @ui-kitten/date-fns provide date services for the Calendar and Datepicker components. @ui-kitten/metro-config precompiles Eva mappings at build time.

@ui-kitten/eva-icons: Eva Icons pack through IconRegistry
@ui-kitten/moment: date service for Calendar and Datepicker
@ui-kitten/date-fns: date service for Calendar and Datepicker
@ui-kitten/metro-config: Metro plugin for build-time style processing

npm install @ui-kitten/eva-icons
npm install @ui-kitten/moment
npm install @ui-kitten/date-fns
npm install -D @ui-kitten/metro-config

What people use it for

Building a cross-platform app for iOS, Android and the web from one React Native codebase
Adding light and dark modes to an existing React Native app
Creating forms and lists with standard inputs and list components
Applying a custom brand colour palette over the Eva theme

Frequently asked questions

Is react-native-ui-kitten free to use?

UI Kitten is released under the MIT licence, as shown in the README badge and the LICENSE.txt link. The MIT licence permits use in commercial and open-source projects, but read the LICENSE file for the full terms.

What are the requirements for react-native-ui-kitten?

The README lists React Native 0.72 or newer, or Expo SDK 49 or newer, as minimum requirements. It also needs react-native-svg, and the compatibility table lists react 18.2 as the minimum React version.

How do I install react-native-ui-kitten with Expo?

Run npx expo install @ui-kitten/components @ui-kitten/eva react-native-svg in your project folder. This installs the core components, the Eva mapping and the SVG dependency in one command.

Does UI Kitten support dark mode?

Yes. The README says UI Kitten includes light and dark themes out of the box. You switch by passing eva.dark to the ApplicationProvider theme prop, and components re-render without a reload.

How does UI Kitten compare to React Native Paper or NativeBase?

UI Kitten is built on the Eva Design System and ships a consistent, opinionated look that you can restyle. React Native Paper, NativeBase, Tamagui and React Native Elements are comparable projects. Compare them on the look you need, the theming model and the components you use before choosing.

Why does my bare React Native iOS build fail after installing UI Kitten?

The README's bare React Native install includes cd ios && pod install. If the iOS build fails, make sure the CocoaPods step has run and that react-native-svg is installed. The README does not list other specific troubleshooting steps, so check the official Getting Started guide for more detail.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

UI Kitten suits React Native developers who want a complete set of standard controls, light and dark themes, and one codebase for iOS, Android and the web, especially in TypeScript projects. It is a poor fit if you want a fully custom visual design without the Eva look, or if your project runs on React Native versions older than 0.72 or Expo SDK 49. For those cases, compare it with React Native Paper, NativeBase, Tamagui or React Native Elements.

Install options & downloads