v1.1.1

App.js

@@ -1,18 +1,109 @@
 import { StatusBar } from "expo-status-bar";
-import React from "react";
+import React, { useReducer } from "react";
 import { StyleSheet, Text, View } from "react-native";
 import { useFonts } from "expo-font";
 import Colors from "./constants/Colors";
-import Navigator from "./navigation/stackNavigator";
 import AppLoading from "expo-app-loading";
+import { enableScreens } from "react-native-screens";
+
+// Navigation Packages
+import { NavigationContainer } from "@react-navigation/native";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+// Contexts
+import { reducerInitalState, ReducerContext } from "./contexts";
+import reducer from "./contexts/reducer";
+// Screens and Icons
+import { Ionicons } from "@expo/vector-icons";
+import Favorites from "./screens/Favorites";
+import HomeAndProfileStack from "./components/HomeAndProfileStack";
+import FavoritesAndProfileStack from "./components/FavoritesAndProfileStack";
+// Navigators
+const Tabs = createBottomTabNavigator();
+
+enableScreens();
+
 export default function App() {
+  const [state, dispatch] = useReducer(reducer, reducerInitalState);
+
   const [fontsLoaded] = useFonts({
     Quicksand: require("./assets/fonts/Quicksand-Regular.ttf"),
     "Quicksand-SB": require("./assets/fonts/Quicksand-SemiBold.ttf"),
     "Quicksand-Bold": require("./assets/fonts/Quicksand-Bold.ttf"),
   });
   if (!fontsLoaded) return <AppLoading />;
-  return <Navigator />;
+
+  return (
+    <ReducerContext.Provider value={{ state, dispatch }}>
+      <NavigationContainer>
+        <StatusBar style="light" translucent={true} />
+
+        <Tabs.Navigator
+          tabBarOptions={{
+            style: {
+              borderTopWidth: 0,
+              height: 60,
+            },
+            showLabel: false,
+            activeTintColor: Colors.secondary,
+            inactiveTintColor: "rgba(0,0,0,0.5)",
+          }}
+        >
+          <Tabs.Screen
+            name="Home"
+            component={HomeAndProfileStack}
+            options={{
+              tabBarIcon: (props) => {
+                const focusedTextStyles = {
+                  color: props.color,
+                  fontFamily: "Quicksand-Bold",
+                };
+                return (
+                  <View style={styles.iconContainer}>
+                    <Ionicons
+                      name={props.focused ? "home" : "home-outline"}
+                      size={props.size}
+                      color={props.color}
+                    />
+                    <Text style={[styles.tabText, focusedTextStyles]}>
+                      Home
+                    </Text>
+                  </View>
+                );
+              },
+            }}
+          />
+          <Tabs.Screen
+            name="Favorites"
+            component={FavoritesAndProfileStack}
+            options={{
+              tabBarIcon: (props) => (
+                <View style={styles.iconContainer}>
+                  <Ionicons
+                    name={props.focused ? "star" : "star-outline"}
+                    size={props.size}
+                    color={props.color}
+                  />
+                  <Text
+                    style={[
+                      styles.tabText,
+                      {
+                        color: props.color,
+                        fontFamily: props.focused
+                          ? "Quicksand-Bold"
+                          : "Quicksand-SB",
+                      },
+                    ]}
+                  >
+                    Favorites
+                  </Text>
+                </View>
+              ),
+            }}
+          />
+        </Tabs.Navigator>
+      </NavigationContainer>
+    </ReducerContext.Provider>
+  );
 }
 
 const styles = StyleSheet.create({
@@ -21,4 +112,12 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.primary,
     justifyContent: "center",
   },
+  iconContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+    // width: 45,
+  },
+  tabText: {
+    fontFamily: "Quicksand-SB",
+  },
 });

app.json

@@ -2,13 +2,13 @@
   "expo": {
     "name": "Breaking Bad App",
     "slug": "Breaking-Bad-App",
-    "version": "1.0.0",
+    "version": "1.1.1",
     "orientation": "portrait",
-    "icon": "./assets/icon.png",
+    "icon": "./assets/icon1.png",
     "splash": {
-      "image": "./assets/splash.png",
-      "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
+      "image": "./assets/Splash1.png",
+      "resizeMode": "cover",
+      "backgroundColor": "#282c34"
     },
     "updates": {
       "fallbackToCacheTimeout": 0
@@ -21,8 +21,8 @@
     },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
-        "backgroundColor": "#FFFFFF"
+        "foregroundImage": "./assets/icon1.png",
+        "backgroundColor": "#6a7ca3"
       },
       "package": "com.developedbynick.BreakingBadApp"
     },

components/BoldText.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { StyleSheet, Text } from "react-native";
+
+const BoldText = (props) => {
+  return (
+    <Text {...props} style={[styles.boldText, props.style]}>
+      {props.children}
+    </Text>
+  );
+};
+
+export default BoldText;
+
+const styles = StyleSheet.create({
+  boldText: {
+    fontFamily: "Quicksand-Bold",
+  },
+});

components/Character.js

