without expo

App/app/App.js

@@ -38,6 +38,9 @@ const SCREEN_WIDTH = Dimensions.get("window").width;
 
 import Swiper from 'react-native-swiper';
 
+import { GradientButton } from './components/gradientButton';
+
+
 class App extends Component {
     
     _activate=()=>{
@@ -188,7 +191,12 @@ class App extends Component {
                     </View>
                 <RkTextInput rkType='rounded' placeholder='Username' />
               <RkTextInput rkType='rounded' placeholder='Password' secureTextEntry />
-            
+              <GradientButton
+            style={styles.save}
+            rkType='large'
+            text='LOGIN'
+            onPress={this.onLoginButtonPressed}
+          />
             <View style={ styles.buttons }>
               <TouchableOpacity
                 style={styles.button}>

App/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>
+    );
+  }
+}

App/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,
+    },
+  },
+});

App/app/utils/scale.js

@@ -0,0 +1,13 @@
+import { Dimensions } from 'react-native';
+
+const { width, height } = Dimensions.get('window');
+
+// Guideline sizes are based on standard ~5" screen mobile device
+const guidelineBaseWidth = 350;
+const guidelineBaseHeight = 680;
+
+const scale = size => (width / guidelineBaseWidth) * size;
+const scaleVertical = size => (height / guidelineBaseHeight) * size;
+const scaleModerate = (size, factor = 0.5) => size + ((scale(size) - size) * factor);
+
+export { scale, scaleVertical, scaleModerate };

App/app/utils/textUtils.js

@@ -0,0 +1,6 @@
+
+function formatNumber(num) {
+    return num > 999 ? `${(num / 1000).toFixed(1)}k` : num;
+  }
+  
+  export default formatNumber;