Initial Comment

App.js

@@ -1,21 +1,33 @@
-import { StatusBar } from 'expo-status-bar';
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import React, { Component } from "react";
+import { Rajdhani_600SemiBold } from "@expo-google-fonts/rajdhani";
+import * as Font from "expo-font";
 
-export default function App() {
-  return (
-    <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
-  );
-}
+import BottomTabNavigator from "./components/BottomTabNavigator";
+
+export default class App extends Component {
+  constructor() {
+    super();
+    this.state = {
+      fontLoaded: false
+    };
+  }
+
+  async loadFonts() {
+    await Font.loadAsync({
+      Rajdhani_600SemiBold: Rajdhani_600SemiBold
+    });
+    this.setState({ fontLoaded: true });
+  }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
+  componentDidMount() {
+    this.loadFonts();
+  }
+
+  render() {
+    const { fontLoaded } = this.state;
+    if (fontLoaded) {
+      return <BottomTabNavigator />;
+    }
+    return null;
+  }
+}

components/BottomTabNavigator.js

@@ -0,0 +1,69 @@
+import React, { Component } from "react";
+import { View } from "react-native";
+import { NavigationContainer } from "@react-navigation/native";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import Ionicons from "react-native-vector-icons/Ionicons";
+
+import TransactionScreen from "../screens/Transaction";
+import SearchScreen from "../screens/Search";
+
+const Tab = createBottomTabNavigator();
+
+export default class BottomTabNavigator extends Component {
+  render() {
+    return (
+      <NavigationContainer>
+        <Tab.Navigator
+          screenOptions={({ route }) => ({
+            tabBarIcon: ({ focused, color, size }) => {
+              let iconName;
+
+              if (route.name === "Transaction") {
+                iconName = "book";
+              } else if (route.name === "Search") {
+                iconName = "search";
+              }
+
+              // You can return any component that you like here!
+              return (
+                <Ionicons
+                  name={iconName}
+                  size={size}
+                  color={color}
+                  size={size}
+                />
+              );
+            }
+          })}
+          tabBarOptions={{
+            activeTintColor: "#FFFFFF",
+            inactiveTintColor: "black",
+            style: {
+              height: 130,
+              borderTopWidth: 0,
+              backgroundColor: "#5653d4"
+            },
+            labelStyle: {
+              fontSize: 20,
+              fontFamily: "Rajdhani_600SemiBold"
+            },
+            labelPosition: "beside-icon",
+            tabStyle: {
+              marginTop: 25,
+              marginLeft: 10,
+              marginRight: 10,
+              borderRadius: 30,
+              borderWidth: 2,
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: "#5653d4"
+            }
+          }}
+        >
+          <Tab.Screen name="Transaction" component={TransactionScreen} />
+          <Tab.Screen name="Search" component={SearchScreen} />
+        </Tab.Navigator>
+      </NavigationContainer>
+    );
+  }
+}

config.js

@@ -0,0 +1,16 @@
+import firebase from "firebase";
+require("@firebase/firestore");
+
+const firebaseConfig = {
+  apiKey: "AIzaSyAkp3gQdHbMPD5pCfHbBzIIgFpdCJXD5KM",
+  authDomain: "wily-app-v2.firebaseapp.com",
+  projectId: "wily-app-v2",
+  storageBucket: "wily-app-v2.appspot.com",
+  messagingSenderId: "772559744213",
+  appId: "1:772559744213:web:9417b879882f231175065c",
+  measurementId: "G-H8Y352W6Z2"
+};
+
+firebase.initializeApp(firebaseConfig);
+
+export default firebase.firestore();

package.json

@@ -8,15 +8,26 @@
     "eject": "expo eject"
   },
   "dependencies": {
-    "expo": "~41.0.1",
-    "expo-status-bar": "~1.0.4",
+    "@expo-google-fonts/rajdhani": "^0.1.0",
+    "@react-navigation/bottom-tabs": "^5.11.10",
+    "@react-navigation/native": "^5.9.4",
+    "expo": "^40.0.0",
+    "expo-barcode-scanner": "^10.1.2",
+    "expo-font": "~8.4.0",
+    "expo-permissions": "^12.0.1",
+    "expo-status-bar": "^1.0.4",
+    "firebase": "^8.4.1",
     "react": "16.13.1",
     "react-dom": "16.13.1",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
+    "react-native-elements": "^3.4.0",
+    "react-native-gesture-handler": "^1.10.3",
+    "react-native-screens": "^3.1.1",
+    "react-native-vector-icons": "^8.1.0",
     "react-native-web": "~0.13.12"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0"
+    "@babel/core": "~7.9.0"
   },
   "private": true
 }

screens/Search.js

@@ -0,0 +1,25 @@
+import React, { Component } from "react";
+import { View, Text, StyleSheet } from "react-native";
+
+export default class SearchScreen extends Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.text}>Search Screen</Text>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#5653D4"
+  },
+  text: {
+    color: "#ffff",
+    fontSize: 30
+  }
+});