### Configure Application Root with ApplicationProvider

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/getting-started.md

Wrap your root component in `ApplicationProvider` from UI Kitten and Eva Design System. This example demonstrates a basic setup with a 'HOME' text.

```jsx
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>
);
```

--------------------------------

### Start React Native App

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/getting-started.md

Navigate to your project directory and start the application. Use `yarn ios` if you prefer Yarn.

```bash
npm run ios

// Using Yarn?
// yarn ios
```

--------------------------------

### Install UI Kitten Metro Config

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/improving-performance.md

Install the necessary package for configuring Metro Bundler. Use npm or Yarn.

```bash
npm i -D @ui-kitten/metro-config
```

```bash
yarn add -D @ui-kitten/metro-config
```

--------------------------------

### Install React Native CLI

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/getting-started.md

Ensure you have the correct React Native CLI installed by uninstalling the global version and installing the community version.

```bash
npm un -g react-native-cli && npm i -g @react-native-community/cli
```

--------------------------------

### Install UI Kitten Dependencies

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/getting-started.md

Install the necessary UI Kitten components, Eva Design System, and react-native-svg. If using Yarn, use `yarn add`.

```bash
npm i @ui-kitten/components @eva-design/eva react-native-svg

// Using Yarn?
// yarn add @ui-kitten/components @eva-design/eva react-native-svg
```

--------------------------------

### Restart Bundler with Cache Reset

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/icon-packages.md

After installing dependencies, restart the bundler with the `--reset-cache` flag to apply changes. For Expo, use `expo start -c`.

```bash
npm start -- --reset-cache

// Using Expo?
// expo start -c
```

--------------------------------

### Install Babel Decorators Plugin

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/design-system/custom-mapping.md

Install the `@babel/plugin-proposal-decorators` module as a development dependency. This is required for using decorators in your components.

```bash
npm i -D @babel/plugin-proposal-decorators

// Using Yarn?
yarn add -D @babel/plugin-proposal-decorators
```

--------------------------------

### Initialize React Native App with UI Kitten (JavaScript)

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/README.md

Use this command to start a new React Native project with the UI Kitten JavaScript template. This sets up the project with UI Kitten pre-configured.

```bash
npx react-native init MyApp --template @ui-kitten/template-js
```

--------------------------------

### Link react-native-svg for iOS

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/getting-started.md

In a non-Expo environment, complete the iOS installation by navigating to the `ios` directory and running `pod install`.

```bash
cd ios && pod install
```

--------------------------------

### Install UI Kitten 5.0.0 and Eva Design 2.0.0

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/migration/4.x-5.0.0-migration.md

Update your project dependencies to the latest versions of UI Kitten and Eva Design using npm or Yarn.

```bash
npm i @ui-kitten/components @eva-design/eva

// Using Yarn?
yarn add @ui-kitten/components @eva-design/eva
```

```bash
npm i @ui-kitten/eva-icons

// Using Yarn?
yarn add @ui-kitten/eva-icons
```

--------------------------------

### Themed Component Usage Example

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/design-system/use-theme-variables.md

Import and use a custom themed component within your application. Ensure the path to the component is correctly specified.

```javascript
import React from 'react';
import { ThemedAwesomeView } from './path-to/awesome.component'; // <-- import themed component

export const AwesomeViewShowcase = (props) => (
  <ThemedAwesomeView {...props} />
);
```

--------------------------------

### Initialize React Native App with UI Kitten (TypeScript)

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/README.md

Use this command to start a new React Native project with the UI Kitten TypeScript template. This sets up the project with UI Kitten pre-configured for TypeScript.

```bash
npx react-native init MyApp --template @ui-kitten/template-ts
```

--------------------------------

### Install react-native-svg for Expo

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/icon-packages.md

If you are using Expo, use `expo install` to correctly install the `react-native-svg` package.

```bash
expo install react-native-svg
```

--------------------------------

### Install Eva Icons and Dependencies

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/icon-packages.md

Install the Eva Icons package and react-native-svg, which is a required dependency. If using Expo, use `expo install react-native-svg`.

```bash
npm i @ui-kitten/eva-icons react-native-svg

// Using Yarn?
// yarn add @ui-kitten/eva-icons react-native-svg
```

--------------------------------

### Install UI Kitten Package

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/landing/index.html

Install the UI Kitten package and its Eva design system dependency from NPM. This is the first step to integrating UI Kitten into your React Native project.

