nomadcoders#13.2 TabBar, Styles, Loader

App.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import { View } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { AppLoading } from "expo";
 import { Asset } from "expo-asset";

components/Loader.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { ActivityIndicator } from "react-native";
+import styled from "styled-components";
+import styles from "../styles";
+
+const Container = styled.View`
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+`;
+
+export default () => (
+  <Container>
+    <ActivityIndicator color={styles.blackColor} />
+  </Container>
+);

components/NavController.js

@@ -1,14 +1,9 @@
 import React from "react";
-import { View } from "react-native";
 import { useIsLoggedIn } from "../AuthContext";
 import AuthNavigation from "../navigation/AuthNavigation";
 import MainNavigation from "../navigation/MainNavigation";
 
 export default () => {
   const isLoggedIn = useIsLoggedIn();
-  return (
-    <View style={{ flex: "1" }}>
-      {isLoggedIn ? <MainNavigation /> : <AuthNavigation />}
-    </View>
-  );
+  return isLoggedIn ? <MainNavigation /> : <AuthNavigation />;
 };

navigation/MainNavigation.js

@@ -2,6 +2,7 @@ import { createStackNavigator, createAppContainer } from "react-navigation";
 import TabNavigation from "./TabNavigation";
 import PhotoNavigation from "./PhotoNavigation";
 import MessageNavigation from "./MessageNavigation";
+import { stackStyles } from "./config";
 
 const MainNavigation = createStackNavigator(
   {
@@ -10,6 +11,11 @@ const MainNavigation = createStackNavigator(
     MessageNavigation
   },
   {
+    defaultNavigationOptions: {
+      headerStyle: {
+        ...stackStyles
+      }
+    },
     headerMode: "none",
     mode: "modal"
   }

navigation/MessageNavigation.js

@@ -1,8 +1,18 @@
 import { createStackNavigator } from "react-navigation";
 import Messages from "../screens/Messages/Messages";
 import Message from "../screens/Messages/Message";
+import { stackStyles } from "./config";
 
-export default createStackNavigator({
-  Messages,
-  Message
-});
+export default createStackNavigator(
+  {
+    Messages,
+    Message
+  },
+  {
+    defaultNavigationOptions: {
+      headerStyle: {
+        ...stackStyles
+      }
+    }
+  }
+);

navigation/PhotoNavigation.js

@@ -5,6 +5,7 @@ import {
 import SelectPhoto from "../screens/Photo/SelectPhoto";
 import TakePhoto from "../screens/Photo/TakePhoto";
 import UploadPhoto from "../screens/Photo/UploadPhoto";
+import { stackStyles } from "./config";
 
 const PhotoTabs = createMaterialTopTabNavigator(
   {
@@ -16,7 +17,16 @@ const PhotoTabs = createMaterialTopTabNavigator(
   }
 );
 
-export default createStackNavigator({
-  PhotoTabs,
-  UploadPhoto
-});
+export default createStackNavigator(
+  {
+    PhotoTabs,
+    UploadPhoto
+  },
+  {
+    defaultNavigationOptions: {
+      headerStyle: {
+        ...stackStyles
+      }
+    }
+  }
+);

navigation/TabNavigation.js

@@ -11,14 +11,15 @@ import Profile from "../screens/Tabs/Profile";
 import MessagesLink from "../components/MessagesLink";
 import { View } from "react-native";
 import NavIcon from "../components/NavIcon";
+import { stackStyles } from "./config";
 
 const stackFactory = (initialRoute, customConfig) =>
   createStackNavigator({
     InitialRoute: {
       screen: initialRoute,
       navigationOptions: {
         ...customConfig,
-        headerStyle: { backgroundColor: "#EFEEEF" }
+        headerStyle: { ...stackStyles }
       }
     }
   });
@@ -104,8 +105,8 @@ export default createBottomTabNavigator(
   {
     tabBarOptions: {
       showLabel: false,
-      tabStyle: {
-        backgroundColor: "#EFEEEF"
+      style: {
+        backgroundColor: "#FAFAFA"
       }
     }
   }

navigation/config.js

@@ -0,0 +1,3 @@
+export const stackStyles = {
+  backgroundColor: "#FAFAFA"
+};

screens/Tabs/Home.js

@@ -1,16 +1,15 @@
 import React from "react";
 import styled from "styled-components";
+import Loader from "../../components/Loader";
 
 const View = styled.View`
   justify-content: center;
   align-items: center;
   flex: 1;
 `;
 
-const Text = styled.Text``;
-
 export default () => (
   <View>
-    <Text>Home</Text>
+    <Loader />
   </View>
 );