From 1ea28bd0e1cc60f1d656e57005bb5fd1f3647e6d Mon Sep 17 00:00:00 2001
From: Artur Yorsh <10753921+artyorsh@users.noreply.github.com>
Date: Tue, 26 Feb 2019 15:41:38 +0300
Subject: [PATCH] feat(ui): button component. Closes #260 (#268)

* fix(playground): bundler and compiler issues

* feat(ui): button component

* test(ui): add button component tests

* feat(ui): button - add ability to pass alignment as object
---
 src/framework/ui/button/button.component.tsx  | 145 +++++
 src/framework/ui/button/button.spec.config.ts | 508 ++++++++++++++++++
 src/framework/ui/button/button.spec.tsx       | 104 ++++
 src/framework/ui/button/button.spec.tsx.snap  | 290 ++++++++++
 src/framework/ui/button/type.ts               |  50 ++
 src/framework/ui/index.ts                     |  13 +
 src/playground/metro.config.js                |   5 +-
 .../src/ui/screen/button.component.tsx        | 208 +++++++
 .../src/ui/screen/dialog.component.tsx        |   7 +-
 src/playground/src/ui/screen/index.ts         |   1 +
 10 files changed, 1326 insertions(+), 5 deletions(-)
 create mode 100644 src/framework/ui/button/button.component.tsx
 create mode 100644 src/framework/ui/button/button.spec.config.ts
 create mode 100644 src/framework/ui/button/button.spec.tsx
 create mode 100644 src/framework/ui/button/button.spec.tsx.snap
 create mode 100644 src/framework/ui/button/type.ts
 create mode 100644 src/playground/src/ui/screen/button.component.tsx

