diff --git a/README.md b/README.md
index e50834a06..fde9be205 100644
--- a/README.md
+++ b/README.md
@@ -31,32 +31,14 @@ There is a huge variety of customizable layouts, use “as is” or add new bloc
## Quick Start
-Install UI Kitten and Eva Design System packages via npm:
+Start a new app with UI Kitten template from a scratch:
```bash
-npm i react-native-ui-kitten @eva-design/eva
+react-native init --template ui-kitten
```
-Modify your application root:
-
-```jsx
-import React from 'react';
-import { mapping, light as lightTheme } from '@eva-design/eva';
-import { ApplicationProvider, Layout } from 'react-native-ui-kitten';
-
-const App = () => (
-
-
-
-);
-
-export default App;
-```
-
-The code above will configure your application component to apply Eva Design System styling magic.
-Read the [Design System guide][link:doc-theme-system] for more details.
+This will setup a new React Native application configured with UI Kitten.
+Refer to the [Documentation][link:doc-where-start] for more options to start.
## How can I support the developers?
- Star our GitHub repo :star:
@@ -83,7 +65,7 @@ We're always happy to receive your feedback!
[link:travis]: https://travis-ci.com/akveo/react-native-ui-kitten
[link:coveralls]: https://coveralls.io/github/akveo/react-native-ui-kitten?branch=master
[link:doc-homepage]: https://akveo.github.io/react-native-ui-kitten
-[link:doc-theme-system]: https://akveo.github.io/react-native-ui-kitten/docs/design-system/eva-design-system-intro
+[link:doc-where-start]: https://akveo.github.io/react-native-ui-kitten/docs/getting-started/where-to-start
[link:kitten-tricks]: https://github.com/akveo/kittenTricks
[link:eva-icons]: https://github.com/akveo/eva-icons
[link:akveo-homepage]: https://akveo.com
diff --git a/babel.config.js b/babel.config.js
index 43e3d5c14..5b7595b50 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,15 +1,20 @@
const path = require('path');
-const kittenPath = path.resolve('./src/framework');
-
-// FIXME: Resolve `transform[stderr]: Could not resolve` command-line warnings.
-// FIXME: Reproducible when starting with clearing cache (npm start -- -c)
+/**
+ * UI Kitten modules aliases.
+ * Allows importing framework modules into playground
+ */
+const moduleAliases = {
+ 'react-native-ui-kitten': path.resolve(__dirname, './src/framework'),
+ '@kitten/theme': path.resolve(__dirname, './src/framework'),
+ '@kitten/ui': path.resolve(__dirname, './src/framework'),
+ '@ui-kitten/eva-icons': path.resolve(__dirname, './src/eva-icons'),
+};
const moduleResolverConfig = {
root: path.resolve('./'),
alias: {
- '@kitten/theme': path.resolve(kittenPath, 'theme'),
- '@kitten/ui': path.resolve(kittenPath, 'ui'),
+ ...moduleAliases,
},
};
diff --git a/config/dev.env.js b/config/dev.env.js
index 40f7baeea..767db0d2b 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -4,7 +4,6 @@ const evaPath = path.resolve(__dirname, '../../eva');
module.exports = {
ENV: 'dev',
- KITTEN_PATH: path.resolve(__dirname, '../src/framework'),
MAPPING_PATH: path.resolve(evaPath, 'packages/eva'),
PROCESSOR_PATH: path.resolve(evaPath, 'packages/processor')
};
diff --git a/config/prod.env.js b/config/prod.env.js
index de606f46f..8ace1a4b3 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -4,7 +4,6 @@ const playgroundPath = path.resolve(__dirname, '../src/playground');
module.exports = {
ENV: 'prod',
- KITTEN_PATH: path.resolve(__dirname, '../src/framework'),
MAPPING_PATH: path.resolve(playgroundPath, 'node_modules/@eva-design/eva'),
PROCESSOR_PATH: path.resolve(__dirname, '../node_modules/@eva-design/processor')
};
diff --git a/docs/src/articles/getting-started/where-to-start.md b/docs/src/articles/getting-started/where-to-start.md
index c7d2766fc..47ebe4690 100644
--- a/docs/src/articles/getting-started/where-to-start.md
+++ b/docs/src/articles/getting-started/where-to-start.md
@@ -5,12 +5,15 @@ UI Kitten is a framework of UI components powered by Eva Design System for your
## Quick start tutorials
-**[Install UI Kitten](guides/install-ui-kitten)**
+- **[Start a new App](guides/start-a-new-app)**
-This tutorial explains how to setup React Native app with UI Kitten.
+This tutorial explains how to setup React Native app with UI Kitten from a scratch.
+
+- **[Install into existing App](guides/install-into-existing-app)**
Please consider creating an issue on GitHub if your use case is not described above. But we kindly ask to always look through the documentation and the list of existing issues first.
+
## I'm new to React Native or mobile development
diff --git a/docs/src/articles/guides/install-existing.md b/docs/src/articles/guides/install-existing.md
new file mode 100644
index 000000000..cd44c2af0
--- /dev/null
+++ b/docs/src/articles/guides/install-existing.md
@@ -0,0 +1,37 @@
+# Add into existing project
+
+If you already have an existing code base, you're able to give UI Kitten a try as simple as `npm install`. Please refer to [Start a new App Guide](guides/start-a-new-app) if you don't have any code yet.
+
+
+
+## Install UI Kitten and Eva Design System
+
+```bash
+npm i react-native-ui-kitten @eva-design/eva
+```
+
+
+
+## Configure Application Root
+
+At this step you have everything in place, let's configure UI Kitten to be used in your app.
+In your **App.js**:
+
+```js
+import React from 'react';
+import { mapping, light as lightTheme } from '@eva-design/eva';
+import { ApplicationProvider } from 'react-native-ui-kitten';
+import { RootComponent } from '../path-to/root.component'; // <-- Import your application entry point
+
+const App = () => (
+
+
+
+);
+
+export default App;
+```
+
+That's it. UI Kitten is ready now.
diff --git a/docs/src/articles/guides/install-new.md b/docs/src/articles/guides/install-new.md
new file mode 100644
index 000000000..6bb8613bb
--- /dev/null
+++ b/docs/src/articles/guides/install-new.md
@@ -0,0 +1,30 @@
+# Starting a new App
+
+If you don't have any code yet, please consider checking React Native Getting Started documentation for help creating your app.
+
+
+
+## Installation
+
+First of all, you should have React Native CLI installed.
+
+```bash
+npm i -g react-native-cli
+```
+
+
+
+## Create a New Project
+
+A new project can be created using React Native CLI tools ant UI Kitten template.
+
+```bash
+react-native init --template ui-kitten
+```
+
+Or, if you want to init with TypeScript:
+```bash
+react-native init --template ui-kitten-typescript
+```
+
+That's it. UI Kitten is ready now. For the next steps, simply follow command line instructions.
diff --git a/docs/src/articles/guides/install.md b/docs/src/articles/guides/install.md
deleted file mode 100644
index 678221eb3..000000000
--- a/docs/src/articles/guides/install.md
+++ /dev/null
@@ -1,54 +0,0 @@
-# Install UI Kitten
-
-If you don't have any code yet, please consider checking React Native Getting Started documentation for help creating your app.
-
-
-
-## Installation
-
-We recommend to develop React Native with expo-cli, you can install it with the following command.
-
-```bash
-npm i -g expo-cli
-```
-
-
-
-## Create a New Project
-
-A new project can be created using Expo CLI tools.
-
-```bash
-expo init PROJECT-NAME
-```
-
-
-## Install UI Kitten and Eva Design System
-
-```bash
-npm i react-native-ui-kitten @eva-design/eva
-```
-
-
-
-## Configure Application Root
-
-At this step you have everything in place, let's configure UI Kitten to be used in your app.
-
-```js
-import * as React from 'react';
-import { mapping, light as lightTheme } from '@eva-design/eva';
-import { ApplicationProvider, Layout } from 'react-native-ui-kitten';
-
-const App = () => (
-
-
-
-);
-
-export default App;
-```
-
-That's it. UI Kitten is ready now.
diff --git a/docs/src/articles/guides/setup-icons-module.md b/docs/src/articles/guides/setup-icons-module.md
new file mode 100644
index 000000000..ba9402c4f
--- /dev/null
+++ b/docs/src/articles/guides/setup-icons-module.md
@@ -0,0 +1,67 @@
+# Setup Icons Module
+
+Starting from UI Kitten 4.2, we introduce an icons module built on top of Eva Icons. Eva Icons is a pack of beautifully crafted Open Source icons for common actions and items.
+
+
+
IMPORTANT
+
+ This tutorial assumes you have everything in place and [ApplicationProvider is configured](guides/install-ui-kitten).
+
+
+
+
+
+## Installation
+
+First, ensure that `react-native-svg` library is installed: **install react-native-svg**.
+
+Add `@ui-kitten/eva-icons` to project dependencies.
+
+```bash
+npm i @ui-kitten/eva-icons
+```
+
+
+
+## Configure Icon Registry
+
+```js
+import * as React from 'react';
+import { mapping, light as lightTheme } from '@eva-design/eva';
+import { EvaIconsPack } from '@ui-kitten/eva-icons';
+import { ApplicationProvider, Layout, IconRegistry } from 'react-native-ui-kitten';
+
+const App = () => (
+
+
+
+
+);
+
+export default App;
+```
+
+
+
+## Use it with UI Kitten components
+
+```js
+import * as React from 'react';
+import { Button, Icon } from 'react-native-ui-kitten';
+
+export const FacebookIcon = (style) => (
+
+);
+
+export const LoginButton = () => (
+
+);
+```
+
+That's it. UI Kitten with Eva Icons is ready now.
+
+As a result, you should have a Button looking similar to this:
+
+
diff --git a/docs/src/articles/guides/setup-vector-icons.md b/docs/src/articles/guides/setup-vector-icons.md
new file mode 100644
index 000000000..35f7128e0
--- /dev/null
+++ b/docs/src/articles/guides/setup-vector-icons.md
@@ -0,0 +1,223 @@
+# 3rd party icon libraries
+
+Starting from UI Kitten 4.2, we introduce an Icon component that can work with 3rd party icon packages. In this guide, we'll show how to integrate vector icons package with UI Kitten. Vector icons is a set of font-based icons library that renders a text as an icon symbol.
+In case you prefer working with svg - check out Eva Icons Integration Guide.
+
+
+
IMPORTANT
+
+ This tutorial assumes you have everything in place and [ApplicationProvider is configured](guides/install-ui-kitten).
+
+
+
+
+
+## Installation
+
+First, ensure that `react-native-vector-icons` library is installed: **install react-native-vector-icons**.
+
+
+
+
+### Configure Icon Adapter
+
+After vector-icons is installed and you have everything in place, we need to create a mapping object, that can draw an icon by its name.
+Let's create a separate file `feather-icons.js` and place there the following code.
+
+```js
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather'; // <-- Import Feather icons
+
+export const FeatherIconsPack = {
+ name: 'feather',
+ icons: createIconsMap(),
+};
+
+function createIconsMap() {
+ return {
+ 'facebook': IconProvider('facebook'),
+ 'google': IconProvider('google'),
+ // ...
+ };
+
+ // or
+
+ return new Proxy({}, {
+ get(target, name) {
+ return IconProvider(name);
+ },
+ });
+}
+```
+
+And providing function
+
+```js
+function IconProvider(name) {
+ return {
+ toReactElement: (props) => FeatherIcon({ name, ...props }),
+ };
+}
+
+function FeatherIcon({ name, style }) {
+ const { height, tintColor, ...iconStyle } = StyleSheet.flatten(style);
+ return (
+
+ );
+}
+
+```
+
+
+
+## Configure Icon Registry
+
+After everything is configured, we simply need to import a feather icon map and register it with UI Kitten APIs.
+
+```js
+import * as React from 'react';
+import { mapping, light as lightTheme } from '@eva-design/eva';
+import { ApplicationProvider, Layout, IconRegistry } from 'react-native-ui-kitten';
+import { FeatherIconsPack } from './path-to/feather-icons.js'; // <-- Feather icons map
+
+const App = () => (
+
+
+
+
+);
+
+export default App;
+```
+
+
+
+## Use it with UI Kitten components
+
+```js
+import * as React from 'react';
+import { Button, Icon } from 'react-native-ui-kitten';
+
+export const FacebookIcon = (style) => (
+
+);
+
+export const LoginButton = () => (
+
+);
+```
+
+That's it. UI Kitten with Vector Icons is ready now.
+
+As a result, you should have a Button looking similar to this:
+
+
+
+
+
+## More Icon Libraries
+
+As you might notice, UI Kitten API allows you to register **multiple** icon packages with the following instruction.
+
+```js
+
+```
+
+Let's also create a Material Icons provider using the same method.
+
+```js
+// material-icons.js
+
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons'; // <-- Import Material icons
+
+export const MaterialIconsPack = {
+ name: 'material',
+ icons: createIconsMap(),
+};
+
+function createIconsMap() {
+ return new Proxy({}, {
+ get(target, name) {
+ return IconProvider(name);
+ },
+ });
+}
+
+function IconProvider(name) {
+ return {
+ toReactElement: (props) => MaterialIcon({ name, ...props }),
+ };
+}
+
+function MaterialIcon({ name, style }) {
+ const { height, tintColor, ...iconStyle } = StyleSheet.flatten(style);
+ return (
+
+ );
+}
+```
+
+Now all we need to do is to extend our `IconRegistry`:
+
+```js
+import * as React from 'react';
+import { mapping, light as lightTheme } from '@eva-design/eva';
+import { ApplicationProvider, Layout, IconRegistry } from 'react-native-ui-kitten';
+import { FeatherIconsPack } from './path-to/feather-icons.js'; // <-- Feather icons map
+import { MaterialIconsPack } from './path-to/material-icons.js'; // <-- Material icons map
+
+const App = () => (
+
+
+
+
+);
+
+export default App;
+```
+
+
+
+## Choose a pack
+
+Now you're able to choose an icon library with simply changing `pack` property.
+
+```js
+import * as React from 'react';
+import { Button, Icon } from 'react-native-ui-kitten';
+
+export const HomeIcon = (style) => (
+
+);
+
+export const HomeButton = () => (
+
+);
+```
+
+That's it. Here is a result that you might have
+
+**Material Icons**
+
+
+
+**Feather Icons**
+
+
diff --git a/docs/src/assets/images/articles/guides/3rd-party-icons-feather.png b/docs/src/assets/images/articles/guides/3rd-party-icons-feather.png
new file mode 100644
index 000000000..493990394
Binary files /dev/null and b/docs/src/assets/images/articles/guides/3rd-party-icons-feather.png differ
diff --git a/docs/src/assets/images/articles/guides/3rd-party-icons-material.png b/docs/src/assets/images/articles/guides/3rd-party-icons-material.png
new file mode 100644
index 000000000..28b15e03c
Binary files /dev/null and b/docs/src/assets/images/articles/guides/3rd-party-icons-material.png differ
diff --git a/docs/src/assets/images/articles/guides/3rd-party-icons-sample.png b/docs/src/assets/images/articles/guides/3rd-party-icons-sample.png
new file mode 100644
index 000000000..a3a79ab59
Binary files /dev/null and b/docs/src/assets/images/articles/guides/3rd-party-icons-sample.png differ
diff --git a/docs/src/assets/images/articles/guides/sample-icon-button.png b/docs/src/assets/images/articles/guides/sample-icon-button.png
new file mode 100644
index 000000000..1604a6ca1
Binary files /dev/null and b/docs/src/assets/images/articles/guides/sample-icon-button.png differ
diff --git a/docs/src/assets/images/components/icon.svg b/docs/src/assets/images/components/icon.svg
index 67fceac3f..054d8601c 100644
--- a/docs/src/assets/images/components/icon.svg
+++ b/docs/src/assets/images/components/icon.svg
@@ -1,196 +1,22 @@
-
-
-
+
+
\ No newline at end of file
diff --git a/docs/src/assets/images/components/spinner.svg b/docs/src/assets/images/components/spinner.svg
index 8b80395e3..7fa1fa91e 100644
--- a/docs/src/assets/images/components/spinner.svg
+++ b/docs/src/assets/images/components/spinner.svg
@@ -1,37 +1,26 @@
-