Added firebase integration and react navigation

.gitignore

@@ -60,3 +60,9 @@ buck-out/
 
 # Expo
 .expo/*
+
+
+# Firebase
+
+GoogleService-Info.plist
+google-services.json

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "bracketSpacing": true,
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "es5"
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "Fontisto"
+    ]
+}

app.json

@@ -1,17 +1,33 @@
 {
-  "name": "tracker",
-  "displayName": "tracker",
+  "name": "ECRT Diaspora",
+  "displayName": "ECRT Diaspora",
   "expo": {
-    "name": "tracker",
-    "slug": "tracker",
+    "name": "ECRT Diaspora",
+    "slug": "ecrt-diaspora",
     "version": "1.0.0",
+    "icon": "./src/assets/icon.png",
+    "splash": {
+      "image": "./src/assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
     "platforms": [
       "ios",
       "android",
       "web"
     ],
     "assetBundlePatterns": [
       "**/*"
-    ]
+    ],
+    "android": {
+      "package": "app.ecrt.tracker",
+      "googleServicesFile": "./src/api/firebase/config/google-services.json"
+    },
+    "ios": {
+      "bundleIdentifier": "app.ecrt.tracker",
+      "googleServicesFile": "./src/api/firebase/config/GoogleService-Info.plist",
+      "supportsTablet": true,
+      "requireFullScreen": true
+    }
   }
-}
+}

index.js

@@ -1,6 +1,7 @@
+import 'react-native-gesture-handler';
 import { registerRootComponent } from 'expo';
 
-import App from './App';
+import App from './src/App';
 
 // registerRootComponent calls AppRegistry.registerComponent('main', () => App);
 // It also ensures that whether you load the app in the Expo client or in a native build,

package.json

@@ -8,14 +8,20 @@
     "test": "jest"
   },
   "dependencies": {
+    "@react-native-community/masked-view": "^0.1.10",
+    "@react-navigation/bottom-tabs": "^5.3.3",
+    "@react-navigation/native": "^5.2.3",
+    "@react-navigation/stack": "^5.2.18",
     "expo": "~37.0.3",
     "expo-updates": "~0.1.0",
+    "firebase": "^7.14.2",
     "react": "~16.9.0",
     "react-dom": "~16.9.0",
     "react-native": "~0.61.5",
-    "react-native-gesture-handler": "~1.6.0",
-    "react-native-reanimated": "~1.7.0",
-    "react-native-screens": "~2.2.0",
+    "react-native-gesture-handler": "^1.6.1",
+    "react-native-reanimated": "^1.8.0",
+    "react-native-safe-area-context": "^0.7.3",
+    "react-native-screens": "^2.7.0",
     "react-native-unimodules": "~0.9.0",
     "react-native-web": "~0.11.7"
   },

src/App.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Platform, StyleSheet, Text, View } from 'react-native';
+
+import Navigation from './navigation';
+
+export default function App() {
+  return <Navigation />;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  welcome: {
+    fontSize: 20,
+    textAlign: 'center',
+    margin: 10,
+  },
+  instructions: {
+    textAlign: 'center',
+    color: '#333333',
+    marginBottom: 5,
+  },
+});

src/api/firebase/config/index.js

@@ -0,0 +1,12 @@
+const firebaseConfig = {
+  apiKey: 'AIzaSyDtBWWBzACHAwClVYf9CRmCPvKtxGuxvJM',
+  authDomain: 'ecrt-tracker.firebaseapp.com',
+  databaseURL: 'https://ecrt-tracker.firebaseio.com',
+  projectId: 'ecrt-tracker',
+  storageBucket: 'ecrt-tracker.appspot.com',
+  messagingSenderId: '947035241094',
+  appId: '1:947035241094:web:f37b6b05b0707c77992f07',
+  measurementId: 'G-66Y8Y5HLCL',
+};
+
+export default firebaseConfig;

src/api/firebase/index.js

@@ -0,0 +1,21 @@
+import firebase from 'firebase/app';
+import 'firebase/firestore';
+import 'firebase/auth';
+import 'firebase/storage';
+import 'firebase/functions';
+// import 'firebase/analytics';
+import config from './config';
+
+// Initialize Firebase
+firebase.initializeApp(config);
+// firebase.analytics();
+
+// Export firebase stuff.
+export const { auth, firestore, storage, functions } = firebase;
+
+// Uncomment this while running firebase emulator.
+// if (process.env.NODE_ENV === 'development') {
+//   firebase.functions().useFunctionsEmulator('http://localhost:5001');
+// }
+
+export default firebase;

src/components/Loading.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { StyleSheet, Text, View, ActivityIndicator } from 'react-native';
+
+const Loading = ({
+  text = 'Loading...',
+  size = 'large',
+  color = '#0000ff',
+}) => {
+  return (
+    <View style={styles.container}>
+      <ActivityIndicator size={size} color={color} />
+      <Text>{text}</Text>
+    </View>
+  );
+};
+
+export default Loading;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+});

