Improved Button component

src/components/Button.jsx

@@ -1,24 +1,44 @@
 import * as React from 'react';
-import { Button as Btn } from 'react-native';
+import { ViewPropTypes, StyleSheet, Text, TouchableHighlight } from 'react-native';
+
+const styles = StyleSheet.create({
+  touchable: {
+    flexDirection: "row", flexWrap: "wrap", justifyContent: "center", alignItems: "center"
+  },
+  touchableMain: {
+    backgroundColor: '#4360DF1a', borderRadius: 8
+  },
+  touchableDisabled: {
+    backgroundColor:"#939BA11A"
+  },
+  text: {
+    marginHorizontal: 32, marginVertical: 11, color: "#4360DF", textAlign: "center", fontSize: 15
+  },
+  textDisabled: {
+    color:"#939BA1"
+  }
+});
 
 export class Button extends React.Component {
+
+  static propTypes = {
+    style: ViewPropTypes.style
+  }
+
   constructor(props) {
     super(props);
   }
 
-  toggle = () => {
-    console.log('touched')
-  };
-
   render() {
-    const { title, color } = this.props;
+    const { main, title, disabled, onPress, accessibilityLabel} = this.props;
     return (
-      <Btn
-        onPress={this.toggle}
-        title={title}
-        color={ color || "#841584"}
-        accessibilityLabel="Learn more about this purple button"
-      />
+      <TouchableHighlight
+        style={[styles.touchable, main && styles.touchableMain, main && disabled && styles.touchableDisabled]}
+        disabled={disabled}
+        onPress={onPress}
+        accessibilityLabel={accessibilityLabel}>
+        <Text style={[styles.text, disabled && styles.textDisabled]}>{title}</Text>
+      </TouchableHighlight>
     );
   }
 }

src/components/Welcome.jsx

@@ -1,46 +0,0 @@
-import React from 'react';
-
-const styles = {
-  main: {
-    margin: 15,
-    lineHeight: 1.4,
-  },
-
-  logo: {
-    width: 200,
-  },
-
-  link: {
-    color: '#1474f3',
-    textDecoration: 'none',
-    borderBottom: '1px solid #1474f3',
-    paddingBottom: 2,
-  },
-
-  code: {
-    fontSize: 15,
-    fontWeight: 600,
-    padding: "2px 5px",
-    border: "1px solid #eae9e9",
-    borderRadius: 4,
-    backgroundColor: '#f3f2f2',
-    color: '#3a3a3a',
-  },
-};
-
-export default class Welcome extends React.Component {
-  showApp(e) {
-    e.preventDefault();
-    if(this.props.showApp) this.props.showApp();
-  }
-
-  render() {
-    return (
-      <div style={styles.main}>
-        <>
-          A reusable component library that is designed and engineered to help us build better product faster at Status.
-        </>
-      </div>
-    );
-  }
-}

src/stories/index.js

@@ -4,14 +4,17 @@ import 'typeface-roboto'
 import { storiesOf } from '@storybook/react'
 import { linkTo } from '@storybook/addon-links'
 
-import StatusWelcome from '../components/Welcome'
+import { Text, TouchableHighlight, View } from 'react-native';
 import { Button } from '../components/Button'
-// import MobileButton from '../components/MobileButton'
-
-
-storiesOf('Welcome', module)
-  .add('To Status-Welcome', () => <StatusWelcome showApp={linkTo('Button')} />)
 
 storiesOf('Button', module)
-  .add('To Status-Button', () => <Button title="Click Me" />)
-  .add('Red Button', () => <Button title="Click Me" color="red" />)
+  .add('Main button', () =>
+    <View style={{flexDirection: 'row', justifyContent: 'flex-start'}}>
+      <Button main={true} title="Click Me" />
+      <Button main={true} disabled={true} title="Click Me" />
+    </View>)
+  .add('Secondary button', () =>
+    <View style={{flexDirection: 'row', justifyContent: 'flex-start'}}>
+      <Button title="Click Me" />
+      <Button disabled={true} title="Click Me" />
+    </View>);