Code Improvements & prop-types module installed

Author: thetornadotitan

package.json

@@ -10,6 +10,7 @@
     "@expo/vector-icons": "^9.0.0",
     "expo": "^32.0.0",
     "native-base": "^2.10.0",
+    "prop-types": "^15.7.2",
     "react": "^16.5.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz"
   },

src/App.js

@@ -2,10 +2,11 @@ import React, { Component } from 'react';
 import { registerRootComponent, AppLoading, Font } from 'expo';
 import { StatusBar, StyleSheet } from 'react-native';
 import { Container, Text, View } from 'native-base';
-import { Navbar, Pages } from './components/shared/navbar';
-import Home from './components/home/home';
-import Contributors from './components/contributors/contributors';
-import FAQ from './components/faq/faq';
+import Navbar from './components/shared/navbar';
+import Home from './components/home';
+import Contributors from './components/contributors';
+import FAQ from './components/faq';
+import Pages from './constants/pages';
 
 const styles = StyleSheet.create({
   container: {
@@ -18,6 +19,23 @@ const styles = StyleSheet.create({
   },
 });
 
+function RenderPage(page) {
+  switch (page) {
+    case Pages.HOME:
+      return <Home />;
+    case Pages.CONTRIBUTORS:
+      return <Contributors />;
+    case Pages.FAQ:
+      return <FAQ />;
+    default:
+      return (
+        <Text>
+          Error in RenderPage in App.js - An invalid page was attempting to be loaded
+          </Text>
+      );
+  }
+}
+
 export class App extends Component {
   constructor() {
     super();
@@ -41,7 +59,9 @@ export class App extends Component {
   }
 
   render() {
-    if (!this.state.fontsLoaded) {
+    const { fontsLoaded, page } = this.state;
+
+    if (!fontsLoaded) {
       return <AppLoading />;
     }
     return (
@@ -53,32 +73,15 @@ export class App extends Component {
         ) : (null)}
 
         <View style={styles.content}>
-          {this.RenderPage()}
+          {RenderPage(page)}
         </View>
 
-        <Navbar callback={this.NavbarCallback} />
+        <Navbar onButtonPress={this.NavbarCallback} currentPage={page} />
 
       </Container >
     );
   }
 
-  RenderPage() {
-    switch (this.state.page) {
-      case Pages.HOME:
-        return <Home />;
-      case Pages.CONTRIBUTORS:
-        return <Contributors />;
-      case Pages.FAQ:
-        return <FAQ />;
-      default:
-        return (
-          <Text>
-            Error in RenderPage in App.js - An invalid page was attempting to be loaded
-          </Text>
-        );
-    }
-  }
-
   NavbarCallback(selectedPage) {
     this.setState({ page: selectedPage });
   }

…/components/contributors/contributors.js src/components/contributors/index.jssrc/components/contributors/contributors.js renamed to src/components/contributors/index.js src/components/contributors/contributors.js renamed to src/components/contributors/index.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { StyleSheet } from 'react-native';
+import { Footer } from 'native-base';
+import NavbarButton from './navbarButton';
+import Pages from '../../../constants/pages';
+
+const iconImage = require('../../../../assets/icon.png');
+
+const styles = StyleSheet.create({
+  footer: {
+    backgroundColor: '#fff',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 56,
+  },
+});
+
+export default function Navbar(props) {
+  const { onButtonPress, currentPage } = props;
+  return (
+    <Footer style={styles.footer}>
+
+      <NavbarButton
+        onButtonPress={onButtonPress}
+        iconImage={iconImage}
+        page={Pages.HOME}
+        currentPage={currentPage}
+        text="Home"
+      />
+
+      <NavbarButton
+        onButtonPress={onButtonPress}
+        iconImage={iconImage}
+        page={Pages.CONTRIBUTORS}
+        currentPage={currentPage}
+        text="Contributors"
+      />
+
+      <NavbarButton
+        onButtonPress={onButtonPress}
+        iconImage={iconImage}
+        page={Pages.FAQ}
+        currentPage={currentPage}
+        text="FAQ"
+      />
+
+    </Footer>
+  );
+}
+
+Navbar.propTypes = {
+  onButtonPress: PropTypes.func.isRequired,
+  currentPage: PropTypes.oneOf(Object.values(Pages)).isRequired,
+};

src/components/faq/faq.js src/components/faq/index.jssrc/components/faq/faq.js renamed to src/components/faq/index.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { StyleSheet, Image, TouchableHighlight } from 'react-native';
+import { Text, View } from 'native-base';
+import Pages from '../../../constants/pages';
+
+const styles = StyleSheet.create({
+  navButton: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  navButtonActiveText: {
+    color: '#0098E8',
+  },
+  navButtonInactiveText: {
+    color: '#000',
+  },
+  navImage: {
+    width: 20,
+    height: 20,
+  }
+});
+
+function handleButtonPress(selectedPage, onButtonPress) {
+  onButtonPress(selectedPage);
+}
+
+export default function NavbarButton(props) {
+  const {
+    onButtonPress,
+    iconImage,
+    page,
+    currentPage,
+    text
+  } = props;
+
+  return (
+    <TouchableHighlight style={styles.navButton} underlayColor='#eee' onPress={() => { handleButtonPress(page, onButtonPress); }}>
+      <View style={styles.navButton}>
+
+        <Image style={styles.navImage} source={iconImage} />
+        <Text style={
+          (currentPage === page) ? (styles.navButtonActiveText) : (styles.navButtonInactiveText)
+        }>
+          {text}
+        </Text>
+
+      </View>
+    </TouchableHighlight >
+  );
+}
+
+NavbarButton.propTypes = {
+  onButtonPress: PropTypes.func.isRequired,
+  iconImage: PropTypes.number.isRequired,
+  page: PropTypes.oneOf(Object.values(Pages)).isRequired,
+  currentPage: PropTypes.oneOf(Object.values(Pages)).isRequired,
+  text: PropTypes.string.isRequired
+};

src/components/home/home.js src/components/home/index.jssrc/components/home/home.js renamed to src/components/home/index.js

@@ -0,0 +1,5 @@
+export default {
+  HOME: 0,
+  CONTRIBUTORS: 1,
+  FAQ: 2,
+};

src/components/shared/navbar.js

@@ -4961,7 +4961,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
+prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -5081,7 +5081,7 @@ react-native-keyboard-aware-scroll-view@0.8.0:
     prop-types "^15.6.2"
     react-native-iphone-x-helper "^1.0.3"
 
-"react-native-maps@github:expo/react-native-maps#v0.22.1-exp.0":
+react-native-maps@expo/react-native-maps#v0.22.1-exp.0:
   version "0.22.1"
   resolved "https://codeload.github.com/expo/react-native-maps/tar.gz/e6f98ff7272e5d0a7fe974a41f28593af2d77bb2"