```bash
npm i react-native-ui-kitten @eva-design/eva
```

--------------------------------

### Install react-native-svg for Expo

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/getting-started.md

If you are using Expo, install a specific version of react-native-svg using `expo install`.

```bash
expo install react-native-svg@9.13.6
```

--------------------------------

### Configure Transparency Shades for Backgrounds

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/branding.md

Define 6 shades of transparency using rgba format for backgrounds. Start with 8% transparency and increase by the same value for each subsequent shade.

```json
{
   "color-basic-transparent-100": "rgba(128, 128, 128, 0.08)",
   "color-basic-transparent-200": "rgba(128, 128, 128, 0.16)",
   "color-basic-transparent-300": "rgba(128, 128, 128, 0.24)",
   "color-basic-transparent-400": "rgba(128, 128, 128, 0.32)",
   "color-basic-transparent-500": "rgba(128, 128, 128, 0.4)",
   "color-basic-transparent-600": "rgba(128, 128, 128, 0.48)"
}
```

--------------------------------

### Module Scope Example

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/CONTRIBUTING.md

For changes affecting other modules like date utilities, use the module name as the scope.

```gitcommit
feat(date-fns): description of awesome feature
```

--------------------------------

### Configure Basic Color Shades for Backgrounds

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/branding.md

Define 11 shades of basic color in your theme.json to properly configure backgrounds. Start with the lightest shade and progressively select darker ones.

```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"
}
```

--------------------------------

### Apply Custom Fonts with UI Kitten Mapping

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/branding.md

Create a `mapping.json` file to apply custom fonts to UI Kitten components. This example sets the default text font family.

```json
{
  "strict": {
    "text-font-family": "OpenSans-Regular"
  }
}

```

--------------------------------

### Usage Example with Custom Icons

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/icon-packages.md

Demonstrates how to use a custom icon component, like FacebookIcon, within UI Kitten components such as Button. The Icon component from '@ui-kitten/components' is used here, referencing the name defined in the icon pack.

```jsx
import React from 'react';
import { Button, Icon } from '@ui-kitten/components';

export const FacebookIcon = (props) => (
  <Icon name='facebook' {...props} />
);

export const LoginButton = () => (
  <Button accessoryLeft={FacebookIcon}>Login with Facebook</Button>
);
```

--------------------------------

### Component Scope Example

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/CONTRIBUTING.md

When making changes to a specific UI component, use the component name as the scope in your commit message.

```gitcommit
style(button): add styles for pressed state
```

--------------------------------

### Register Custom Icon Registry

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/icon-packages.md

Registers the custom icon pack with UI Kitten's IconRegistry and initializes the application with the Eva Design system. This setup should be done in your main App.js file.

```jsx
import React from 'react';
import * as eva from '@eva-design/eva';
import { ApplicationProvider, IconRegistry, Layout, Text } from '@ui-kitten/components';
import { FeatherIconsPack } from './feather-icons';

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

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

--------------------------------

### Create Feather Icons Pack

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/icon-packages.md

Defines an icon pack for Feather Icons using a Proxy to dynamically map icon names to React elements. Ensure react-native-vector-icons is installed.

```jsx
import React from 'react';
import { StyleSheet } from 'react-native';
import Icon from 'react-native-vector-icons/Feather';

export const FeatherIconsPack = {
  name: 'feather',
  icons: createIconsMap(),
};

function createIconsMap() {
  return new Proxy({}, {
    get(target, name) {
      return IconProvider(name);
    },
  });
}

const IconProvider = (name) => ({
  toReactElement: (props) => FeatherIcon({ name, ...props }),
});

