chore: v5 issue fixes

.github/ISSUE_TEMPLATE/---bug-report.md

@@ -24,7 +24,7 @@ Steps to reproduce the behavior:
 ## Link to runnable example or repository (highly encouraged)
 
 <!--
-Please provide either a [codesandbox demo](https://codesandbox.io/s/ui-kitten-welcome-x8q8z) or a minimal repository on GitHub.
+Please provide either a [snack demo](https://snack.expo.io/@ui-kitten/playground) or a minimal repository on GitHub.
 This will help us to resolve it faster.
 -->
 

.gitignore

@@ -17,11 +17,9 @@ docs/src/examples.json
 docs/src/assets/playground-build/
 docs/src/assets/examples-build/
 
-# env
-src/doc-showcase/env/index.js
-
-#config
-config/
+# showcases
+src/showcases/env/index.js
+src/showcases/web-build/
 
 .expo
 dist

babel.config.js

@@ -2,5 +2,8 @@ module.exports = {
   presets: [
     'module:metro-react-native-babel-preset',
   ],
+  plugins: [
+    ["@babel/plugin-proposal-decorators", { "legacy": true }]
+  ]
 };
 

docs/src/app/@theme/services/structure.service.ts

@@ -8,11 +8,7 @@ import { Inject, Injectable } from '@angular/core';
 
 import { NgdTabbedService } from './tabbed.service';
 import { NgdTextService } from './text.service';
-import {
-  DOCS,
-  STRUCTURE,
-  EXAMPLES_STRUCTURE,
-} from '../../app.options';
+import { DOCS, EXAMPLES_STRUCTURE, STRUCTURE } from '../../app.options';
 
 @Injectable()
 export class NgdStructureService {
@@ -95,8 +91,9 @@ export class NgdStructureService {
 
   protected getComponents(item: any, preparedDocs: any) {
     return item.source
-      .map(source => preparedDocs.classes.find((data) => data.name === source))
-      .map(component => this.prepareComponent(component, item));
+               .map(source => preparedDocs.classes.find((data) => data.name === source))
+               .filter(Boolean)
+               .map(component => this.prepareComponent(component, item));
   }
 
   protected prepareComponent(component: any, structureItem?: any) {
@@ -108,7 +105,7 @@ export class NgdStructureService {
     let images: string[] = [];
     if (structureItem && structureItem.overview) {
       const imagesObj: any = structureItem.overview
-        .find((item: any) => item.name === component.name);
+                                          .find((item: any) => item.name === component.name);
       images = imagesObj ? imagesObj.images : [];
     }
 
@@ -152,11 +149,13 @@ export class NgdStructureService {
       name: example.description.split(/(?=[A-Z])/).join(' '),
       description: example.description,
       shortDescription: example.shortDescription,
-      files: [{
-        path: helper.path,
-        code: helper.code,
-        extension: helper.path.slice(helper.path.length - 3),
-      }],
+      files: [
+        {
+          path: helper.path,
+          code: helper.code,
+          extension: helper.path.slice(helper.path.length - 3),
+        },
+      ],
       code: helper.code,
       url: `/assets/playground-build/#/${helper.name}`,
     };

docs/src/articles/design-system/custom-mapping.md

@@ -6,6 +6,29 @@ Before we start, let's pretend we want to create a `CircleButton` component.
 
 <hr>
 
+## Requirements
+
+For better developer experience, `@babel/plugin-proposal-decorators` module should be installed and configured.
+```bash
+npm i -D @babel/plugin-proposal-decorators
+
+// Using Yarn?
+yarn add -D @babel/plugin-proposal-decorators
+```
+
+Then, make sure to configure Babel with installed plugin. In babel.config.js:
+```js
+module.exports = {
+  // Whatever was previously specified
+
+  plugins: [
+    ["@babel/plugin-proposal-decorators", { "legacy": true }]
+  ]
+};
+```
+
+<hr>
+
 ## Prepare the boilerplate
 
 In this step, we'll create a component and it's initial mapping.
@@ -16,22 +39,19 @@ import React from 'react';
 import { TouchableOpacity } from 'react-native';
 import { styled } from '@ui-kitten/components';
 
-class CircleButton extends React.Component {
-  static styledComponentName = 'CircleButton'; // <-- This is important!
-
+@styled('CircleButton')
+export class CircleButton extends React.Component {
   render() {
-    const { themedStyle, style, ...restProps } = this.props;
+    const { eva, style, ...restProps } = this.props;
 
     return (
-      <TouchableOpacity style={[themedStyle, style]} {...restProps} />
+      <TouchableOpacity style={[eva.style, style]} {...restProps} />
     );
   }
 }
-
-export default styled(CircleButton);
 ```
 
-Create a custom mapping:
+Create a mapping:
 
 ```json
 {
@@ -63,26 +83,34 @@ And pass it to an `ApplicationProvider` component:
 import React from 'react';
 import * as eva from '@eva-design/eva';
 import { ApplicationProvider, Layout } from '@ui-kitten/components';
-import { default as customMapping } from './path-to/custom-mapping.json'; // <-- Import custom mapping
-import CircleButton from './path-to/CircleButton'; // <-- Import custom component
+import { default as mapping } from './path-to/mapping.json'; // <-- Import mapping
+import { CircleButton } from './path-to/CircleButton'; // <-- Import component
 
 export default () => (
   <ApplicationProvider
     {...eva}
-    customMapping={customMapping}
+    customMapping={mapping}
     theme={eva.light}>
-    <Layout style={{padding: 64, alignItems: 'center'}}>
+    <Layout style={{ padding: 64, alignItems: 'center' }}>
       <CircleButton />
     </Layout>
   </ApplicationProvider>
 );
 ```
 
+<div class="note note-info">
+  <div class="note-body">
+   Custom Mapping is applied automatically in case of using `@ui-kitten/metro-config` package,
+   meaning there is no need to modify ApplicationProvider.
+   To check this, see if it used in metro.config.js. [Relative guide](guides/improving-performance).
+  </div>
+</div>
+
 <hr>
 
 ## Start with an idea
 
-The main idea of `CircleButton` component is that is going to be a circle. This means we need to provide some dimension styles and a `borderRadius` to make it round. Go back to `custom-mapping.json` and paste the following:
+The main idea of `CircleButton` component is that is going to be a circle. This means we need to provide some dimension styles and a `borderRadius` to make it round. Go back to `mapping.json` and paste the following:
 
 ```json
 {
@@ -154,12 +182,12 @@ The example above demonstrates how you can create a really simple configuration.
         "filled": {
           "mapping": {
             // ...
-          }
-        },
-        "variantGroups": {
-          "shape": {
-            "rounded": { // <-- Describes a `rounded` variant parameters
-              "borderRadius": 16
+          },
+          "variantGroups": {
+            "shape": {
+              "rounded": { // <-- Describes a `rounded` variant parameters
+                "borderRadius": 16
+              }
             }
           }
         }
@@ -175,13 +203,13 @@ What we did is that we added a rounded [variant](design-system/design-system-glo
 import React from 'react';
 import * as eva from '@eva-design/eva';
 import { ApplicationProvider, Layout } from '@ui-kitten/components';
-import { default as customMapping } from './path-to/custom-mapping.json';
-import CircleButton from './path-to/CircleButton';
+import { default as mapping } from './path-to/mapping.json';
+import { CircleButton } from './path-to/CircleButton';
 
 export default () => (
   <ApplicationProvider
     {...eva}
-    customMapping={customMapping}
+    customMapping={mapping}
     theme={eva.light}>
     <Layout style={{padding: 64, alignItems: 'center'}}>
       <CircleButton shape='rounded'/> // <-- Apply `rounded` shape variant
@@ -221,10 +249,10 @@ The other great example of the flexibility of using mappings is that you can pro
                 "backgroundColor": "color-primary-active"
               }
             }
+          },
+          "variantGroups": {
+            // ...
           }
-        },
-        "variantGroups": {
-          // ...
         }
       }
     }
@@ -239,26 +267,27 @@ import React from 'react';
 import { TouchableOpacity } from 'react-native';
 import { styled, Interaction } from '@ui-kitten/components';
 
-class CircleButton extends React.Component {
-  static styledComponentName = 'CircleButton';
+@styled('CircleButton')
+export class CircleButton extends React.Component {
 
   onPressIn = () => {
     // Dispatch an `active` state to High Order Component
-    this.props.dispatch([Interaction.ACTIVE]);
+    this.props.eva.dispatch([Interaction.ACTIVE]);
   };
 
   onPressOut = () => {
     // Go back to the default state
-    this.props.dispatch([]);
+    this.props.eva.dispatch([]);
   };
 
   render() {
-    const { themedStyle, style, ...restProps } = this.props;
+    const { eva, style, ...restProps } = this.props;
 
     return (
       <TouchableOpacity 
         {...restProps}
-        style={[themedStyle, style]}
+        activeOpacity={1.0}
+        style={[eva.style, style]}
         onPressIn={this.onPressIn}
         onPressOut={this.onPressOut}
       />

docs/src/articles/design-system/customize-mapping.md

@@ -20,9 +20,9 @@ While changing a single parameter is a simple process, changing semantic propert
 
 <hr>
 
-## Create a custom mapping
+## Create a mapping
 
-Let's create a file to define a custom mapping. In your project root, create a `custom-mapping.json`;
+Let's create a file to define a mapping. In your project root, create a `mapping.json`;
 
 ```json
 {
@@ -97,12 +97,12 @@ In case of default appearance has no `backgroundColor`, let's find a default var
     "Button": {
       "appearances": {
         "filled": {
-          // ...
-        },
-        "variantGroups": {
-          "status": {
-            "primary": {
-              "backgroundColor": "color-primary-default" // <-- Here we are!
+          "mapping": {},
+          "variantGroups": {
+            "status": {
+              "primary": {
+                "backgroundColor": "color-primary-default" // <-- Here we are!
+              }
             }
           }
         }
@@ -112,7 +112,7 @@ In case of default appearance has no `backgroundColor`, let's find a default var
 }
 ```
 
-Now let's go back to our `custom-mapping.json` and modify `backgroundColor` to be `pink`
+Now let's go back to our `mapping.json` and modify `backgroundColor` to be `pink`
 
 ```json
 {
@@ -140,24 +140,31 @@ Now let's go back to our `custom-mapping.json` and modify `backgroundColor` to b
 
 ## Merge mappings
 
-The only thing we have to do is to pass our custom mapping to an `ApplicationProvider` component.
+The only thing we have to do is to pass our mapping to an `ApplicationProvider` component.
 
 ```js
 import React from 'react';
 import * as eva from '@eva-design/eva';
 import { ApplicationProvider } from '@ui-kitten/components';
-import { default as customMapping } from './path-to/custom-mapping.json'; // <-- import custom mapping
+import { default as mapping } from './path-to/mapping.json'; // <-- import mapping
 
 export default () => (
   <ApplicationProvider 
     {...eva}
-    customMapping={customMapping} // <-- apply custom mapping
+    customMapping={mapping} // <-- apply mapping
     theme={eva.light}>
   </ApplicationProvider>
 );
-
 ```
 
+<div class="note note-info">
+  <div class="note-body">
+   Custom Mapping is applied automatically in case of using `@ui-kitten/metro-config` package,
+   meaning there is no need to modify ApplicationProvider.
+   To check this, see if it used in metro.config.js. [Relative guide](guides/improving-performance).
+  </div>
+</div>
+
 Here we are. Now the default `backgroundColor` of a Button should be `pink`. Here is a result
 
 ![image](assets/images/articles/design-system/customize-mapping.png)

docs/src/articles/design-system/use-theme-variables.md

@@ -14,10 +14,10 @@ import { View } from 'react-native';
 import { withStyles } from '@ui-kitten/components';
 
 const AwesomeView = (props) => {
-  const { themedStyle, style, ...restProps } = props;
+  const { eva, style, ...restProps } = props;
 
   return (
-    <View {...restProps} style={[themedStyle.awesome, style]} />
+    <View {...restProps} style={[eva.style.awesome, style]} />
   );
 };
 

docs/src/articles/guides/icon-packages.md

@@ -135,6 +135,7 @@ function FeatherIcon({ name, style }) {
   return (
     <Icon name={name} size={height} color={tintColor} style={iconStyle} />
   );
+}
 ```
 
 With the code above we create a Proxy object, that will direct requested icon to render `FeatherIcon` by requested name.
@@ -291,8 +292,8 @@ import React from 'react';
 import { Image } from 'react-native';
 
 const IconProvider = (source) => ({
-  toReactElement: ({ animation, ...style }) => (
-    <Image style={style} source={source}/>
+  toReactElement: ({ animation, ...props }) => (
+    <Image {...props} source={source}/>
   ),
 });