akveo/react-native-ui-kitten

README

UI Kitten

React Native UI library built on the Eva Design System.
30+ themeable components, light and dark themes, runtime theme switching, iOS, Android and web.

Documentation · Getting Started · Components · Migrate from v5 · Changelog

UI Kitten 6 is out. It is rebuilt for React 19, React Native 0.81 and the New Architecture. Upgrading from 5.x? Read the 5.x to 6 migration guide.

Features

30+ components — buttons, inputs, selects, calendars, lists, tabs, drawers, modals, popovers, menus and more, each with Eva appearances, statuses and sizes.
Eva Design System — every component follows the Eva specification. Ship the default look or supply your own mapping.
Theming — light and dark themes out of the box, custom brand themes, and theme switching at runtime with no reload.
New Architecture ready — function components and hooks throughout, verified on Fabric with React Native 0.81 and Expo 54.
TypeScript first — generated .d.ts files, exported ref types and prop types for every component.
Cross-platform — iOS, Android and the web via React Native Web.
Accessible — roles, states and values exposed to VoiceOver, TalkBack and screen readers. See the accessibility guide for current coverage.
480+ Eva Icons — optional SVG icon pack through @ui-kitten/eva-icons, register the full set or only the icons you import, or bring your own icon set.
Dual CJS + ESM build — works with Metro, Vite, Jest and Node without extra configuration.

Installation

UI Kitten needs two packages plus react-native-svg:

# 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

Optional packages:

npm install @ui-kitten/eva-icons          # Eva Icons pack
npm install @ui-kitten/moment             # Calendar / Datepicker with moment
npm install @ui-kitten/date-fns           # Calendar / Datepicker with date-fns
npm install -D @ui-kitten/metro-config    # Build-time style processing

Starting from scratch? npx create-expo-app@latest MyApp and then run the Expo command above inside it. The Getting Started guide covers both paths in detail.

Quick start

Wrap your app root in ApplicationProvider and pass it the Eva mapping and a theme:

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 to eva.dark, or spread your own theme over it, and every component re-renders with the new palette. See Branding and Runtime Theming.

Compatibility

Dependency	Minimum	Tested with
`react`	18.2	19.1
`react-native`	0.72	0.81 (New Architecture)
`react-native-svg`	13	15.12
Expo	SDK 49	SDK 54
React Native Web	0.19	0.21

Packages

Package	Version	Description
`@ui-kitten/components`		The components, theming hooks and `ApplicationProvider`.
`@ui-kitten/eva`		Eva mapping plus the light and dark themes. Required.
`@ui-kitten/material`		Alternative Material-flavoured mapping and themes.
`@ui-kitten/eva-icons`		480+ Eva Icons as an `IconRegistry` pack.
`@ui-kitten/moment`		`moment` date service for Calendar and Datepicker.
`@ui-kitten/date-fns`		`date-fns` date service for Calendar and Datepicker.
`@ui-kitten/metro-config`		Metro plugin that precompiles Eva mappings at build time.
`@ui-kitten/processor`		Mapping processor. Replaces `@eva-design/dss` and `@eva-design/processor`.
`@ui-kitten/mapping-base`		Shared mapping schema used by `eva` and `material`.
`@ui-kitten/codemod`		Rewrites a v5 app for v6 and reports what it could not touch.

Migrating from v5

Package names, component names and props are unchanged. The breaking changes are the move from class to function components (ref types), the removal of the styled decorator in favour of useStyled, and enforced peer dependencies. The migration guide lists every change with a fix.

npx @ui-kitten/codemod rewrites the mechanical parts and leaves a report of what it could not touch; add --write to apply. Source in src/codemod.

Documentation and examples

Documentation site — guides, design system reference and a page per component.
Showcase app — an Expo app that renders every component with live theme and mapping toggles. Run it with yarn showcases:start and yarn showcases:ios or yarn showcases:android.
Eva Design System — the specification the mappings implement.

Contributing

Issues and pull requests are welcome. The repository is a Yarn 3 + Turborepo monorepo; the packages live in src/* and the docs site in website/.

yarn install
yarn build       # build every package
yarn test        # jest
yarn lint
yarn typecheck
yarn docs:dev    # docs site at localhost:3000

Every user-facing change needs a changeset (yarn changeset). Releases are automated from master and next; see RELEASING.md.

Questions and ideas belong in GitHub Discussions; bugs in Issues.

License

MIT.

UI Kitten was created by the Akveo team. The v6 rewrite and current maintenance are by Vlad Bataev and the UI Kitten contributors. The Eva processor and mapping packages are derived from @eva-design/*; see NOTICE. The icons in @ui-kitten/eva-icons are Eva Icons by Akveo, MIT licensed; see that package's LICENSE.