function FeatherIcon({ name, style }) {
  const { height, tintColor, ...iconStyle } = StyleSheet.flatten(style);
  return (
    <Icon name={name} size={height} color={tintColor} style={iconStyle} />
  );
}
```

--------------------------------

### Locate Parameter Declaration in Mapping

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/design-system/customize-mapping.md

Find where a specific parameter, like `backgroundColor`, is declared within the component's appearance and variant group configurations. This example shows its declaration within the `primary` status variant of the `filled` appearance.

```json
{
  "components": {
    "Button": {
      "appearances": {
        "filled": {
          "mapping": {},
          "variantGroups": {
            "status": {
              "primary": {
                "backgroundColor": "color-primary-default" // <-- Here we are!
              }
            }
          }
        }
      }
    }
  }
}
```

--------------------------------

### Create a Basic Mapping File

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/design-system/customize-mapping.md

Create a `mapping.json` file in your project root to begin customizing UI Kitten components. This provides the minimal structure for component customization.

```json
{
  "components": {
    "Button": {
      "meta": {},
      "appearances": {}
    }
  }
}
```

--------------------------------

### Bootstrap UI Kitten with CLI

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/improving-performance.md

Use the UI Kitten CLI to bootstrap Eva packages, which pre-compiles them. This is useful for CI environments.

```bash
ui-kitten bootstrap @eva-design/eva
```

--------------------------------

### Configure Application Root

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/configure-navigation.md

Sets up the UI Kitten ApplicationProvider and registers the AppNavigator as the root component.

```jsx
import React from 'react';
import * as eva from '@eva-design/eva';
import { ApplicationProvider, IconRegistry } from '@ui-kitten/components';
import { EvaIconsPack } from '@ui-kitten/eva-icons';
import { AppNavigator } from './navigation.component';

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

```

--------------------------------

### Bootstrap UI Kitten with Custom Mapping CLI

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/improving-performance.md

When using custom mapping, specify the path to your custom mapping JSON file with the CLI bootstrap command.

```bash
ui-kitten bootstrap @eva-design/eva ./path-to/mapping.json
```

--------------------------------

### Add Raw JSX Code Example in Typedoc Comment

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/DEV_DOCS.md

You can embed raw JSX code directly within typedoc comments for small, illustrative examples. Ensure the language is specified above the code block.

```jsx
```jsx
const AwesomeComponentShowcase = () => (
  <AwesomeComponent/>
);
```
```

--------------------------------

### Initialize React Native App with Local JS Template

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/DEV_DOCS.md

Verify React Native CLI compatibility with a local JavaScript template by initializing a new project with the specified template path.

```bash
npx react-native init MyApp --template file:///path-to/react-native-ui-kitten/src/template-js
```

--------------------------------

### Create Stack Navigator

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/configure-navigation.md

Defines a stack navigator with Home and Details screens and sets it as the root navigator.

```javascript
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { HomeScreen } from './home.component';
import { DetailsScreen } from './details.component';

const { Navigator, Screen } = createStackNavigator();

const HomeNavigator = () => (
  <Navigator screenOptions={{headerShown: false}}>
    <Screen name='Home' component={HomeScreen}/>
    <Screen name='Details' component={DetailsScreen}/>
  </Navigator>
);

export const AppNavigator = () => (
  <NavigationContainer>
    <HomeNavigator/>
  </NavigationContainer>
);

```

--------------------------------

### Revert Commit Message

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/CONTRIBUTING.md

If a commit reverts a previous one, start with 'revert: ' and reference the SHA of the reverted commit in the body.

```gitcommit
revert: feat(date-fns): description of awesome feature

These reverts commit <hash>.
```

--------------------------------

### Register Theme Provider in App.js

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/runtime-theming.md

Wraps the application with ThemeContext.Provider to make theme state and toggle function available. Uses useState to manage the current theme and ApplicationProvider to apply Eva themes.

```javascript
import React from 'react';
import * as eva from '@eva-design/eva';
import { ApplicationProvider, IconRegistry } from '@ui-kitten/components';
import { EvaIconsPack } from '@ui-kitten/eva-icons';
import { AppNavigator } from './navigation.component';
import { ThemeContext } from './theme-context';

export default () => {

  const [theme, setTheme] = React.useState('light');

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

  return (
    <>
      <IconRegistry icons={EvaIconsPack}/>
      <ThemeContext.Provider value={{ theme, toggleTheme }}>
        <ApplicationProvider {...eva} theme={eva[theme]}>
          <AppNavigator/>
        </ApplicationProvider>
      </ThemeContext.Provider>
    </>
  );
};
```

--------------------------------

### Modify Button Background Color

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/design-system/customize-mapping.md

Update the `backgroundColor` parameter in your `mapping.json` to customize the default color of the Button component. This example changes it to 'pink'.

```json
{
  "components": {
    "Button": {
      "meta": {},
      "appearances": {
        "filled": {
          "mapping": {},
          "variantGroups": {
            "status": {
              "primary": {
                "backgroundColor": "pink"
              }
            }
          } 
        }
      }
    }
  }
}
```

--------------------------------

### Initialize React Native App with Local TS Template

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/DEV_DOCS.md

Verify React Native CLI compatibility with a local TypeScript template by initializing a new project with the specified template path.

```bash
npx react-native init MyApp --template file:///path-to/react-native-ui-kitten/src/template-ts
```

--------------------------------

### Use Icons from Multiple Packages

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/icon-packages.md

Demonstrates how to use an icon from a specific package, 'material', by setting the `pack` property on the `Icon` component. This allows for easy switching between icon libraries.

```jsx
import React from 'react';
import { Button, Icon } from '@ui-kitten/components';