@@ -9,16 +9,16 @@ import {
 
 const Character = ({ character, navigation }) => {
   const navigateHandler = () =>
-    navigation.navigate("CharacterProfile", character);
+    navigation.navigate("CharacterProfile", { character });
 
   return (
     <View
       style={{
         alignItems: "center",
         justifyContent: "center",
-        marginBottom: 10,
+        marginBottom: 20,
 
-        overflow: "hidden",
+        // overflow: "hidden",
       }}
     >
       <TouchableOpacity
@@ -68,4 +68,4 @@ const styles = StyleSheet.create({
     textAlign: "center",
   },
 });
-export default Character;
+export default React.memo(Character);

components/FavoritesAndProfileStack.js

@@ -0,0 +1,54 @@
+import React from "react";
+import { createStackNavigator } from "@react-navigation/stack";
+import Favorites from "../screens/Favorites";
+import Colors from "../constants/Colors";
+import CharacterProfile from "../screens/CharacterProfile";
+import ProfileHeaderRight from "./ProfileHeaderRight";
+const Stack = createStackNavigator();
+const FavoritesAndProfileStack = () => {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="Favorites"
+        options={{ headerShown: false }}
+        component={Favorites}
+      />
+      <Stack.Screen
+        options={({ route }) => {
+          const { character } = route.params;
+
+          return {
+            headerTitle: character.name,
+            headerStyle: {
+              backgroundColor: Colors.primary,
+              elevation: 0,
+              shadowColor: "transparent",
+            },
+            headerTintColor: "white",
+            headerTitleStyle: {
+              fontFamily: "Quicksand-SB",
+            },
+            headerRight: () => <ProfileHeaderRight route={route} />,
+
+            headerRightContainerStyle: {
+              width: 50,
+              justifyContent: "center",
+              alignItems: "center",
+              height: "100%",
+            },
+            headerLeftContainerStyle: {
+              width: 50,
+              justifyContent: "center",
+              alignItems: "center",
+              height: "100%",
+            },
+          };
+        }}
+        name="CharacterProfile"
+        component={CharacterProfile}
+      />
+    </Stack.Navigator>
+  );
+};
+
+export default FavoritesAndProfileStack;

components/HomeAndProfileStack.js

@@ -0,0 +1,56 @@
+import { TouchableOpacity, View, Text } from "react-native";
+import Home from "../screens/Home";
+import CharacterProfile from "../screens/CharacterProfile";
+import React, { useState, useEffect } from "react";
+import { createStackNavigator } from "@react-navigation/stack";
+import Colors from "../constants/Colors";
+import { Ionicons } from "@expo/vector-icons";
+import ProfileHeaderRight from "./ProfileHeaderRight";
+const Stack = createStackNavigator();
+
+const HomeAndProfileStack = () => {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        options={{ headerShown: false }}
+        name="Home"
+        component={Home}
+      />
+      <Stack.Screen
+        options={({ route }) => {
+          const { character } = route.params;
+          const { char_id } = character;
+          return {
+            headerTitle: character.name,
+            headerStyle: {
+              backgroundColor: Colors.primary,
+              elevation: 0,
+              shadowColor: "transparent",
+            },
+            headerTintColor: "white",
+            headerTitleStyle: {
+              fontFamily: "Quicksand-SB",
+            },
+            headerRight: () => <ProfileHeaderRight route={route} />,
+
+            headerRightContainerStyle: {
+              width: 50,
+              justifyContent: "center",
+              alignItems: "center",
+              height: "100%",
+            },
+            headerLeftContainerStyle: {
+              width: 50,
+              justifyContent: "center",
+              alignItems: "center",
+              height: "100%",
+            },
+          };
+        }}
+        name="CharacterProfile"
+        component={CharacterProfile}
+      />
+    </Stack.Navigator>
+  );
+};
+export default HomeAndProfileStack;

components/ProfileHeaderRight.js

@@ -0,0 +1,47 @@
+import React, { useState, useEffect, useContext } from "react";
+import { ReducerContext } from "../contexts";
+import { ACTIONS } from "../contexts/reducer";
+import { StyleSheet, TouchableOpacity } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+const ProfileHeaderRight = ({ route }) => {
+  const context = useContext(ReducerContext);
+
+  const { character } = route.params;
+  const { char_id } = character;
+  const [starred, setStarred] = useState(false);
+  const toggleStar = () => setStarred(!starred);
+  useEffect(() => {
+    const isCharacterFavorited = context.state.favorites.some(
+      (fav) => fav.char_id === char_id
+    );
+    if (isCharacterFavorited) setStarred(true);
+    else setStarred(false);
+  }, [context.state.favorites.length]);
+
+  const toggleFavorites = () => {
+    if (starred) {
+      // If character is already starred, we should setStarred to false, and remove character from favorites
+      toggleStar();
+      const newFavs = context.state.favorites.filter(
+        (fav) => fav.char_id !== char_id
+      );
+      context.dispatch({ type: ACTIONS.REMOVE_FAVORITE, newFavs });
+    } else {
+      toggleStar();
+      context.dispatch({ type: ACTIONS.ADD_FAVORITE, character });
+    }
+  };
+  return (
+    <TouchableOpacity onPress={toggleFavorites}>
+      <Ionicons
+        name={starred ? "ios-star" : "star-outline"}
+        color={"white"}
+        size={23}
+      />
+    </TouchableOpacity>
+  );
+};
+
+export default ProfileHeaderRight;
+
+const styles = StyleSheet.create({});

contexts/index.js

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+
+export const ReducerContext = createContext();
+export const reducerInitalState = {
+  favorites: [],
+};

contexts/reducer.js

@@ -0,0 +1,19 @@
+export const ACTIONS = {
+  REMOVE_FAVORITE: "REMOVE_FAVORITE",
+  ADD_FAVORITE: "ADD_FAVORITE",
+};
+
+const reducer = (state, action) => {
+  if (action.type === ACTIONS.ADD_FAVORITE) {
+    return {
+      ...state,
+      favorites: [...state.favorites, { ...action.character }],
+    };
+  }
+  if (action.type === ACTIONS.REMOVE_FAVORITE) {
+    return { ...state, favorites: action.newFavs };
+  }
+  return { ...state };
+};
+
+export default reducer;