Add Home component

Author: haruelrovix

src/App.js

@@ -1,84 +1,12 @@
 import React, { Component } from 'react';
-import {
-  StyleSheet,
-  Text,
-  View,
-  Platform,
-  TouchableHighlight,
-  Animated,
-  Easing,
-} from 'react-native';
-import logo from './logo.png';
+import Home from './Components/Home';
 
 class App extends Component {
-  state = {
-    spinValue: new Animated.Value(0),
-  }
-
-  onClick = () => {
-    const wasRotated = this.state.spinValue._value === 1;
-    Animated.timing(
-      this.state.spinValue,
-      {
-        toValue: wasRotated ? 0 : 1,
-        duration: 250,
-        easing: Easing.linear
-      }
-    ).start()
-  }
-
   render() {
-    const spin = this.state.spinValue.interpolate({
-      inputRange: [0, 1],
-      outputRange: ['0deg', '360deg']
-    });
-
     return (
-      <View style={styles.container}>
-        <Animated.Image source={logo} style={[styles.logo, { transform: [{rotate: spin}] }]}/>
-        <Text style={styles.title}>Create React Native Web App</Text>
-        <Text>Open up src/App.js to start working on your app!</Text>
-        <Text>Changes you make will automatically reload.</Text>
-        {Platform.OS !== 'web' && <Text>Shake your phone to open the developer menu.</Text>}
-        <TouchableHighlight
-          onPress={this.onClick}
-          style={styles.button}
-          underlayColor={'#0A84D0'}
-        >
-          <Text style={styles.buttonText}>Rotate Logo</Text>
-        </TouchableHighlight>
-      </View>
+      <Home />
     );
   }
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  logo: {
-    width: 300,
-    height: 300,
-  },
-  title: {
-    fontWeight: 'bold',
-    fontSize: 16,
-  },
-  button: {
-    borderRadius: 3,
-    padding: 20,
-    marginVertical: 10,
-    marginTop: 10,
-    backgroundColor: '#1B95E0',
-  },
-  buttonText: {
-    color: '#fff',
-    fontWeight: 'bold',
-    fontSize: 16,
-  },
-});
-
 export default App;

src/Components/Home.js

@@ -0,0 +1,40 @@
+import React, { PureComponent } from 'react';
+import { View } from 'react-native';
+import { Input, Button } from 'react-native-elements';
+
+import styles from './Shared.style';
+
+class Home extends PureComponent {
+  render() {
+    const { input, button } = styles;
+
+    return (
+      <View style={styles.container}>
+        <Input
+          containerStyle={input.containerStyle}
+          inputStyle={input.inputStyle}
+          label='Owner'
+          placeholder="Github's owner"
+        />
+        <Input
+          containerStyle={input.containerStyle}
+          inputStyle={input.inputStyle}
+          label='Repo'
+          placeholder="Github's repository name"
+        />
+        <Button
+          title='SUBMIT'
+          icon={{
+            color: 'white',
+            name:'paper-plane',
+            size: 15,
+            type: 'font-awesome'
+          }}
+          buttonStyle={button.containerStyle}
+        />
+      </View>
+    );
+  }
+}
+
+export default Home;

src/Components/Shared.style.js

@@ -0,0 +1,23 @@
+export default {
+  input: {
+    containerStyle: {
+      marginBottom: 10
+    },
+    inputStyle: {
+      height: 46
+    }
+  },
+  button: {
+    containerStyle: {
+      paddingHorizontal: 10
+    }
+  },
+  container: {
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    display: 'flex',
+    flex: 1,
+    height: '100%',
+    justifyContent: 'center'
+  }
+};