export const HomeIcon = (props) => (
  <Icon {...props} name='home' pack='material' />
);

export const HomeButton = () => (
  <Button accessoryLeft={HomeIcon}>Home</Button>
);
```

--------------------------------

### Configure React Native Project Assets

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/branding.md

Set up `react-native.config.js` to include your assets directory for font linking.

```javascript
module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./assets'],
};

```

--------------------------------

### Create Home Screen Component

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/configure-navigation.md

Defines the Home screen with a TopNavigation and a button to navigate to the Details screen. The `navigation` prop is used to trigger navigation events.

```jsx
import React from 'react';
import { SafeAreaView } from 'react-native';
import { Button, Divider, Layout, TopNavigation } from '@ui-kitten/components';

export const HomeScreen = ({ navigation }) => {

  const navigateDetails = () => {
    navigation.navigate('Details');
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <TopNavigation title='MyApp' alignment='center'/>
      <Divider/>
      <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Button onPress={navigateDetails}>OPEN DETAILS</Button>
      </Layout>
    </SafeAreaView>
  );
};

```

--------------------------------

### Configure Metro Bundler for Expo

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/improving-performance.md

Configure metro.config.js for Expo projects using `getDefaultConfig` and UI Kitten's `MetroConfig.create` to pre-compile Eva packages.

```javascript
const { getDefaultConfig } = require("expo/metro-config");

const MetroConfig = require('@ui-kitten/metro-config');

const evaConfig = {
  evaPackage: '@eva-design/eva',
  // Optional, but may be useful when using mapping customization feature.
  // customMappingPath: './custom-mapping.json',
};

module.exports = (async () => {
  const defaultConfig = await getDefaultConfig(__dirname);
  // Other possible customizations...
  const uiKittenMixedConfig = MetroConfig.create(evaConfig, defaultConfig);
  // Other possible customizations...
  return uiKittenMixedConfig;
})();
```

--------------------------------

### Override Default Text Color

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/branding.md

Configure extra text variables in `theme.json` to override default text colors. This example makes the default text darker by referencing another theme variable.

```json
{
  "text-basic-color": "$color-basic-400"
}
```

--------------------------------

### Integrate Custom Mapping and Theme in App.js

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/branding.md

Import and apply your custom theme and mapping in the `App.js` file to enable custom fonts and styles.

```javascript
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
import { default as mapping } from './mapping.json'; // <-- Import app mapping

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

```

--------------------------------

### Create Details Screen Component

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/configure-navigation.md

Defines the Details screen with a TopNavigation that includes a back action. The `navigation.goBack()` function is used to navigate to the previous screen.

```jsx
import React from 'react';
import { SafeAreaView } from 'react-native';
import { Divider, Icon, Layout, Text, TopNavigation, TopNavigationAction } from '@ui-kitten/components';

const BackIcon = (props) => (
  <Icon {...props} name='arrow-back' />
);

export const DetailsScreen = ({ navigation }) => {

  const navigateBack = () => {
    navigation.goBack();
  };

  const BackAction = () => (
    <TopNavigationAction icon={BackIcon} onPress={navigateBack}/>
  );

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <TopNavigation title='MyApp' alignment='center' accessoryLeft={BackAction}/>
      <Divider/>
      <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text category='h1'>DETAILS</Text>
      </Layout>
    </SafeAreaView>
  );
};

```

--------------------------------

### Add Tabbed Component Block to Documentation Page

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/DEV_DOCS.md

The 'tabbed component' block type renders component descriptions across multiple tabs: Overview, Theme, API, and Examples. This is typically used for components with detailed documentation.

```typescript
{
  type: 'block',
  block: 'tabbed component',
  source: 'MyComponent',
}
```

--------------------------------

### Create Theme Context

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/runtime-theming.md

Defines the ThemeContext for providing theme information and a toggle function throughout the component tree. Initialize with 'light' theme by default.

```javascript
import React from 'react';

