Tab pages added

ralfisalhon · Jan 2, 2020 · c273df1 · c273df1
1 parent 6fe9838
commit c273df1
Show file tree

Hide file tree

Showing 14 changed files with 159 additions and 95 deletions.
diff --git a/App.js b/App.js
@@ -3,8 +3,8 @@ import {createStackNavigator, createAppContainer} from 'react-navigation';
 var {Welcome} = require('./screens/Welcome/index');
 var {Home} = require('./screens/Home/index');
 var {Classes} = require('./screens/Classes/index');
-var {Tools} = require('./screens/Tools/index');
-var {Progress} = require('./screens/Progress/index');
+var {Profile} = require('./screens/Profile/index');
+var {Events} = require('./screens/Events/index');
 var {CreateAccount} = require('./screens/CreateAccount/index');
 
 console.disableYellowBox = true;
@@ -13,8 +13,8 @@ const MainNavigator = createStackNavigator({
   Welcome: {screen: Welcome},
   Home: {screen: Home},
   Classes: {screen: Classes},
-  Tools: {screen: Tools},
-  Progress: {screen: Progress},
+  Profile: {screen: Profile},
+  Events: {screen: Events},
   CreateAccount: {screen: CreateAccount},
 });
 

diff --git a/assets/components/Icon.js b/assets/components/Icon.js
@@ -19,7 +19,7 @@ class Icon extends Component {
   };
 
   render() {
-    const {logo_uri, text, selected} = this.props;
+    const {logo_uri, text, selected, onPress} = this.props;
 
     return (
       <View>
@@ -28,6 +28,7 @@ class Icon extends Component {
             styles.icon,
             selected && {backgroundColor: c.selected_icon_color},
           ]}
+          onPress={onPress}
           activeOpacity={0.5}>
           <Image
             style={styles.image}

diff --git a/assets/components/NavBar.js b/assets/components/NavBar.js
@@ -7,20 +7,39 @@ import {Icon} from './Icon';
 
 class NavBar extends Component {
   static defaultProps = {
-    height: 0,
-    width: 0,
+    selected: 'Home',
   };
 
   render() {
-    const {height, width} = this.props;
+    const {selected, navigate} = this.props;
 
     return (
       <View style={styles.container}>
         <View style={styles.navbar}>
-          <Icon logo_uri={c.home_uri} text="Home" selected={true} />
-          <Icon logo_uri={c.classes_uri} text="Classes" />
-          <Icon logo_uri={c.events_uri} text="Events" />
-          <Icon logo_uri={c.profile_uri} text="Profile" />
+          <Icon
+            logo_uri={c.home_uri}
+            text="Home"
+            selected={selected == 'Home'}
+            onPress={() => navigate('Home')}
+          />
+          <Icon
+            logo_uri={c.classes_uri}
+            text="Classes"
+            selected={selected == 'Classes'}
+            onPress={() => navigate('Classes')}
+          />
+          <Icon
+            logo_uri={c.events_uri}
+            text="Events"
+            selected={selected == 'Events'}
+            onPress={() => navigate('Events')}
+          />
+          <Icon
+            logo_uri={c.profile_uri}
+            text="Profile"
+            selected={selected == 'Profile'}
+            onPress={() => navigate('Profile')}
+          />
         </View>
       </View>
     );

diff --git a/assets/components/TopLogo.js b/assets/components/TopLogo.js
@@ -0,0 +1,53 @@
+import React, {Component} from 'react';
+import {View, StyleSheet, Dimensions, Image} from 'react-native';
+
+const {width: windowWidth, height: windowHeight} = Dimensions.get('window');
+
+import {Padding} from './Padding';
+
+import {c} from '../../constants';
+
+class TopLogo extends Component {
+  static defaultProps = {};
+
+  render() {
+    const {} = this.props;
+
+    return (
+      <View style={styles.center}>
+        <Padding height={15} />
+        <View style={styles.logo}>
+          <Image
+            style={styles.image}
+            resizeMode={'contain'}
+            source={c.logo_uri}
+          />
+        </View>
+        <Padding height={15} />
+        <View style={styles.line} />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  center: {
+    alignItems: 'center',
+  },
+  logo: {
+    height: windowHeight * 0.1,
+    width: windowWidth * 0.75,
+  },
+  image: {
+    height: undefined,
+    width: undefined,
+    flex: 1,
+  },
+  line: {
+    width: windowWidth * 0.9,
+    height: 1,
+    backgroundColor: c.icon_gray,
+  },
+});
+
+export {TopLogo};
diff --git a/assets/components/dummy.js b/assets/components/dummy.js
@@ -1,35 +1,27 @@
-import React, { Component } from "react";
-import { View, StyleSheet, Text, Dimensions } from "react-native";
+import React, {Component} from 'react';
+import {View, StyleSheet, Text, Dimensions} from 'react-native';
 
-const { width: windowWidth } = Dimensions.get("window");
-const isSmallDevice = windowWidth < 350 ? true : false;
+const {width: windowWidth} = Dimensions.get('window');
 
 class Welcome extends Component {
   static defaultProps = {};
 
   render() {
     const {} = this.props;
 
-    return (
-      <View style={styles.textContainer}>
-        <Text style={[human.largeTitle#ecf0f1, styles.title]}>Meet Jamblr,</Text>
-        <Text style={[human.title3#ecf0f1, styles.subtitle]}>
-          Your Music Discovery &{"\n"}Playlist Creation Assistant
-        </Text>
-      </View>
-    );
+    return <View style={styles.container}></View>;
   }
 }
 
 const styles = StyleSheet.create({
-  card: {
-    borderWidth: 2,
-    borderRadius: 10,
-    padding: 8,
-    shadowOffset: { width: 1, height: 1 },
-    shadowColor: "gray",
-    shadowOpacity: 0.1
-  }
+  container: {
+    height: 20,
+    width: 20,
+    backgroundColor: 'red',
+  },
+  center: {
+    alignItems: 'center',
+  },
 });
 
-export { Welcome };
+export {Welcome};
diff --git a/screens/Classes/index.js b/screens/Classes/index.js
@@ -1,15 +1,19 @@
 import React from 'react';
-import {View, Dimensions, Image, SafeAreaView, Text} from 'react-native';
+import {View, Dimensions, SafeAreaView, Text} from 'react-native';
 const {width: windowWidth, height: windowHeight} = Dimensions.get('window');
 
 import {s} from './styles';
 import {c} from '../../constants';
 
 import {Padding} from '../../assets/components/Padding';
+import {Button} from '../../assets/components/Button';
+import {NavBar} from '../../assets/components/NavBar';
+import {TopLogo} from '../../assets/components/TopLogo';
 
 export class Classes extends React.Component {
   static navigationOptions = {
     header: null,
+    gesturesEnabled: false,
   };
 
   constructor() {
@@ -22,18 +26,12 @@ export class Classes extends React.Component {
 
     return (
       <SafeAreaView style={s.container}>
-        <Padding height={20} />
+        <TopLogo />
+        <Padding height={15} />
         <View style={s.center}>
-          <View style={s.logo}>
-            <Image style={s.image} resizeMode={'contain'} source={c.logo_uri} />
-          </View>
-        </View>
-        <Padding height={20} />
-        <View style={s.line} />
-        <Padding height={20} />
-        <View style={s.center}>
-          <Text>Classes</Text>
+          <Text style={[s.text, s.title]}>Classes</Text>
         </View>
+        <NavBar selected="Classes" navigate={navigate} />
       </SafeAreaView>
     );
   }

diff --git a/screens/Classes/styles.js b/screens/Classes/styles.js
@@ -25,6 +25,11 @@ export const s = StyleSheet.create({
   text: {
     fontFamily: 'Avenir Next',
   },
+  title: {
+    fontWeight: '600',
+    textAlign: 'left',
+    fontSize: 22,
+  },
   line: {
     height: 2,
     width: windowWidth,

diff --git a/screens/Progress/index.js → screens/Events/index.js b/screens/Progress/index.js → screens/Events/index.js
@@ -1,15 +1,19 @@
 import React from 'react';
-import {View, Dimensions, Image, SafeAreaView, Text} from 'react-native';
+import {View, Dimensions, SafeAreaView, Text} from 'react-native';
 const {width: windowWidth, height: windowHeight} = Dimensions.get('window');
 
 import {s} from './styles';
 import {c} from '../../constants';
 
 import {Padding} from '../../assets/components/Padding';
+import {Button} from '../../assets/components/Button';
+import {NavBar} from '../../assets/components/NavBar';
+import {TopLogo} from '../../assets/components/TopLogo';
 
-export class Progress extends React.Component {
+export class Events extends React.Component {
   static navigationOptions = {
     header: null,
+    gesturesEnabled: false,
   };
 
   constructor() {
@@ -22,18 +26,12 @@ export class Progress extends React.Component {
 
     return (
       <SafeAreaView style={s.container}>
-        <Padding height={20} />
+        <TopLogo />
+        <Padding height={15} />
         <View style={s.center}>
-          <View style={s.logo}>
-            <Image style={s.image} resizeMode={'contain'} source={c.logo_uri} />
-          </View>
-        </View>
-        <Padding height={20} />
-        <View style={s.line} />
-        <Padding height={20} />
-        <View style={s.center}>
-          <Text>Progress</Text>
+          <Text style={[s.text, s.title]}>Events</Text>
         </View>
+        <NavBar selected="Events" navigate={navigate} />
       </SafeAreaView>
     );
   }

diff --git a/screens/Progress/styles.js → screens/Events/styles.js b/screens/Progress/styles.js → screens/Events/styles.js
@@ -22,6 +22,11 @@ export const s = StyleSheet.create({
   text: {
     fontFamily: 'Avenir Next',
   },
+  title: {
+    fontWeight: '600',
+    textAlign: 'left',
+    fontSize: 22,
+  },
   line: {
     height: 2,
     width: windowWidth,

diff --git a/screens/Home/index.js b/screens/Home/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {View, Dimensions, Image, SafeAreaView} from 'react-native';
+import {View, Dimensions, SafeAreaView, Text} from 'react-native';
 const {width: windowWidth, height: windowHeight} = Dimensions.get('window');
 
 import {s} from './styles';
@@ -8,6 +8,7 @@ import {c} from '../../constants';
 import {Padding} from '../../assets/components/Padding';
 import {Button} from '../../assets/components/Button';
 import {NavBar} from '../../assets/components/NavBar';
+import {TopLogo} from '../../assets/components/TopLogo';
 
 export class Home extends React.Component {
   static navigationOptions = {
@@ -25,34 +26,12 @@ export class Home extends React.Component {
 
     return (
       <SafeAreaView style={s.container}>
-        <Padding height={20} />
+        <TopLogo />
+        <Padding height={15} />
         <View style={s.center}>
-          <View style={s.logo}>
-            <Image style={s.image} resizeMode={'contain'} source={c.logo_uri} />
-          </View>
+          <Text style={[s.text, s.title]}>Home</Text>
         </View>
-        <Padding height={30} />
-        <View style={s.center}></View>
-        <View style={s.center}>
-          <Button
-            text={'My Classes'}
-            style={s.button}
-            onPress={() => navigate('Classes')}
-          />
-          <Padding height={20} />
-          <Button
-            text={'Practice Tools'}
-            style={s.button}
-            onPress={() => navigate('Tools')}
-          />
-          <Padding height={20} />
-          <Button
-            text={'Track Progress'}
-            style={s.button}
-            onPress={() => navigate('Progress')}
-          />
-        </View>
-        <NavBar />
+        <NavBar selected="Home" navigate={navigate} />
       </SafeAreaView>
     );
   }

diff --git a/screens/Home/styles.js b/screens/Home/styles.js
@@ -22,6 +22,12 @@ export const s = StyleSheet.create({
   },
   text: {
     fontFamily: 'Avenir Next',
+    color: c.text_color,
+  },
+  title: {
+    fontWeight: '600',
+    textAlign: 'left',
+    fontSize: 22,
   },
   line: {
     height: 2,