DOCSEARCHbyAlgolia
Submit Docs

UI Kitten Documentation

repository·master·Indexed 27 days ago

https://github.com/akveo/react-native-ui-kitten

A React Native UI library based on the Eva Design System for creating multi-brand, cross-platform mobile applications. Version 5.3.1 features 25+ general-purpose components, a runtime theme switching system for Light and Dark modes, and support for over 480 SVG Eva icons. The library provides a robust theming engine using rkTypes, RkTheme for custom style definitions, and the RkComponent class for building theme-aware custom components.

Tokens
25.4K
Snippets
73
Records
122
Agent score
95%

What's inside UI Kitten

  1. Overview of UI Kitten modules

    master

    UI Kitten is a customizable React Native UI library based on the Eva Design System. It is distributed as several specialized npm packages to allow for modular usage:

    • @ui-kitten/components: The core module containing 30+ high-quality React Native components, Light and Dark visual themes, React Native Web support, and Right-to-Left (RTL) support.
    • @ui-kitten/eva-icons: A module providing access to over 480 Eva Icons optimized for use with UI Kitten components in React Native.
    • @ui-kitten/moment & @ui-kitten/date-fns: Modules that enable UI Kitten components to integrate with popular date libraries for date manipulation.
    • Kitten Tricks: A demo React Native application showcasing the modules in action.

  2. Overview of UI Kitten features

    master

    UI Kitten is a React Native UI library based on the Eva Design System. Key features include:

    • 25+ general-purpose components: Pre-designed and tested UI elements.
    • Theming System: Support for Light and Dark themes, with the ability to change themes at runtime without reloading the application.
    • Eva Icons Support: Access to over 480 SVG Eva icons.
    • Eva Design System: Ensures consistency and scalability by following Eva specifications.

  3. Framework Package Structure Overview

    master

    The UI Kitten repository is organized into several key packages and directories:

    • @ui-kitten/components: Located in src/components. Contains the UI Kit.
      • src/components/theme: Styling services (ThemeProvider, MappingProvider, StyleProvider, ApplicationProvider).
      • src/components/ui: Basic UI components.
    • @ui-kitten/eva-icons: Eva Icons for React Native.
    • @ui-kitten/moment / @ui-kitten/date-fns: Services for date handling.
    • @ui-kitten/template-js / @ui-kitten/template-ts: React Native CLI templates.
    • docs: The documentation website.
    • Kitten Tricks: Independent demo application for runnable examples.

  4. Understand the Eva Design System implementation in UI Kitten

    master
    UI Kitten is a React Native implementation of the Eva Design System. Components follow specific visual styles and behaviors based on Design System rules. The system is built using Atomic Design Principles, ensuring components are constructed from basic elements with shared styles and a unified Visual Language. This architecture allows for high customizability and support for multiple themes across platforms.

  5. Understand Eva Design System styling terminology

    master

    The Eva Design System uses a specific hierarchy of terms to describe how UI components are styled. Understanding these terms is essential for working with component mappings and themes:

    • Parameter: A single style property using camelCase (e.g., backgroundColor).
    • Semantic Property: A high-level property that applies multiple parameters at once (e.g., appearance or variant groups).
    • Appearance: Defines the high-level view of a component (dimensions, shape, main colors). Components have at least one default appearance, and others inherit from it.
    • Variant Group: A logical group of related values (variants) controlled by a single property key (e.g., a status property with success, info, etc., variants).
    • Variant: A specific value within a Variant Group that represents a logical set of parameters (e.g., small, large).
    • State: Parameters applied based on user interaction or component status, similar to CSS pseudo-classes (e.g., active).

  6. Understand the Eva Design System Theme structure

    master

    In UI Kitten, a theme is a JSON or JavaScript object containing semantic variables that define the application's look and feel. Themes allow you to change visual styles, create new themes, and switch between them at runtime without reloading the page.

    Key features:

    • Semantic Variables: Uses names like color-primary-500 instead of hardcoded hex values.
    • Variable Referencing: You can reference one variable within another using a dollar sign prefix (e.g., "color-primary-focus": "$color-primary-700").
    • Semantic Groups: Themes are organized into Colors, Backgrounds & Borders, Text Colors, and Fonts & Text Styles.
    {
  // ...
  "color-danger-100": "#fff2f2",
  "color-danger-200": "#ffd6d9",
  "color-danger-300": "#ffa8b4",
  "color-danger-400": "#ff708d",
  // ...
  "color-danger-900": "#700940",

  /* Basic colors - for backgrounds and borders and texts */

  "color-basic-100": "white",
  "color-basic-200": "#f7f8fa",
  "color-basic-300": "#edf0f4",
  "color-basic-400": "#dde1eb",
  // ...
  "color-basic-1100": "#131729",

  /* Status colors states - focus, hover, default, active, disabled  */

  "color-primary-focus": "$color-primary-700",
  "color-primary-hover": "$color-primary-400",
  "color-primary-default": "$color-primary-500",
  "color-primary-active": "$color-primary-600",
  "color-primary-disabled": "$color-primary-300"
  // ...
}

  7. Define base styles and rkTypes for an rk-component

    master

    Styles for an rk-component are defined in a separate function that accepts a theme object. This allows styles to be reactive to theme changes.

    • Base Style: The _base key in the returned object defines the default styles applied to all instances of the component.
    • rkTypes: Additional keys in the returned object (other than _base) define custom variations (e.g., round, info) that can be applied using the rkType prop on the component.

    Example structure for a style definition function:

    export const AvatarTypes = (theme) => {
  return({
     _base: {
       container: {
         flex: 1,
         alignItems: 'center',
         flexDirection: 'row',
         marginVertical:4
       },
       image: {
         width: 40,
         height: 40
       },
       username: {
         paddingLeft: 10,
         color: theme.colors.text.base
       },
       description:{
         paddingLeft: 10,
         color: theme.colors.text.hint,
         fontSize: theme.fonts.sizes.small
       },
     },
     round: {
       image: {
         borderRadius: 20,
         width: 36,
         height: 36,
         margin: 2
       }
     },
     info: {
       backgroundColor: theme.colors.screen.info,
       color: theme.colors.text.subtitle,
       descriptionColor: theme.colors.text.subtitle
     }
  });
}

  8. Migrate styled High Order Component

    master

    In version 5.0.0, the styled High Order Function was updated to inject a single eva property which combines the dispatch function, theme, and style properties. Additionally, styled was re-implemented as a decorator for class components. When using it, you should destructure eva from your props to avoid passing it down to underlying components.

    import React from 'react';