export const ThemeContext = React.createContext({
  theme: 'light',
  toggleTheme: () => {},
});
```

--------------------------------

### Basic Backgrounds and Borders (Dark Theme)

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/design-system/theme.md

Configures the background and border colors for the basic theme in a dark mode, utilizing the darker shades of the basic color palette.

```json
{
  "background-basic-color-1": "$color-basic-800", 
  "background-basic-color-2": "$color-basic-900", 
  "background-basic-color-3": "$color-basic-1000",
  "background-basic-color-4": "$color-basic-1100",
  
  "border-basic-color-1": "$color-basic-800",
  "border-basic-color-2": "$color-basic-900",
  "border-basic-color-3": "$color-basic-1000",
  "border-basic-color-4": "$color-basic-1100",
  "border-basic-color-5": "$color-basic-1100"
}
```

--------------------------------

### Configure Expo Web for UI Kitten

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/getting-started.md

For Expo Web, add a specific Babel configuration to your `app.json` file under the `web` key.

```json
"build": { "babel": { "include": [ "@ui-kitten/components" ] } }
```

--------------------------------

### Basic Backgrounds and Borders (Light Theme)

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/design-system/theme.md

Defines the background and border colors for the basic theme in a light mode. These are commonly used for UI elements like cards and inputs.

```json
{
  "background-basic-color-1": "$color-basic-100",
  "background-basic-color-2": "$color-basic-200",
  "background-basic-color-3": "$color-basic-300",
  "background-basic-color-4": "$color-basic-400",
  
  "border-basic-color-1": "$color-basic-100",
  "border-basic-color-2": "$color-basic-200",
  "border-basic-color-3": "$color-basic-300",
  "border-basic-color-4": "$color-basic-400",
  "border-basic-color-5": "$color-basic-500"
}
```

--------------------------------

### Configure Metro Bundler for Bare React Native

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/improving-performance.md

Create or update metro.config.js to include UI Kitten's Eva configuration for bare React Native projects. This pre-compiles Eva packages.

```javascript
const MetroConfig = require('@ui-kitten/metro-config');

const evaConfig = {
  evaPackage: '@eva-design/eva',
  // Optional, but may be useful when using mapping customization feature.
  // customMappingPath: './custom-mapping.json',
};

module.exports = (() => {
  // previousConfig - can be empty object or the react native default one (created by 'react native init') 
  // or previously merged config object if you already have other customizations
  const previousConfig = {};
  // Other possible customizations...
  const uiKittenMixedConfig = MetroConfig.create(evaConfig, previousConfig);
  // Other possible customizations...
  return uiKittenMixedConfig;
})();
```

--------------------------------

### Configure Babel for Decorators

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/design-system/custom-mapping.md

Configure your `babel.config.js` file to include the `@babel/plugin-proposal-decorators` plugin with the `legacy: true` option.

```javascript
module.exports = {
  // Whatever was previously specified

  plugins: [
    ["@babel/plugin-proposal-decorators", { "legacy": true }]
  ]
};
```

--------------------------------

### ListItem: Using Accessory Properties for Icons

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/migration/4.x-5.0.0-migration.md

Icons within ListItems are now rendered using `accessoryLeft` or `accessoryRight` properties, replacing the older `icon` and `accessory` properties.

```javascript
import { ListItem, Icon } from '@ui-kitten/components';

const StarIcon = (evaProps) => (
  <Icon {...evaProps} name='star' />
);

<ListItem accessoryRight={StarIcon} />
```

--------------------------------

### Create Material Icons Provider

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/icon-packages.md

Defines a provider for Material Icons, enabling their use within UI Kitten. This involves creating a proxy to map icon names to React elements.

```jsx
import React from 'react';
import { StyleSheet } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

export const MaterialIconsPack = {
  name: 'material',
  icons: createIconsMap(),
};

function createIconsMap() {
  return new Proxy({}, {
    get(target, name) {
      return IconProvider(name);
    },
  });
}

const IconProvider = (name) => ({
  toReactElement: (props) => MaterialIcon({ name, ...props }),
});

function MaterialIcon({ name, style }) {
  const { height, tintColor, ...iconStyle } = StyleSheet.flatten(style);
  return (
    <Icon name={name} size={height} color={tintColor} style={iconStyle} />
  );
}
```

--------------------------------

### Implement Runtime Theme Toggling

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/runtime-theming.md

Integrate theme toggling into your component by importing ThemeContext and using useContext to access the toggleTheme function. This allows users to switch between light and dark themes via a button press.

```javascript
import React from 'react';
import { SafeAreaView } from 'react-native';
import { Button, Layout } from '@ui-kitten/components';
import { ThemeContext } from './theme-context';

