2 files changed, 93 insertions, 0 deletions
diff --git a/frontend/app/components/gradientButton/index.js b/frontend/app/components/gradientButton/index.js
new file mode 100644
index 0000000..92ebd79
--- /dev/null
+++ b/frontend/app/components/gradientButton/index.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import { LinearGradient } from 'expo';
+import {
+  RkButton,
+  RkText,
+  RkComponent,
+} from 'react-native-ui-kitten';
+
+export class GradientButton extends RkComponent {
+  componentName = 'GradientButton';
+  typeMapping = {
+    button: {},
+    gradient: {},
+    text: {},
+  };
+
+  renderContent = (textStyle) => {
+    const hasText = this.props.text === undefined;
+    return hasText ? this.props.children : this.renderText(textStyle);
+  };
+
+  renderText = (textStyle) => (
+    <RkText style={textStyle}>{this.props.text}</RkText>
+  );
+
+  render() {
+    const { button, gradient, text: textStyle } = this.defineStyles();
+    const { style, rkType, ...restProps } = this.props;
+    const colors = this.props.colors || this.extractNonStyleValue(gradient, 'colors');
+    return (
+      <RkButton
+        rkType='stretch'
+        style={[button, style]}
+        {...restProps}>
+        <LinearGradient
+          colors={colors}
+          start={{ x: 0.0, y: 0.5 }}
+          end={{ x: 1, y: 0.5 }}
+          style={[gradient]}>
+          {this.renderContent(textStyle)}
+        </LinearGradient>
+      </RkButton>
+    );
+  }
+}
diff --git a/frontend/app/components/gradientButton/types.js b/frontend/app/components/gradientButton/types.js
new file mode 100644
index 0000000..62bcf22
--- /dev/null
+++ b/frontend/app/components/gradientButton/types.js
@@ -0,0 +1,48 @@
+import { scaleVertical } from '../../utils/scale';
+
+export const GradientButtonTypes = (theme) => ({
+  _base: {
+    button: {
+      alignItems: 'stretch',
+      paddingVertical: 0,
+      paddingHorizontal: 0,
+      height: scaleVertical(40),
+      borderRadius: 20,
+    },
+    gradient: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 20,
+      colors: theme.colors.gradients.base,
+    },
+    text: {
+      backgroundColor: 'transparent',
+      color: theme.colors.text.inverse,
+    },
+  },
+  large: {
+    button: {
+      alignSelf: 'stretch',
+      height: scaleVertical(56),
+      borderRadius: 28,
+    },
+    gradient: {
+      borderRadius: 28,
+    },
+  },
+  statItem: {
+    button: {
+      flex: 1,
+      borderRadius: 5,
+      marginHorizontal: 10,
+      height: null,
+      alignSelf: 'auto',
+    },
+    gradient: {
+      flex: 1,
+      borderRadius: 5,
+      padding: 10,
+    },
+  },
+});