feat(ui): react-native-web adopt

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>

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

@@ -6,12 +6,13 @@
 
 import React from 'react';
 import {
-  TouchableOpacity,
-  StyleSheet,
   ImageProps,
-  TouchableOpacityProps,
+  ImageStyle,
   StyleProp,
+  StyleSheet,
   TextStyle,
+  TouchableOpacity,
+  TouchableOpacityProps,
 } from 'react-native';
 import {
   styled,
@@ -26,7 +27,7 @@ import { isValidString } from '../support/services';
 
 type TitleElement = React.ReactElement<TextProps>;
 type IconElement = React.ReactElement<ImageProps>;
-type IconProp = (style: StyleType) => IconElement;
+type IconProp = (style: ImageStyle) => IconElement;
 
 interface ComponentProps {
   title?: string;
@@ -72,8 +73,6 @@ export class BottomNavigationTabComponent extends React.Component<BottomNavigati
   };
 
   private getComponentStyle = (source: StyleType): StyleType => {
-    const { style, titleStyle } = this.props;
-
     const {
       iconWidth,
       iconHeight,
@@ -84,50 +83,43 @@ export class BottomNavigationTabComponent extends React.Component<BottomNavigati
       textLineHeight,
       textFontWeight,
       textColor,
-      ...containerStyle
+      ...containerParameters
     } = source;
 
     return {
-      container: {
-        ...containerStyle,
-        ...styles.container,
-        ...StyleSheet.flatten(style),
-      },
-      icon: {
-        width: iconWidth,
-        height: iconHeight,
-        marginVertical: iconMarginVertical,
-        tintColor: iconTintColor,
-        ...styles.icon,
-      },
+      container: containerParameters,
       text: {
         marginVertical: textMarginVertical,
         fontSize: textFontSize,
         lineHeight: textLineHeight,
         fontWeight: textFontWeight,
         color: textColor,
-        ...styles.text,
-        ...StyleSheet.flatten(titleStyle),
+      },
+      icon: {
+        width: iconWidth,
+        height: iconHeight,
+        marginVertical: iconMarginVertical,
+        tintColor: iconTintColor,
       },
     };
   };
 
-  private renderIconElement = (style: StyleType): IconElement => {
+  private renderIconElement = (style: ImageStyle): IconElement => {
     const iconElement: IconElement = this.props.icon(style);
 
     return React.cloneElement(iconElement, {
       key: 1,
-      style: [style, iconElement.props.style],
+      style: [style, styles.icon, iconElement.props.style],
     });
   };
 
-  private renderTitleElement = (style: StyleType): TitleElement => {
-    const { title } = this.props;
+  private renderTitleElement = (style: TextStyle): TitleElement => {
+    const { title, titleStyle } = this.props;
 
     return (
       <Text
         key={2}
-        style={style}>
+        style={[style, styles.text, titleStyle]}>
         {title}
       </Text>
     );
@@ -143,15 +135,15 @@ export class BottomNavigationTabComponent extends React.Component<BottomNavigati
   };
 
   public render(): React.ReactNode {
-    const { style, themedStyle, ...derivedProps } = this.props;
+    const { style, themedStyle, ...restProps } = this.props;
     const { container, ...componentStyles } = this.getComponentStyle(themedStyle);
 
     const [iconElement, titleElement] = this.renderComponentChildren(componentStyles);
 
     return (
       <TouchableOpacity
-        {...derivedProps}
-        style={container}
+        {...restProps}
+        style={[container, styles.container, style]}
         activeOpacity={1.0}
         onPress={this.onPress}>
         {iconElement}
@@ -166,8 +158,8 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  icon: {},
   text: {},
+  icon: {},
 });
 
 export const BottomNavigationTab = styled<BottomNavigationTabProps>(BottomNavigationTabComponent);