export const HomeScreen = ({ navigation }) => {

  const themeContext = React.useContext(ThemeContext);

  const navigateDetails = () => {
    navigation.navigate('Details');
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Button style={{ marginVertical: 4 }} onPress={navigateDetails}>OPEN DETAILS</Button>
        <Button style={{ marginVertical: 4 }} onPress={themeContext.toggleTheme}>TOGGLE THEME</Button>
      </Layout>
    </SafeAreaView>
  );
};



```

--------------------------------

### Merge Custom Mapping with ApplicationProvider

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/design-system/customize-mapping.md

Import your custom mapping JSON and pass it to the `customMapping` prop of the `ApplicationProvider` component to apply your design system.

```javascript
import React from 'react';
import * as eva from '@eva-design/eva';
import { ApplicationProvider } from '@ui-kitten/components';
import { default as mapping } from './path-to/mapping.json'; // <-- import mapping

export default () => (
  <ApplicationProvider 
    {...eva}
    customMapping={mapping} // <-- apply mapping
    theme={eva.light}>
  </ApplicationProvider>
);
```

--------------------------------

### Update TopNavigation Actions with accessoryLeft/Right

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/migration/4.x-5.0.0-migration.md

Actions within TopNavigation are now rendered using `accessoryLeft` and `accessoryRight` properties, replacing the older `leftControl` and `rightControls`.

```javascript
import { TopNavigation, TopNavigationAction, Icon } from '@ui-kitten/components';

const BackIcon = (evaProps) => (
  <Icon {...evaProps} name='arrow-ios-back' />
);

const SettingsIcon = (evaProps) => (
  <Icon {...evaProps} name='settings' />
);

const BackAction = () => (
  <TopNavigationAction icon={BackIcon} />
);

const SettingsAction = () => (
  <TopNavigationAction icon={SettingsIcon} />
);

<TopNavigation 
  accessoryLeft={BackAction}
  accessoryRight={SettingsAction}
/>
```

--------------------------------

### Register Component in Navigation

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/DEV_DOCS.md

Add your new component's screen to the components navigator by importing its screen and adding a Stack.Screen entry.

```typescript
import { AwesomeComponentScreen } from '../scenes/components/awesome-component.component';
...
<Stack.Screen name='AwesomeComponent' component={AwesomeComponentScreen} />
```

--------------------------------

### Apply Custom Theme in React Native

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/branding.md

Import your custom theme JSON and merge it with Eva's dark or light theme. This allows UI Kitten components to adopt your brand's primary color and other custom styles.

```javascript
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>
);
```

--------------------------------

### CMakeLists.txt Configuration

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/src/template-js/template/android/app/src/main/jni/CMakeLists.txt

Sets the minimum required CMake version and defines the project name. It also includes utility scripts for building the React Native application with the New Architecture.

```cmake
cmake_minimum_required(VERSION 3.13)

# Define the library name here.
project(helloworld_appmodules)

# This file includes all the necessary to let you build your application with the New Architecture.
include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake)
```

--------------------------------

### Register Eva Icons Pack in App.js

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/icon-packages.md

Register the EvaIconsPack in your `App.js` file to make the icons available throughout your application. This should be done before rendering your main components.

```jsx
import React from 'react';
import * as eva from '@eva-design/eva';
import { ApplicationProvider, IconRegistry, Layout, Text } from '@ui-kitten/components';
import { EvaIconsPack } from '@ui-kitten/eva-icons';

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

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

--------------------------------

### Create Asset Icon Provider

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/icon-packages.md

Defines a provider for asset-based icons, allowing them to be used with UI Kitten's Icon component. Requires React and React Native's Image component.

```jsx
import React from 'react';
import { Image } from 'react-native';

const IconProvider = (source) => ({
  toReactElement: ({ animation, ...props }) => (
    <Image {...props} source={source}/>
  ),
});

export const AssetIconsPack = {
  name: 'assets',
  icons: {
    'github': IconProvider(require('../assets/images/github.png')),
    'color-palette': IconProvider(require('../assets/images/color-palette.png')),
    // ...
  },
};
```

--------------------------------

### Push Branch to GitHub

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/CONTRIBUTING.md

Push your local branch to your forked GitHub repository to make it available for a pull request.

```shell
git push my-fork my-fix-branch
```