import { View } from 'react-native';
import { styled } from '@ui-kitten/components';

@styled('MyComponent')
export class MyComponent extends React.Component {

  render() {
    const { eva, ...restProps } = this.props;
    return (
      <View />
    );
  }
}

  9. Configure Backgrounds and Borders using Basic colors

    master

    Backgrounds and borders are controlled by the basic color palette. There are 11 shades of color-basic (from 100 to 1100). For transparency, use 6 shades of color-basic-transparent (from 100 to 600), which are derived by adding an alpha channel to the color-basic-600 value.

    Example structure for theme.json:

    {
  "color-basic-100": "#FFFFFF",
  "color-basic-200": "#F5F5F5",
  "color-basic-300": "#F5F5F5",
  "color-basic-400": "#D4D4D4",
  "color-basic-500": "#B3B3B3",
  "color-basic-600": "#808080",
  "color-basic-700": "#4A4A4A",
  "color-basic-800": "#383838",
  "color-basic-900": "#292929",
  "color-basic-1000": "#1F1F1F",
  "color-basic-1100": "#141414"
}
    {
  "color-basic-100": "#FFFFFF",
  "color-basic-200": "#F5F5F5",
  "color-basic-300": "#F5F5F5",
  "color-basic-400": "#D4D4D4",
  "color-basic-500": "#B3B3B3",
  "color-basic-600": "#808080",
  "color-basic-700": "#4A4A4A",
  "color-basic-800": "#383838",
  "color-basic-900": "#292929",
  "color-basic-1000": "#1F1F1F",
  "color-basic-1100": "#141414"
}

  10. Migrate ListItem and Card components (v4.x to v5.0.0)

    master

    In v5.0.0, ListItem and Card components have undergone the following changes:

    ListItem:

    • The onPress callback no longer receives the index argument (for performance).
    • titleStyle and descriptionStyle are removed. Use function components for title and description props to apply custom styles.
    • icon and accessory properties are replaced by accessoryLeft or accessoryRight.

    Card:

    • CardHeader is removed. Use the header prop to provide a custom header component.
    • CardFooter is removed. Use the footer prop to provide a custom footer component.

  11. Create a custom branded theme

    master

    To create a custom theme, use the Eva Colors generator to pick semantic colors (e.g., primary, success, info, warning, danger, and basic). Export the result as a JSON file. To apply your custom theme, merge it with an existing Eva theme (eva.light or eva.dark) and pass it to the ApplicationProvider via the theme prop.

    import React from 'react';
import * as eva from '@eva-design/eva';
import { ApplicationProvider, Layout, Button } from '@ui-kitten/components';
import { default as theme } from './theme.json'; // <-- Import app theme

export default () => (
  <ApplicationProvider {...eva} theme={{ ...eva.dark, ...theme }}>
    <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button>HOME</Button>
    </Layout>
  </ApplicationProvider>
);