src/navigation/index.js

@@ -0,0 +1,158 @@
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { auth } from '../api/firebase';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+
+// Components
+import Loading from '../components/Loading';
+
+// Screens
+import HomeScreen from '../screens/HomeScreen';
+import StatsScreen from '../screens/StatsScreen';
+import SignInScreen from '../screens/SignInScreen';
+import SignUpScreen from '../screens/SignUpScreen';
+import FullScreen from '../screens/FullScreen';
+import SelfCheckScreen from '../screens/SelfCheckScreen';
+
+const AuthStack = createStackNavigator();
+const AuthStackScreen = () => (
+  <AuthStack.Navigator
+    screenOptions={{
+      headerShown: false,
+    }}
+  >
+    <AuthStack.Screen name="SignIn" component={SignInScreen} />
+    <AuthStack.Screen name="SignUp" component={SignUpScreen} />
+  </AuthStack.Navigator>
+);
+
+const HomeStack = createStackNavigator();
+const HomeStackScreen = () => (
+  <HomeStack.Navigator
+    screenOptions={{
+      headerShown: false,
+    }}
+  >
+    <HomeStack.Screen name="Home" component={HomeScreen} />
+  </HomeStack.Navigator>
+);
+
+const SelfCheckStack = createStackNavigator();
+const SelfCheckStackScreen = () => (
+  <SelfCheckStack.Navigator
+    screenOptions={{
+      headerShown: false,
+    }}
+  >
+    <SelfCheckStack.Screen name="check" component={SelfCheckScreen} />
+  </SelfCheckStack.Navigator>
+);
+
+const StatsStack = createStackNavigator();
+const StatsStackScreen = () => (
+  <StatsStack.Navigator
+    screenOptions={{
+      headerShown: false,
+    }}
+  >
+    <StatsStack.Screen name="Stats" component={StatsScreen} />
+  </StatsStack.Navigator>
+);
+
+const FullScreenStack = createStackNavigator();
+const FullScreenStackScreen = () => (
+  <FullScreenStack.Navigator
+    screenOptions={{
+      headerShown: false,
+    }}
+  >
+    <FullScreenStack.Screen name="FullScreen" component={FullScreen} />
+  </FullScreenStack.Navigator>
+);
+
+const AppTabs = createBottomTabNavigator();
+const AppTabsScreen = () => (
+  <AppTabs.Navigator>
+    <AppTabs.Screen
+      name="Home"
+      component={HomeStackScreen}
+      options={{
+        tabBarIcon: (props) => (
+          <Ionicons name="ios-home" size={props.size} color={props.color} />
+        ),
+      }}
+    />
+    <AppTabs.Screen
+      name="Check"
+      component={SelfCheckStackScreen}
+      options={{
+        tabBarIcon: (props) => (
+          <MaterialCommunityIcons
+            name="stethoscope"
+            size={props.size}
+            color={props.color}
+          />
+        ),
+      }}
+    />
+    <AppTabs.Screen
+      name="Stats"
+      component={StatsStackScreen}
+      options={{
+        tabBarIcon: (props) => (
+          <Ionicons name="ios-stats" size={props.size} color={props.color} />
+        ),
+      }}
+    />
+  </AppTabs.Navigator>
+);
+
+const RootStack = createStackNavigator();
+const RootStackScreen = () => {
+  const [state, setState] = React.useState({ isLoading: true, user: null });
+
+  // Handle user state changes
+  const onAuthStateChanged = (authUser) => {
+    if (authUser) {
+      setState({ isLoading: false, user: authUser });
+    } else {
+      // No user is signed in.
+      setState({ isLoading: false, user: null });
+    }
+  };
+
+  React.useEffect(() => {
+    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
+    return subscriber; // unsubscribe on unmount
+  }, []);
+
+  return (
+    <RootStack.Navigator
+      headerMode="none"
+      screenOptions={{ animationEnabled: false }}
+      mode="modal"
+    >
+      {state.isLoading ? (
+        <RootStack.Screen name="Loading" component={Loading} />
+      ) : state.user ? (
+        <RootStack.Screen name="AppTabsScreen" component={AppTabsScreen} />
+      ) : (
+        <RootStack.Screen name="AuthStackScreen" component={AuthStackScreen} />
+      )}
+      <RootStack.Screen
+        name="FullScreen"
+        component={FullScreenStackScreen}
+        options={{ animationEnabled: true }}
+      />
+    </RootStack.Navigator>
+  );
+};
+
+export default () => (
+  <NavigationContainer>
+    <RootStackScreen />
+  </NavigationContainer>
+);