--------------------------------

### Declare Custom Component with `withStyles`

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/design-system/use-theme-variables.md

Use the `withStyles` HOC to create components with styles that can access theme variables. This allows for dynamic styling based on the current theme.

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

const AwesomeView = (props) => {
  const { eva, style, ...restProps } = props;

  return (
    <View {...restProps} style={[eva.style.awesome, style]} />
  );
};

export const ThemedAwesomeView = withStyles(AwesomeView, (theme) => ({
  awesome: {
    backgroundColor: theme['color-primary-500'],
  },
}));
```

--------------------------------

### Create a Custom Component

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/design-system/custom-mapping.md

Define a custom React Native component, such as `CircleButton`, and decorate it with `@styled('CircleButton')` to register it with UI Kitten.

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

@styled('CircleButton')
export class CircleButton extends React.Component {
  render() {
    const { eva, style, ...restProps } = this.props;
    
    return (
      <TouchableOpacity style={[eva.style, style]} {...restProps} />
    );
  }
}
```

--------------------------------

### Define Custom Component Mapping

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/design-system/custom-mapping.md

Create a JSON object that defines the mapping for your custom component, including its meta information, appearances, and variants. This structure is used by UI Kitten to style the component.

```json
{
  "components": {
    "CircleButton": {
      "meta": {
        "parameters": {},
        "variantGroups": {},
        "states": {},
        "appearances": {
          "filled": {
            "default": true
          }
        }
      },
      "appearances": {
        "filled": {
          "mapping": {}
        } 
      }
    }
  }
}
```

--------------------------------

### Card: Customizing Header and Footer Content

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/migration/4.x-5.0.0-migration.md

The `CardHeader` component is removed. Use the `header` and `footer` properties to provide custom content for the card's header and footer, applying Eva styles to the container.

```javascript
import { Card, Layout, Text } from '@ui-kitten/components';

const Header = (evaProps) => (
  <Layout {...evaProps}>
    <Text category='h6'>Title</Text>
    <Text category='s1'>Description</Text>
  </Layout>
);

const Footer = (evaProps) => (
  <Layout {...evaProps}>
    <Text category='c2'>Footer</Text>
  </Layout>
);


<Card header={Header} footer={Footer}/>
```

--------------------------------

### Configure ApplicationProvider for Eva

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/improving-performance.md

Modify the ApplicationProvider props to utilize compiled Eva mappings. Spreading `eva` enables this feature.

```jsx
import React from 'react';
import * as eva from '@eva-design/eva';
import { ApplicationProvider } from '@ui-kitten/components';

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

--------------------------------

### Select Icon Rendering with Accessory Properties

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/migration/4.x-5.0.0-migration.md

Icons in the Select component are now rendered using accessoryLeft or accessoryRight properties, replacing the older icon property.

```javascript
import { Select, Icon } from '@ui-kitten/components';

const StarIcon = (evaProps) => (
  <Icon {...evaProps} name='star' />
);

<Select accessoryRight={StarIcon} />
```

--------------------------------

### Integrate Custom Mapping with ApplicationProvider

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/design-system/custom-mapping.md

Pass your custom mapping to the `ApplicationProvider` component using the `customMapping` prop. Ensure you import the mapping JSON and your custom component.

```javascript
import React from 'react';
import * as eva from '@eva-design/eva';
import { ApplicationProvider, Layout } from '@ui-kitten/components';
import { default as mapping } from './path-to/mapping.json'; // <-- Import mapping
import { CircleButton } from './path-to/CircleButton'; // <-- Import component

export default () => (
  <ApplicationProvider
    {...eva}
    customMapping={mapping}
    theme={eva.light}>
    <Layout style={{ padding: 64, alignItems: 'center' }}>
      <CircleButton />
    </Layout>
  </ApplicationProvider>
);
```

--------------------------------

### Create a New Git Branch

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/CONTRIBUTING.md

Before making changes, create a new git branch from the master branch to isolate your work.

```shell
git checkout -b fix/my-fix-branch master
```

--------------------------------

### Add Component Block to Documentation Page

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/DEV_DOCS.md

To display information about a component parsed by typedoc, use the 'component' block type. The `source` property should be set to the name of the component.

```typescript
{
  type: 'block',
  block: 'component',
  source: 'MyNewComponentName',
}
```

--------------------------------

### Basic Button Usage

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/landing/index.html

Import and use the Button component from react-native-ui-kitten in your React Native project. This demonstrates a simple integration of a UI component.

```javascript
import React from 'react';
import { Button } from 'react-native-ui-kitten';

