Button Component

Author: dfejgelis

src/components/Button/Button.js

@@ -0,0 +1,25 @@
+import React from 'react-native'
+import styles from './ButtonStyles'
+
+// TODO :: Extend styles via receiving prop
+
+class Button extends React.Component {
+  _onPress() {
+    this.props.onPress()
+  }
+  render() {
+    return (
+      <React.TouchableHighlight
+          style={styles.container}
+          onPress={this._onPress.bind(this)}>
+        <React.Text style={styles.text}>{this.props.text}</React.Text>
+      </React.TouchableHighlight>
+    )
+  }
+}
+Button.propTypes = {
+  text: React.PropTypes.string.isRequired,
+  onPress: React.PropTypes.func.isRequired,
+}
+
+export default Button

src/components/Button/ButtonStyles.js

@@ -0,0 +1,19 @@
+'use strict'
+
+import { StyleSheet } from 'react-native'
+
+
+export default StyleSheet.create({
+  container: {
+    marginTop: 20,
+    backgroundColor: "#CCC",
+    paddingTop: 10,
+    paddingBottom: 10,
+    borderRadius: 40,
+    padding: 40,
+    alignSelf: 'center',
+  },
+  text: {
+
+  },
+})

src/components/Button/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "Button",
+  "private": true,
+  "main": "./Button.js"
+}

src/views/Home/Home.js

@@ -9,6 +9,7 @@ import styles from './HomeStyles'
 import SpotifyStore from '../../stores/SpotifyStore'
 import SpotifyActions from '../../actions/SpotifyActions'
 import ArtistList from '../../components/ArtistList'
+import Button from '../../components/Button'
 
 
 export default class Home extends ViewBase {
@@ -81,12 +82,8 @@ export default class Home extends ViewBase {
         <ArtistList
             artists={this.state.relatedArtists}
             onTapCreatePlaylist={this._createPlaylist.bind(this)}
-        />
-        <React.TouchableHighlight
-            style={styles.createPlaylistButton}
-            onPress={this._discoverArtists.bind(this)}>
-          <React.Text style={styles.loginButtonText}>Create Playlist</React.Text>
-        </React.TouchableHighlight>
+            />
+        <Button text="Create Playlist" onPress={this._createPlaylist}></Button>
       </React.View>
     )
   }

src/views/Home/HomeStyles.js

@@ -18,13 +18,4 @@ export default StyleSheet.create({
     alignSelf: 'center',
     fontSize: 20,
   },
-  createPlaylistButton: {
-    marginTop: 20,
-    backgroundColor: "#CCC",
-    paddingTop: 10,
-    paddingBottom: 10,
-    borderRadius: 40,
-    padding: 40,
-    alignSelf: 'center',
-  },
 })