Merge branch 'master' into feat/top-navigation-action-popover

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

@@ -171,7 +171,30 @@ The example above demonstrates how you can create a really simple configuration.
 }
 ```
 
-What we did is that we added a rounded [variant](design-system/design-system-glossary#variant) which will make our `CircleButton` not such circle. And this is how it looks:
+What we did is that we added a rounded [variant](design-system/design-system-glossary#variant) which will make our `CircleButton` not such circle. Let's now pass it to a component:
+
+```js
+import * as React from 'react';
+import { ApplicationProvider, Layout } from 'react-native-ui-kitten';
+import { mapping, light as lightTheme } from '@eva-design/eva';
+import { default as customMapping } from './path-to/custom-mapping.json';
+import CircleButton from './path-to/CircleButton';
+
+const App = () => (
+  <ApplicationProvider 
+    mapping={mapping}
+    customMapping={customMapping}
+    theme={lightTheme}>
+    <Layout style={{padding: 64, alignItems: 'center'}}>
+      <CircleButton shape='rounded'/> // <-- Apply `rounded` shape variant
+    </Layout>
+  </ApplicationProvider>
+);
+
+export default App;
+```
+
+And this is how it looks:
 
 ![image](assets/images/articles/design-system/custom-mapping-variant.png)
 
@@ -237,9 +260,10 @@ class CircleButton extends React.Component {
 
     return (
       <TouchableOpacity 
+        {...restProps}
         style={[themedStyle, style]}
         onPressIn={this.onPressIn}
-        {...restProps}
+        onPressOut={this.onPressOut}
       />
     );
   }

docs/src/articles/guides/create-screen.md

@@ -12,7 +12,7 @@ We suppose that you have a separate component per screen, let's open your `some-
 
 <hr>
 
-### Create a Component
+## Create a Component
 
 ```js
 import * as React from 'react';
@@ -30,7 +30,7 @@ The example above will render a simple screen with a welcome text and a button.
 
 <hr>
 
-### Modify styles
+## Modify styles
 
 Now let's add some styles to fit the full available space on the device screen.
 
@@ -60,7 +60,7 @@ const styles = StyleSheet.create({
 
 <hr>
 
-### Review the changes
+## Review the changes
 
 Let's now set this screen as `ApplicationProvider` children to quickly review changes
 

docs/src/articles/guides/install.md

@@ -4,7 +4,7 @@ If you don't have any code yet, please consider checking <a href="https://facebo
 
 <hr>
 
-### Installation
+## Installation
 
 We recommend to develop React Native with expo-cli, you can install it with the following command.
 
@@ -14,7 +14,7 @@ npm i -g expo-cli
 
 <hr>
 
-### Create a New Project
+## Create a New Project
 
 A new project can be created using Expo CLI tools.
 
@@ -23,15 +23,15 @@ expo init PROJECT-NAME
 ```
 <hr>
 
-### Install UI Kitten and Eva Design System
+## Install UI Kitten and Eva Design System
 
 ```bash
 npm i react-native-ui-kitten @eva-design/eva
 ```
 
 <hr>
 
-### Configure Application Root
+## Configure Application Root
 
 At this step you have everything in place, let's configure UI Kitten to be used in your app.
 

docs/src/articles/guides/using-web.md

@@ -0,0 +1,34 @@
+# Using with React Native Web
+
+Starting from version 4.1, UI Kitten has built-in support for use in web sites using <a href='https://github.com/necolas/react-native-web' target='_blank'>React Native Web</a>. 
+
+<div class="note note-info">
+  <div class="note-title">IMPORTANT</div>
+  <div class="note-body">
+  This has not yet been widely used in production and we consider thus feature to be experimental. However, you can follow instructions below to configure your app running in browser.
+  </div>
+</div>
+
+<hr>
+
+## Starting from a scratch
+
+In case you're going to start your project from a scratch, follow the <a href='https://akveo.github.io/react-native-ui-kitten/docs/guides/install-ui-kitten' target='_blank'>Installation Guide</a>. This will create an Expo application with all needed configuration done. After that, simply follow **Usage Guides**.
+
+<hr>
+
+## Existing Expo Applications
+
+Read the great documentation from Expo team to <a href='https://docs.expo.io/versions/latest/introduction/running-in-the-browser/#adding-web-support-to-expo-projects' target='_blank'>add web support in existing Expo projects</a>.
+
+<hr>
+
+## Regular React Native Applications
+
+In case you don't use Expo, and have already initialized React Native Application using `react-native init`, please follow <a href='https://github.com/necolas/react-native-web/blob/master/docs/guides/multi-platform-apps.md#web-packaging-for-existing-react-native-apps' target='_blank'>official React Native Web Guide</a>.
+
+<hr>
+
+## Usage
+
+If you already have all in place, UI Kitten does not force you creating any additional web-specific configuration. Just use it as is. The next step to create a multi-platform app would be [Creating a Sample Screen Guide](guides/create-ui-kitten-screen) and launching it on both mobile device and browser.

docs/src/structure.ts

@@ -42,6 +42,17 @@ export const structure = [
           },
         ],
       },