export const AwesomeButton = () => (
  <Button>BUTTON</Button>
);
```

--------------------------------

### Register Multiple Icon Packages

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/guides/icon-packages.md

Registers multiple icon packages, including Feather and Material Icons, with the `IconRegistry`. This allows the application to use icons from different libraries.

```jsx
import React from 'react';
import * as eva from '@eva-design/eva';
import { ApplicationProvider, IconRegistry, Layout, Text } from '@ui-kitten/components';
import { FeatherIconsPack } from './feather-icons'; // <-- Import Feather icons
import { MaterialIconsPack } from './material-icons'; // <-- Import Material icons

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

export default () => (
  <>
    <IconRegistry icons={[FeatherIconsPack, MaterialIconsPack]}/>
    <ApplicationProvider {...eva} theme={eva.light}>
      <HomeScreen />
    </ApplicationProvider>
  </>
);
```

--------------------------------

### ListItem: Customizing Title and Description Styles

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/migration/4.x-5.0.0-migration.md

The `titleStyle` and `descriptionStyle` properties are no longer supported. To apply custom styles, pass a function component to the `title` or `description` property that accepts Eva props and applies additional styles.

```javascript
import { ListItem, Text } from '@ui-kitten/components';

<ListItem 
  title={evaProps => <Text {...evaProps} style={[evaProps.style, myStyle]}>Title</Text>}
  description={evaProps => <Text {...evaProps} style={[evaProps.style, myStyle]}>Description</Text>}
/>
```

--------------------------------

### Commit Changes

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/CONTRIBUTING.md

Commit your changes using the '-a' option, which automatically stages modified files. Ensure commit messages follow conventions for automatic release note generation.

```shell
git commit -a
```

--------------------------------

### Eva Design System Theme Structure

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/design-system/theme.md

This JSON object illustrates the structure of an Eva Design System theme, including color definitions and variable references. Use this as a base for defining your application's visual theme.

```json
{
  // ...
  "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"
  // ...
}
```

--------------------------------

### Checkout Master Branch

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/CONTRIBUTING.md

Switch to the local master branch after your changes have been merged.

```shell
git checkout master -f
```

--------------------------------

### Rebase and Force Push Updates

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/CONTRIBUTING.md

If changes are suggested after submitting a pull request, rebase your branch onto the latest master and force push to update the existing pull request.

```shell
git rebase master -i
git push -f
```

--------------------------------

### Update Drawer Item and Group Components

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/migration/4.x-5.0.0-migration.md

Drawer now exports `DrawerItem` and `DrawerGroup` components, allowing any data type for items and controlling content via child elements. The `DrawerHeaderFooter` component is removed; use `header` and `footer` properties with Eva styles for container styling.

```javascript
import { Drawer, DrawerItem, DrawerGroup } from '@ui-kitten/components';

<Drawer>
  <DrawerItem title='Option 1'/>
  <DrawerGroup title='Group'>
    <DrawerItem title='Option 1.1'/>
    <DrawerItem title='Option 1.2'/>
  </DrawerGroup>
</Drawer>
```

```javascript
import { Drawer, Layout, Text } from '@ui-kitten/components';

const Header = (evaProps) => (
  <Layout {...evaProps} level='2'/>
);

const Footer = (evaProps) => (
  <Layout {...evaProps}>
    <Text category='c2'>Footer</Text>
  </Layout>
);


<Drawer header={Header} footer={Footer}/>
```

--------------------------------

### Declare Custom Component with `useTheme` and `useStyleSheet` Hooks

Source: https://github.com/akveo/react-native-ui-kitten/blob/master/docs/src/articles/design-system/use-theme-variables.md

Utilize the `useTheme` and `useStyleSheet` hooks for accessing theme variables and creating styles within functional components. `useStyleSheet` supports theme variables defined in `StyleService.create`.

```javascript
import React from 'react';
import { View } from 'react-native';
import { useTheme, useStyleSheet, StyleService } from '@ui-kitten/components';

export const ThemedAwesomeView = () => {
  const theme = useTheme();
  const styles = useStyleSheet(themedStyles);

  return (
    <View {...restProps} style={[styles.view, { color: theme['color-primary-100'] }]} />
  );
};

const themedStyles = StyleService.create({
  view: {
    backgroundColor: 'color-primary-500',
  }
});
```