diff --git a/src/framework/ui/button/button.component.tsx b/src/framework/ui/button/button.component.tsx
new file mode 100644
index 000000000..83278d14a
--- /dev/null
+++ b/src/framework/ui/button/button.component.tsx
@@ -0,0 +1,145 @@
+import React from 'react';
+import {
+  TouchableOpacity,
+  TouchableOpacityProps,
+  GestureResponderEvent,
+  StyleSheet,
+  ImageSourcePropType,
+  Image,
+  ImageProps,
+} from 'react-native';
+import {
+  StyledComponentProps,
+  StyleType,
+  Interaction,
+  styled,
+} from '@kitten/theme';
+import {
+  Text as TextComponent,
+  Props as TextProps,
+} from '../text/text.component';
+import {
+  ButtonAlignment,
+  ButtonAlignments,
+} from './type';
+
+interface ButtonProps {
+  icon?: ImageSourcePropType;
+  status?: string;
+  size?: string;
+  alignment?: string | ButtonAlignment;
+  children?: React.ReactText;
+}
+
+const Text = styled<TextComponent, TextProps>(TextComponent);
+
+export type Props = ButtonProps & StyledComponentProps & TouchableOpacityProps;
+
+const ALIGNMENT_DEFAULT: ButtonAlignment = ButtonAlignments.LEFT;
+
+export class Button extends React.Component<Props> {
+
+  static defaultProps: Partial<Props> = {
+    status: 'primary',
+    size: 'medium',
+  };
+
+  private onPress = (event: GestureResponderEvent) => {
+    if (this.props.onPress) {
+      this.props.onPress(event);
+    }
+  };
+
+  private onPressIn = (event: GestureResponderEvent) => {
+    this.props.dispatch([Interaction.ACTIVE]);
+
+    if (this.props.onPressIn) {
+      this.props.onPressIn(event);
+    }
+  };
+
+  private onPressOut = (event: GestureResponderEvent) => {
+    this.props.dispatch([]);
+
+    if (this.props.onPressOut) {
+      this.props.onPressOut(event);
+    }
+  };
+
+  private getComponentStyle = (style: StyleType): StyleType => {
+    const { text, icon, ...container } = style;
+    const alignment: ButtonAlignment = ButtonAlignments.parse(this.props.alignment, ALIGNMENT_DEFAULT);
+
+    return {
+      container: {
+        ...container,
+        flexDirection: alignment.flex(),
+      },
+      text: text,
+      icon: icon,
+    };
+  };
+
+  private createTextElement = (style: StyleType): React.ReactElement<TextProps> => {
+    const { children: text } = this.props;
+
+    return (
+      <Text
+        style={[style, strictStyles.text]}
+        key={1}>
+        {text}
+      </Text>
+    );
+  };
+
+  private createImageElement = (style: StyleType): React.ReactElement<ImageProps> => {
+    const { icon: image } = this.props;
+
+    return (
+      <Image
+        key={0}
+        style={[style, strictStyles.icon]}
+        source={image}
+      />
+    );
+  };
+
+  private createComponentChildren = (style: StyleType): React.ReactNode => {
+    const { icon, children } = this.props;
+
+    const hasIcon: boolean = icon !== undefined;
+    const hasText: boolean = children !== undefined;
+
+    return [
+      hasIcon ? this.createImageElement(style.icon) : undefined,
+      hasText ? this.createTextElement(style.text) : undefined,
+    ];
+  };
+
+  public render(): React.ReactElement<TouchableOpacityProps> {
+    const { style, themedStyle, ...derivedProps } = this.props;
+    const { container, ...componentStyles } = this.getComponentStyle(themedStyle);
+    const componentChildren: React.ReactNode = this.createComponentChildren(componentStyles);
+
+    return (
+      <TouchableOpacity
+        {...derivedProps}
+        style={[style, container, strictStyles.container]}
+        activeOpacity={1.0}
+        onPress={this.onPress}
+        onPressIn={this.onPressIn}
+        onPressOut={this.onPressOut}>
+        {componentChildren}
+      </TouchableOpacity>
+    );
+  }
+}
+
+const strictStyles = StyleSheet.create({
+  container: {
+    justifyContent: 'space-evenly',
+    alignItems: 'center',
+  },
+  text: {},
+  icon: {},
+});
diff --git a/src/framework/ui/button/button.spec.config.ts b/src/framework/ui/button/button.spec.config.ts
new file mode 100644
index 000000000..5da57ab1d
--- /dev/null
+++ b/src/framework/ui/button/button.spec.config.ts
@@ -0,0 +1,508 @@
+import { ThemeMappingType } from 'eva/packages/common';
+import { ThemeType } from '@kitten/theme';
+
+export const mapping: ThemeMappingType = {
+  'Button': {
+    'meta': {
+      'variants': {
+        'size': [
+          'tiny',
+          'small',
+          'medium',
+          'large',
+          'giant',
+        ],
+        'status': [
+          'primary',
+          'success',
+          'info',
+          'warning',
+          'danger',
+        ],
+      },
+      'states': [
+        'disabled',
+        'active',
+      ],
+    },
+    'appearance': {
+      'default': {
+        'mapping': {
+          'minHeight': 24,
+          'minWidth': 24,
+          'padding': 4,
+          'borderRadius': 6,
+          'text': {
+            'color': 'text-primary-inverse',
+            'fontSize': 12,
+            'fontWeight': '800',
+            'marginHorizontal': 4,
+          },
+          'icon': {
+            'tintColor': '#ffffff',
+            'width': 14,
+            'height': 14,
+            'marginHorizontal': 4,
+          },
+        },
+        'variant': {
+          'status': {
+            'primary': {
+              'mapping': {
+                'backgroundColor': '#2196F3',
+                'state': {
+                  'active': {
+                    'backgroundColor': '#1E88E5',
+                  },
+                },
+              },
+            },
+            'success': {
+              'mapping': {
+                'backgroundColor': '#4CAF50',
+                'state': {
+                  'active': {
+                    'backgroundColor': '#43A047',
+                  },
+                },
+              },
+            },
+            'info': {
+              'mapping': {
+                'backgroundColor': '#03A9F4',
+                'state': {
+                  'active': {
+                    'backgroundColor': '#039BE5',
+                  },
+                },
+              },
+            },
+            'warning': {
+              'mapping': {
+                'backgroundColor': '#FFC107',
+                'state': {
+                  'active': {
+                    'backgroundColor': '#FFB300',
+                  },
+                },
+              },
+            },
+            'danger': {
+              'mapping': {
+                'backgroundColor': '#F44336',
+                'state': {
+                  'active': {
+                    'backgroundColor': '#E53935',
+                  },
+                },
+              },
+            },
+          },
+          'size': {
+            'tiny': {
+              'mapping': {
+                'minHeight': 16,
+                'minWidth': 16,
+                'padding': 3,
+                'text': {
+                  'fontSize': 10,
+                  'marginHorizontal': 3,
+                },
+                'icon': {
+                  'width': 11,
+                  'height': 11,
+                  'marginHorizontal': 3,
+                },
+              },
+            },
+            'small': {
+              'mapping': {
+                'minHeight': 20,
+                'minWidth': 20,
+                'padding': 3.5,
+                'text': {
+                  'fontSize': 11,
+                  'marginHorizontal': 3.5,
+                },
+                'icon': {
+                  'width': 12,
+                  'height': 12,
+                  'marginHorizontal': 3.5,
+                },
+              },
+            },
+            'medium': {
+              'mapping': {
+                'minHeight': 24,
+                'minWidth': 24,
+                'padding': 4,
+                'text': {
+                  'fontSize': 12,
+                  'marginHorizontal': 4,
+                },
+                'icon': {
+                  'width': 13,
+                  'height': 13,
+                  'marginHorizontal': 4,
+                },
+              },
+            },
+            'large': {
+              'mapping': {
+                'minHeight': 30,
+                'minWidth': 30,
+                'padding': 4.5,
+                'text': {
+                  'fontSize': 13,
+                  'marginHorizontal': 4.5,
+                },
+              },
+              'icon': {
+                'width': 14,
+                'height': 14,
+                'marginHorizontal': 4.5,
+              },
+            },
+            'giant': {
+              'mapping': {
+                'minHeight': 36,
+                'minWidth': 36,
+                'padding': 5,
+                'text': {
+                  'fontSize': 14,
+                  'marginHorizontal': 5,
+                },
+                'icon': {
+                  'width': 15,
+                  'height': 15,
+                  'marginHorizontal': 5,
+                },
+              },
+            },
+          },
+        },
+      },
+      'outline': {
+        'mapping': {
+          'borderWidth': 2,
+        },
+        'variant': {
+          'status': {
+            'primary': {
+              'mapping': {
+                'backgroundColor': 'transparent',
+                'borderColor': '#2196F3',
+                'text': {
+                  'color': '#2196F3',
+                },
+                'icon': {
+                  'tintColor': '#2196F3',
+                },
+                'state': {
+                  'active': {
+                    'backgroundColor': 'transparent',
+                    'borderColor': '#1E88E5',
+                    'text': {
+                      'color': '#1E88E5',
+                    },
+                    'icon': {
+                      'tintColor': '#1E88E5',
+                    },
+                  },
+                },
+              },
+            },
+            'success': {
+              'mapping': {
+                'backgroundColor': 'transparent',
+                'borderColor': '#4CAF50',
+                'text': {
+                  'color': '#4CAF50',
+                },
+                'icon': {
+                  'tintColor': '#4CAF50',
+                },
+                'state': {
+                  'active': {
+                    'backgroundColor': 'transparent',
+                    'borderColor': '#43A047',
+                    'text': {
+                      'color': '#43A047',
+                    },
+                    'icon': {
+                      'tintColor': '#43A047',
+                    },
+                  },
+                },
+              },
+            },
+            'info': {
+              'mapping': {
+                'backgroundColor': 'transparent',
+                'borderColor': '#03A9F4',
+                'text': {
+                  'color': '#03A9F4',
+                },
+                'icon': {
+                  'tintColor': '#03A9F4',
+                },
+                'state': {
+                  'active': {
+                    'backgroundColor': 'transparent',
+                    'borderColor': '#039BE5',
+                    'text': {
+                      'color': '#039BE5',
+                    },
+                    'icon': {
+                      'tintColor': '#039BE5',
+                    },
+                  },
+                },
+              },
+            },
+            'warning': {
+              'mapping': {
+                'backgroundColor': 'transparent',
+                'borderColor': '#FFC107',
+                'text': {
+                  'color': '#FFC107',
+                },
+                'icon': {
+                  'tintColor': '#FFC107',
+                },
+                'state': {
+                  'active': {
+                    'backgroundColor': 'transparent',
+                    'borderColor': '#FFB300',
+                    'text': {
+                      'color': '#FFB300',
+                    },
+                    'icon': {
+                      'tintColor': '#FFB300',
+                    },
+                  },
+                },
+              },
+            },
+            'danger': {
+              'mapping': {
+                'backgroundColor': 'transparent',
+                'borderColor': '#F44336',
+                'text': {
+                  'color': '#F44336',
+                },
+                'icon': {
+                  'tintColor': '#F44336',
+                },
+                'state': {
+                  'active': {
+                    'backgroundColor': 'transparent',
+                    'borderColor': '#E53935',
+                    'text': {
+                      'color': '#E53935',
+                    },
+                    'icon': {
+                      'tintColor': '#E53935',
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+      'ghost': {
+        'mapping': {},
+        'variant': {
+          'status': {
+            'primary': {
+              'mapping': {
+                'backgroundColor': 'transparent',
+                'text': {
+                  'color': '#2196F3',
+                },
+                'icon': {
+                  'tintColor': '#2196F3',
+                },
+                'state': {
+                  'active': {
+                    'backgroundColor': 'transparent',
+                    'text': {
+                      'color': '#1E88E5',
+                    },
+                    'icon': {
+                      'tintColor': '#1E88E5',
+                    },
+                  },
+                },
+              },
+            },
+            'success': {
+              'mapping': {
+                'backgroundColor': 'transparent',
+                'text': {
+                  'color': '#4CAF50',
+                },
+                'icon': {
+                  'tintColor': '#4CAF50',
+                },
+                'state': {
+                  'active': {
+                    'backgroundColor': 'transparent',
+                    'text': {
+                      'color': '#43A047',
+                    },
+                    'icon': {
+                      'tintColor': '#43A047',
+                    },
+                  },
+                },
+              },
+            },
+            'info': {
+              'mapping': {
+                'backgroundColor': 'transparent',
+                'text': {
+                  'color': '#03A9F4',
+                },
+                'icon': {
+                  'tintColor': '#03A9F4',
+                },
+                'state': {
+                  'active': {
+                    'backgroundColor': 'transparent',
+                    'text': {
+                      'color': '#039BE5',
+                    },
+                    'icon': {
+                      'tintColor': '#039BE5',
+                    },
+                  },
+                },
+              },
+            },
+            'warning': {
+              'mapping': {
+                'backgroundColor': 'transparent',
+                'text': {
+                  'color': '#FFC107',
+                },
+                'icon': {
+                  'tintColor': '#FFC107',
+                },
+                'state': {
+                  'active': {
+                    'backgroundColor': 'transparent',
+                    'text': {
+                      'color': '#FFB300',
+                    },
+                    'icon': {
+                      'tintColor': '#FFB300',
+                    },
+                  },
+                },
+              },
+            },
+            'danger': {
+              'mapping': {
+                'backgroundColor': 'transparent',
+                'text': {
+                  'color': '#F44336',
+                },
+                'icon': {
+                  'tintColor': '#F44336',
+                },
+                'state': {
+                  'active': {
+                    'backgroundColor': 'transparent',
+                    'text': {
+                      'color': '#E53935',
+                    },
+                    'icon': {
+                      'tintColor': '#E53935',
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+  'Text': {
+    'meta': {
+      'variants': {
+        'category': [
+          'h1',
+          'h2',
+          'h3',
+          'h4',
+          'h5',
+          'h6',
+          'body',
+        ],
+      },
+      'states': [],
+    },
+    'appearance': {
+      'default': {
+        'mapping': {
+          'color': 'text-primary',
+          'fontSize': 16,
+        },
+        'variant': {
+          'category': {
+            'h1': {
+              'mapping': {
+                'fontSize': 64,
+              },
+            },
+            'h2': {
+              'mapping': {
+                'fontSize': 40,
+              },
+            },
+            'h3': {
+              'mapping': {
+                'fontSize': 32,
+              },
+            },
+            'h4': {
+              'mapping': {
+                'fontSize': 24,
+              },
+            },
+            'h5': {
+              'mapping': {
+                'fontSize': 16,
+              },
+            },
+            'h6': {
+              'mapping': {
+                'fontSize': 14,
+              },
+            },
+            'body': {
+              'mapping': {
+                'fontSize': 16,
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+export const theme: ThemeType = {
+  'blue-primary': '#3366FF',
+  'blue-dark': '#2541CC',
+  'gray-light': '#DDE1EB',
+  'gray-primary': '#A6AEBD',
+  'gray-dark': '#8992A3',
+  'gray-highlight': '#EDF0F5',
+  'pink-primary': '#FF3D71',
+  'text-primary': '#000000',
+  'text-primary-inverse': '#ffffff',
+};
diff --git a/src/framework/ui/button/button.spec.tsx b/src/framework/ui/button/button.spec.tsx
new file mode 100644
index 000000000..9df414d5a
--- /dev/null
+++ b/src/framework/ui/button/button.spec.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import {
+  ImageSourcePropType,
+  TouchableOpacity,
+} from 'react-native';
+import {
+  render,
+  fireEvent,
+  shallow,
+  RenderAPI,
+} from 'react-native-testing-library';
+import {
+  styled,
+  StyleProvider,
+  StyleProviderProps,
+} from '@kitten/theme';
+import {
+  Button as ButtonComponent,
+  Props as ButtonProps,
+} from './button.component';
+import * as config from './button.spec.config';
+
+const Button = styled<ButtonComponent, ButtonProps>(ButtonComponent);
+
+const Mock = (props?: ButtonProps): React.ReactElement<StyleProviderProps> => (
+  <StyleProvider mapping={config.mapping} theme={config.theme} styles={{}}>
+    <Button {...props} />
+  </StyleProvider>
+);
+
+const renderComponent = (props?: ButtonProps): RenderAPI => {
+  return render(
+    <Mock {...props} />,
+  );
+};
+
+describe('@button: matches snapshot', () => {
+
+  describe('* interaction', () => {
+
+    it('* stateless', () => {
+      const component: RenderAPI = renderComponent();
+      const { output } = shallow(component.getByType(ButtonComponent));
+
+      expect(output).toMatchSnapshot();
+    });
+
+  });
+
+  describe('* appearance', () => {
+
+    const icon: ImageSourcePropType = { uri: 'https://akveo.github.io/eva-icons/fill/png/128/star.png' };
+    const text: React.ReactText = 'BUTTON';
+
+    it('* empty', () => {
+      const component: RenderAPI = renderComponent();
+      const { output } = shallow(component.getByType(ButtonComponent));
+
+      expect(output).toMatchSnapshot();
+    });
+
+    it('* icon', () => {
+      const component: RenderAPI = renderComponent({ icon });
+      const { output } = shallow(component.getByType(ButtonComponent));
+
+      expect(output).toMatchSnapshot();
+    });
+
+    it('* text', () => {
+      const component: RenderAPI = renderComponent({ children: text });
+      const { output } = shallow(component.getByType(ButtonComponent));
+
+      expect(output).toMatchSnapshot();
+    });
+
+    it('* icon and text', () => {
+      const component: RenderAPI = renderComponent({
+        icon,
+        children: text,
+      });
+      const { output } = shallow(component.getByType(ButtonComponent));
+
+      expect(output).toMatchSnapshot();
+    });
+
+  });
+
+});
+
+describe('@button: component checks', () => {
+
+  it('* emits onPress', () => {
+    const onPress = jest.fn();
+
+    const component: RenderAPI = renderComponent({
+      onPress: onPress,
+    });
+
+    fireEvent.press(component.getByType(TouchableOpacity));
+
+    expect(onPress).toBeCalled();
+  });
+
+});
diff --git a/src/framework/ui/button/button.spec.tsx.snap b/src/framework/ui/button/button.spec.tsx.snap
new file mode 100644
index 000000000..03aec8c0e
--- /dev/null
+++ b/src/framework/ui/button/button.spec.tsx.snap
@@ -0,0 +1,290 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`@button: matches snapshot * appearance * empty 1`] = `
+<TouchableOpacity
+  activeOpacity={1}
+  appearance="default"
+  dispatch={[Function]}
+  onPress={[Function]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
+  size="medium"
+  status="primary"
+  style={
+    Array [
+      undefined,
+      Object {
+        "borderRadius": 6,
+        "flexDirection": "row",
+        "minHeight": 24,
+        "minWidth": 24,
+        "padding": 4,
+      },
+      Object {
+        "alignItems": "center",
+        "justifyContent": "space-evenly",
+      },
+    ]
+  }
+  theme={
+    Object {
+      "blue-dark": "#2541CC",
+      "blue-primary": "#3366FF",
+      "gray-dark": "#8992A3",
+      "gray-highlight": "#EDF0F5",
+      "gray-light": "#DDE1EB",
+      "gray-primary": "#A6AEBD",
+      "pink-primary": "#FF3D71",
+      "text-primary": "#000000",
+      "text-primary-inverse": "#ffffff",
+    }
+  }
+/>
+`;
+
+exports[`@button: matches snapshot * appearance * icon 1`] = `
+<TouchableOpacity
+  activeOpacity={1}
+  appearance="default"
+  dispatch={[Function]}
+  icon={
+    Object {
+      "uri": "https://akveo.github.io/eva-icons/fill/png/128/star.png",
+    }
+  }
+  onPress={[Function]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
+  size="medium"
+  status="primary"
+  style={
+    Array [
+      undefined,
+      Object {
+        "borderRadius": 6,
+        "flexDirection": "row",
+        "minHeight": 24,
+        "minWidth": 24,
+        "padding": 4,
+      },
+      Object {
+        "alignItems": "center",
+        "justifyContent": "space-evenly",
+      },
+    ]
+  }
+  theme={
+    Object {
+      "blue-dark": "#2541CC",
+      "blue-primary": "#3366FF",
+      "gray-dark": "#8992A3",
+      "gray-highlight": "#EDF0F5",
+      "gray-light": "#DDE1EB",
+      "gray-primary": "#A6AEBD",
+      "pink-primary": "#FF3D71",
+      "text-primary": "#000000",
+      "text-primary-inverse": "#ffffff",
+    }
+  }
+>
+  <Component
+    source={
+      Object {
+        "uri": "https://akveo.github.io/eva-icons/fill/png/128/star.png",
+      }
+    }
+    style={
+      Array [
+        Object {
+          "height": 14,
+          "marginHorizontal": 4,
+          "tintColor": "#ffffff",
+          "width": 14,
+        },
+        Object {},
+      ]
+    }
+  />
+</TouchableOpacity>
+`;
+
+exports[`@button: matches snapshot * appearance * icon and text 1`] = `
+<TouchableOpacity
+  activeOpacity={1}
+  appearance="default"
+  dispatch={[Function]}
+  icon={
+    Object {
+      "uri": "https://akveo.github.io/eva-icons/fill/png/128/star.png",
+    }
+  }
+  onPress={[Function]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
+  size="medium"
+  status="primary"
+  style={
+    Array [
+      undefined,
+      Object {
+        "borderRadius": 6,
+        "flexDirection": "row",
+        "minHeight": 24,
+        "minWidth": 24,
+        "padding": 4,
+      },
+      Object {
+        "alignItems": "center",
+        "justifyContent": "space-evenly",
+      },
+    ]
+  }
+  theme={
+    Object {
+      "blue-dark": "#2541CC",
+      "blue-primary": "#3366FF",
+      "gray-dark": "#8992A3",
+      "gray-highlight": "#EDF0F5",
+      "gray-light": "#DDE1EB",
+      "gray-primary": "#A6AEBD",
+      "pink-primary": "#FF3D71",
+      "text-primary": "#000000",
+      "text-primary-inverse": "#ffffff",
+    }
+  }
+>
+  <Component
+    source={
+      Object {
+        "uri": "https://akveo.github.io/eva-icons/fill/png/128/star.png",
+      }
+    }
+    style={
+      Array [
+        Object {
+          "height": 14,
+          "marginHorizontal": 4,
+          "tintColor": "#ffffff",
+          "width": 14,
+        },
+        Object {},
+      ]
+    }
+  />
+  <ForwardRef(createComponent)
+    style={
+      Array [
+        Object {
+          "color": "#ffffff",
+          "fontSize": 12,
+          "fontWeight": "800",
+          "marginHorizontal": 4,
+        },
+        Object {},
+      ]
+    }
+  >
+    BUTTON
+  </ForwardRef(createComponent)>
+</TouchableOpacity>
+`;
+
+exports[`@button: matches snapshot * appearance * text 1`] = `
+<TouchableOpacity
+  activeOpacity={1}
+  appearance="default"
+  dispatch={[Function]}
+  onPress={[Function]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
+  size="medium"
+  status="primary"
+  style={
+    Array [
+      undefined,
+      Object {
+        "borderRadius": 6,
+        "flexDirection": "row",
+        "minHeight": 24,
+        "minWidth": 24,
+        "padding": 4,
+      },
+      Object {
+        "alignItems": "center",
+        "justifyContent": "space-evenly",
+      },
+    ]
+  }
+  theme={
+    Object {
+      "blue-dark": "#2541CC",
+      "blue-primary": "#3366FF",
+      "gray-dark": "#8992A3",
+      "gray-highlight": "#EDF0F5",
+      "gray-light": "#DDE1EB",
+      "gray-primary": "#A6AEBD",
+      "pink-primary": "#FF3D71",
+      "text-primary": "#000000",
+      "text-primary-inverse": "#ffffff",
+    }
+  }
+>
+  <ForwardRef(createComponent)
+    style={
+      Array [
+        Object {
+          "color": "#ffffff",
+          "fontSize": 12,
+          "fontWeight": "800",
+          "marginHorizontal": 4,
+        },
+        Object {},
+      ]
+    }
+  >
+    BUTTON
+  </ForwardRef(createComponent)>
+</TouchableOpacity>
+`;
+
+exports[`@button: matches snapshot * interaction * stateless 1`] = `
+<TouchableOpacity
+  activeOpacity={1}
+  appearance="default"
+  dispatch={[Function]}
+  onPress={[Function]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
+  size="medium"
+  status="primary"
+  style={
+    Array [
+      undefined,
+      Object {
+        "borderRadius": 6,
+        "flexDirection": "row",
+        "minHeight": 24,
+        "minWidth": 24,
+        "padding": 4,
+      },
+      Object {
+        "alignItems": "center",
+        "justifyContent": "space-evenly",
+      },
+    ]
+  }
+  theme={
+    Object {
+      "blue-dark": "#2541CC",
+      "blue-primary": "#3366FF",
+      "gray-dark": "#8992A3",
+      "gray-highlight": "#EDF0F5",
+      "gray-light": "#DDE1EB",
+      "gray-primary": "#A6AEBD",
+      "pink-primary": "#FF3D71",
+      "text-primary": "#000000",
+      "text-primary-inverse": "#ffffff",
+    }
+  }
+/>
+`;
diff --git a/src/framework/ui/button/type.ts b/src/framework/ui/button/type.ts
new file mode 100644
index 000000000..5f64fddbb
--- /dev/null
+++ b/src/framework/ui/button/type.ts
@@ -0,0 +1,50 @@
+export interface ButtonAlignment {
+  rawValue: string;
+
+  flex(): FlexAlignment;
+}
+
+export type FlexAlignment = 'row' | 'row-reverse';
+
+export class ButtonAlignments {
+  static LEFT: ButtonAlignment = new class implements ButtonAlignment {
+    rawValue: string = 'left';
+
+    flex(): FlexAlignment {
+      return 'row';
+    }
+  };
+
+  static RIGHT: ButtonAlignment = new class implements ButtonAlignment {
+    rawValue: string = 'right';
+
+    flex(): FlexAlignment {
+      return 'row-reverse';
+    }
+  };
+
+  static parse(value: string | ButtonAlignment, fallback?: ButtonAlignment): ButtonAlignment | undefined {
+    if (ButtonAlignments.typeOf(value)) {
+      return value;
+    }
+
+    return ButtonAlignments.parseString(value, fallback);
+  }
+
+  private static parseString(rawValue: string, fallback?: ButtonAlignment): ButtonAlignment | undefined {
+    switch (rawValue) {
+      case ButtonAlignments.LEFT.rawValue:
+        return ButtonAlignments.LEFT;
+      case ButtonAlignments.RIGHT.rawValue:
+        return ButtonAlignments.RIGHT;
+      default:
+        return fallback;
+    }
+  }
+
+  private static typeOf(value: any): value is ButtonAlignment {
+    const { rawValue } = (<ButtonAlignment>value);
+
+    return rawValue !== undefined;
+  }
+}
diff --git a/src/framework/ui/index.ts b/src/framework/ui/index.ts
index e8de399fe..6cc5a4366 100644
--- a/src/framework/ui/index.ts
+++ b/src/framework/ui/index.ts
@@ -1,4 +1,8 @@
 import { styled } from '@kitten/theme';
+import {
+  Button as ButtonComponent,
+  Props as ButtonProps,
+} from './button/button.component';
 import {
   Text as TextComponent,
   Props as TextProps,
@@ -59,7 +63,12 @@ import {
   Modal as ModalComponent,
   Props as ModalProps,
 } from './modal/modal.component';
+import {
+  ButtonAlignment,
+  ButtonAlignments,
+} from './button/type';
 
+const Button = styled<ButtonComponent, ButtonProps>(ButtonComponent);
 const Text = styled<TextComponent, TextProps>(TextComponent);
 const Radio = styled<RadioComponent, RadioProps>(RadioComponent);
 const RadioGroup = styled<RadioGroupComponent, RadioGroupProps>(RadioGroupComponent);
@@ -76,6 +85,7 @@ const TopNavigationBarAction =
 const Modal = styled<ModalComponent, ModalProps>(ModalComponent);
 
 export {
+  Button,
   Text,
   Layout,
   LayoutProps,
@@ -90,6 +100,7 @@ export {
   TabBar,
   ViewPager,
   TabView,
+  ButtonProps,
   CheckBoxProps,
   TabProps,
   TabBarProps,
@@ -105,4 +116,6 @@ export {
   TopNavigationBarActionProps,
   Modal,
   ModalProps,
+  ButtonAlignment,
+  ButtonAlignments,
 };
diff --git a/src/playground/metro.config.js b/src/playground/metro.config.js
index 4060cac18..d6093a962 100644
--- a/src/playground/metro.config.js
+++ b/src/playground/metro.config.js
@@ -22,9 +22,10 @@ module.exports = {
   watchFolders: [
     path.resolve(__dirname, '../framework'),
     path.resolve(__dirname, '../../node_modules/@babel'),
-    path.resolve(__dirname, '../../node_modules/eva'),
 
-    // FIXME(playground): unable to resolve hoist-non-react-statics
+    // FIXME(playground): unable to resolve
+    path.resolve(__dirname, '../../node_modules/eva'),
+    path.resolve(__dirname, '../../node_modules/lodash'),
     path.resolve(__dirname, '../../node_modules/hoist-non-react-statics'),
     path.resolve(__dirname, '../../node_modules/react-is'),
   ],
diff --git a/src/playground/src/ui/screen/button.component.tsx b/src/playground/src/ui/screen/button.component.tsx
new file mode 100644
index 000000000..ebcdf79a6
--- /dev/null
+++ b/src/playground/src/ui/screen/button.component.tsx
@@ -0,0 +1,208 @@
+import React from 'react';
+import {
+  ImageSourcePropType,
+  Text,
+  View,
+} from 'react-native';
+import { NavigationScreenProps } from 'react-navigation';
+import {
+  withStyles,
+  ThemeType,
+  ThemedComponentProps,
+} from '@kitten/theme';
+import { Button as ButtonComponent } from '@kitten/ui';
+
+type Props = & ThemedComponentProps & NavigationScreenProps;
+
+const APPEARANCE: string = 'default';
+const STATUS: string = 'primary';
+const ALIGNMENT: string = 'left';
+const TEXT: React.ReactText = 'BUTTON';
+const ICON: ImageSourcePropType = { uri: 'https://akveo.github.io/eva-icons/fill/png/128/star.png' };
+
+interface State {
+  isRadio1Checked: boolean;
+  isRadio2Checked: boolean;
+  isRadio3Checked: boolean;
+  isRadio4Checked: boolean;
+}
+
+class Button extends React.Component<Props, State> {
+
+  static navigationOptions = {
+    title: 'Button',
+  };
+
+  public render(): React.ReactNode {
+    return (
+      <View style={this.props.themedStyle.container}>
+        <View style={this.props.themedStyle.containerSection}>
+          <Text style={this.props.themedStyle.textDescription}>Icon</Text>
+          <View style={this.props.themedStyle.containerPreviewRow}>
+            <ButtonComponent
+              appearance={APPEARANCE}
+              style={this.props.themedStyle.component}
+              status={STATUS}
+              size='giant'
+              alignment={ALIGNMENT}
+              icon={ICON}
+            />
+            <ButtonComponent
+              appearance={APPEARANCE}
+              style={this.props.themedStyle.component}
+              status={STATUS}
+              size='large'
+              alignment={ALIGNMENT}
+              icon={ICON}
+            />
+            <ButtonComponent
+              appearance={APPEARANCE}
+              style={this.props.themedStyle.component}
+              status={STATUS}
+              size='medium'
+              alignment={ALIGNMENT}
+              icon={ICON}
+            />
+            <ButtonComponent
+              appearance={APPEARANCE}
+              style={this.props.themedStyle.component}
+              status={STATUS}
+              size='small'
+              alignment={ALIGNMENT}
+              icon={ICON}
+            />
+            <ButtonComponent
+              appearance={APPEARANCE}
+              style={this.props.themedStyle.component}
+              status={STATUS}
+              size='tiny'
+              alignment={ALIGNMENT}
+              icon={ICON}
+            />
+          </View>
+        </View>
+        <View style={this.props.themedStyle.containerSection}>
+          <Text style={this.props.themedStyle.textDescription}>Text</Text>
+          <View style={this.props.themedStyle.containerPreview}>
+            <ButtonComponent
+              appearance={APPEARANCE}
+              style={this.props.themedStyle.component}
+              status={STATUS}
+              size='giant'
+              alignment={ALIGNMENT}>
+              {TEXT}
+            </ButtonComponent>
+            <ButtonComponent
+              appearance={APPEARANCE}
+              style={this.props.themedStyle.component}
+              status={STATUS}
+              size='large'
+              alignment={ALIGNMENT}>
+              {TEXT}
+            </ButtonComponent>
+            <ButtonComponent
+              appearance={APPEARANCE}
+              style={this.props.themedStyle.component}
+              status={STATUS}
+              size='medium'
+              alignment={ALIGNMENT}>
+              {TEXT}
+            </ButtonComponent>
+            <ButtonComponent
+              appearance={APPEARANCE}
+              style={this.props.themedStyle.component}
+              status={STATUS}
+              size='small'
+              alignment={ALIGNMENT}>
+              {TEXT}
+            </ButtonComponent>
+            <ButtonComponent
+              appearance={APPEARANCE}
+              style={this.props.themedStyle.component}
+              status={STATUS}
+              size='tiny'
+              alignment={ALIGNMENT}>
+              {TEXT}
+            </ButtonComponent>
+          </View>
+        </View>
+        <View style={this.props.themedStyle.containerSection}>
+          <Text style={this.props.themedStyle.textDescription}>Icon and Text</Text>
+          <View style={this.props.themedStyle.containerPreview}>
+            <ButtonComponent
+              appearance={APPEARANCE}
+              style={this.props.themedStyle.component}
+              status={STATUS}
+              size='giant'
+              alignment={ALIGNMENT}
+              icon={ICON}>
+              {TEXT}
+            </ButtonComponent>
+            <ButtonComponent
+              appearance={APPEARANCE}
+              style={this.props.themedStyle.component}
+              status={STATUS}
+              size='large'
+              icon={ICON}
+              alignment={ALIGNMENT}>
+              {TEXT}
+            </ButtonComponent>
+            <ButtonComponent
+              appearance={APPEARANCE}
+              style={this.props.themedStyle.component}
+              status={STATUS}
+              size='medium'
+              alignment={ALIGNMENT}
+              icon={ICON}>
+              {TEXT}
+            </ButtonComponent>
+            <ButtonComponent
+              appearance={APPEARANCE}
+              style={this.props.themedStyle.component}
+              status={STATUS}
+              size='small'
+              alignment={ALIGNMENT}
+              icon={ICON}>
+              {TEXT}
+            </ButtonComponent>
+            <ButtonComponent
+              appearance={APPEARANCE}
+              style={this.props.themedStyle.component}
+              status={STATUS}
+              size='tiny'
+              alignment={ALIGNMENT}
+              icon={ICON}>
+              {TEXT}
+            </ButtonComponent>
+          </View>
+        </View>
+      </View>
+    );
+  }
+}
+
+export const ButtonScreen = withStyles(Button, (theme: ThemeType) => ({
+  container: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+  },
+  containerSection: {
+    marginVertical: 16,
+  },
+  containerPreview: {
+    alignItems: 'center',
+    marginTop: 4,
+  },
+  containerPreviewRow: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 4,
+  },
+  textDescription: {
+    fontSize: 18,
+  },
+  component: {
+    margin: 4,
+  },
+}));
diff --git a/src/playground/src/ui/screen/dialog.component.tsx b/src/playground/src/ui/screen/dialog.component.tsx
index e56ae191b..75b629535 100644
--- a/src/playground/src/ui/screen/dialog.component.tsx
+++ b/src/playground/src/ui/screen/dialog.component.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import {
   View,
   Button,
+  ViewStyle,
+  ViewProps,
 } from 'react-native';
 import {
   ThemedComponentProps,
@@ -9,7 +11,6 @@ import {
   withStyles,
   ModalService,
   ModalComponentCloseProps,
-  StyleType,
 } from '@kitten/theme';
 import { NavigationScreenProps } from 'react-navigation';
 
@@ -20,7 +21,7 @@ interface EndlessModalProps {
   onDismiss?: () => void;
 }
 
-const EndlessModal = (props?: EndlessModalProps & ModalComponentCloseProps) => {
+const EndlessModal = (props?: EndlessModalProps & ModalComponentCloseProps & ViewProps) => {
 
   const { onContinue, onDismiss, onCloseModal, ...derivedProps } = props;
 
@@ -67,7 +68,7 @@ class Dialog extends React.Component<Props> {
   private createModalElement = (): React.ReactElement<any> => {
     const color: string = this.modalCount % 2 === 0 ? '#C0C0C0' : '#A0A1A8';
 
-    const additionalProps: StyleType<View> = {
+    const additionalProps: ViewStyle = {
       left: this.modalCount * 20,
       top: 140 + this.modalCount * 20,
       backgroundColor: color,
diff --git a/src/playground/src/ui/screen/index.ts b/src/playground/src/ui/screen/index.ts
index db8bd7a3d..bb666ccaa 100644
--- a/src/playground/src/ui/screen/index.ts
+++ b/src/playground/src/ui/screen/index.ts
@@ -1,4 +1,5 @@
 export { HomeScreen } from './home.component';
+export { ButtonScreen } from './button.component';
 export { TextScreen } from './text.component';
 export { RadioScreen } from './radio.component';
 export { LayoutScreen } from './layout.component';