+      {
+        type: 'page',
+        name: 'Using with React Native Web',
+        children: [
+          {
+            type: 'block',
+            block: 'markdown',
+            source: 'guides/using-web.md',
+          },
+        ],
+      },
       {
         type: 'page',
         name: 'Create UI Kitten Screen',

src/framework/theme/style/type.ts

@@ -1,4 +1,6 @@
-export type StyleType = any;
+export interface StyleType {
+  [key: string]: any;
+}
 
 export enum Interaction {
   ACTIVE = 'active',

src/framework/ui/avatar/avatar.component.tsx

@@ -10,7 +10,6 @@ import {
   ImageProps,
   ImageStyle,
   StyleSheet,
-  TouchableOpacityProps,
 } from 'react-native';
 import {
   styled,
@@ -63,11 +62,11 @@ export class AvatarComponent extends React.Component<AvatarProps> {
   private getComponentStyle = (source: StyleType): StyleType => {
     const { roundCoefficient, ...containerParameters } = source;
 
-    const baseStyle: ImageStyle = {
-      ...containerParameters,
-      ...styles.container,
-      ...StyleSheet.flatten(this.props.style),
-    };
+    // @ts-ignore: avoid checking `containerParameters`
+    const baseStyle: ImageStyle = StyleSheet.flatten([
+      containerParameters,
+      this.props.style,
+    ]);
 
     // @ts-ignore: rhs operator is restricted to be number
     const borderRadius: number = roundCoefficient * baseStyle.height;
@@ -78,21 +77,17 @@ export class AvatarComponent extends React.Component<AvatarProps> {
     };
   };
 
-  public render(): React.ReactElement<TouchableOpacityProps> {
-    const { themedStyle, ...derivedProps } = this.props;
-    const componentStyle: StyleType = this.getComponentStyle(themedStyle);
+  public render(): React.ReactElement<ImageProps> {
+    const { themedStyle, ...restProps } = this.props;
+    const componentStyle: ImageStyle = this.getComponentStyle(themedStyle);
 
     return (
       <Image
-        {...derivedProps}
+        {...restProps}
         style={componentStyle}
       />
     );
   }
 }
 
-const styles = StyleSheet.create({
-  container: {},
-});
-
 export const Avatar = styled<AvatarProps>(AvatarComponent);

src/framework/ui/bottomNavigation/bottomNavigation.component.tsx

@@ -165,30 +165,26 @@ export class BottomNavigationComponent extends React.Component<BottomNavigationP
   };
 
   private getComponentStyle = (source: StyleType): StyleType => {
-    const { style, indicatorStyle } = this.props;
     const { indicatorHeight, indicatorBackgroundColor, ...containerParameters } = source;
 
     return {
-      container: {
-        ...containerParameters,
-        ...styles.container,
-        ...StyleSheet.flatten(style),
-      },
+      container: containerParameters,
+      item: {},
       indicator: {
         height: indicatorHeight,
         backgroundColor: indicatorBackgroundColor,
-        ...styles.indicator,
-        ...StyleSheet.flatten(indicatorStyle),
       },
     };
   };
 
-  private renderIndicatorElement = (positions: number, style: StyleType): IndicatorElement => {
+  private renderIndicatorElement = (positions: number, style: ViewStyle): IndicatorElement => {
+    const { indicatorStyle, selectedIndex } = this.props;
+
     return (
       <TabIndicator
         key={0}
-        style={style}
-        selectedPosition={this.props.selectedIndex}
+        style={[style, styles.indicator, indicatorStyle]}
+        selectedPosition={selectedIndex}
         positions={positions}
       />
     );
@@ -207,27 +203,27 @@ export class BottomNavigationComponent extends React.Component<BottomNavigationP
     return React.Children.map(source, this.renderTabElement);
   };
 
-  private renderComponentChildren = (source: ChildrenProp, style: StyleType): React.ReactNodeArray => {
-    const tabElements: TabElement[] = this.renderTabElements(source);
+  private renderComponentChildren = (style: StyleType): React.ReactNodeArray => {
+    const tabElements: TabElement[] = this.renderTabElements(this.props.children);
 
     const hasIndicator: boolean = style.indicator.height > 0;
 
     return [
-      hasIndicator ? this.renderIndicatorElement(tabElements.length, style.indicator) : null,
+      hasIndicator && this.renderIndicatorElement(tabElements.length, style.indicator),
       ...tabElements,
     ];
   };
 
   public render(): React.ReactNode {
-    const { style, themedStyle, children, ...derivedProps } = this.props;
+    const { themedStyle, style, ...derivedProps } = this.props;
     const { container, ...componentStyles } = this.getComponentStyle(themedStyle);
 
-    const [indicatorElement, ...tabElements] = this.renderComponentChildren(children, componentStyles);
+    const [indicatorElement, ...tabElements] = this.renderComponentChildren(componentStyles);
 
     return (
       <View
         {...derivedProps}
-        style={container}>
+        style={[container, styles.container, style]}>
         {indicatorElement}
         {tabElements}
       </View>