inital commit

App.js

@@ -1,21 +1,24 @@
-import { StatusBar } from 'expo-status-bar';
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-
+import { StatusBar } from "expo-status-bar";
+import React 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";
 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>
-  );
+  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 />;
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
+    backgroundColor: Colors.primary,
+    justifyContent: "center",
   },
 });

app.json

@@ -1,7 +1,7 @@
 {
   "expo": {
-    "name": "test-project-v2",
-    "slug": "test-project-v2",
+    "name": "Breaking Bad App",
+    "slug": "Breaking-Bad-App",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
@@ -23,10 +23,12 @@
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#FFFFFF"
-      }
+      },
+      "package": "com.developedbynick.BreakingBadApp"
     },
     "web": {
       "favicon": "./assets/favicon.png"
-    }
+    },
+    "description": ""
   }
 }

components/Character.js

@@ -0,0 +1,71 @@
+import React from "react";
+import {
+  ImageBackground,
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity,
+} from "react-native";
+
+const Character = ({ character, navigation }) => {
+  const navigateHandler = () =>
+    navigation.navigate("CharacterProfile", character);
+
+  return (
+    <View
+      style={{
+        alignItems: "center",
+        justifyContent: "center",
+        marginBottom: 10,
+
+        overflow: "hidden",
+      }}
+    >
+      <TouchableOpacity
+        onPress={navigateHandler}
+        activeOpacity={0.9}
+        style={{
+          width: "85%",
+          height: 330,
+          justifyContent: "center",
+          alignItems: "center",
+          borderRadius: 5,
+          overflow: "hidden",
+          color: "white",
+        }}
+      >
+        <ImageBackground
+          source={{ uri: character.img }}
+          style={styles.bgImage}
+          resizeMode="cover"
+          resizeMethod={"resize"}
+        >
+          <View style={styles.nameContainer}>
+            <Text style={styles.name}> {character.name} </Text>
+          </View>
+        </ImageBackground>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  bgImage: {
+    width: "100%",
+    height: "100%",
+    justifyContent: "flex-end",
+  },
+  nameContainer: {
+    width: "100%",
+    minHeight: 30,
+    backgroundColor: "rgba(255,255,255,0.9)",
+    paddingVertical: 10,
+  },
+  name: {
+    fontFamily: "Quicksand-Bold",
+    fontSize: 18,
+    textTransform: "capitalize",
+    textAlign: "center",
+  },
+});
+export default Character;

components/Header.js

@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+import { StyleSheet, TextInput, View } from "react-native";
+import Constants from "expo-constants";
+const Header = ({ filterCharacters }) => {
+  const [query, setQuery] = useState("");
+  const placeholderText = `Search For A Specific Character!`;
+  const onChangeTextHandler = (text) => {
+    setQuery(text);
+    filterCharacters(text);
+  };
+  return (
+    <View style={styles.header}>
+      <TextInput
+        value={query}
+        placeholder={placeholderText}
+        style={styles.input}
+        onChangeText={onChangeTextHandler}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    width: "100%",
+    height: "10%",
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: Constants.statusBarHeight + 10,
+    paddingVertical: 30,
+    marginBottom: 20,
+  },
+  input: {
+    width: "90%",
+    minHeight: 55,
+    padding: 10,
+    backgroundColor: "white",
+    fontFamily: "Quicksand-Bold",
+    borderRadius: 5,
+  },
+});
+export default Header;

components/Problem.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+
+const Problem = (props) => {
+  return (
+    <View {...props} style={{ ...styles.container, ...props.style }}>
+      {props.children}
+    </View>
+  );
+};
+
+export default Problem;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

config.js

@@ -0,0 +1,2 @@
+export const baseUrl = `https://breakingbadapi.com/api/characters`;
+export const limiter = "?limit=";

constants/Colors.js

@@ -0,0 +1,4 @@
+export default {
+  primary: "#282c34",
+  secondary: "#6a7ca3",
+};

navigation/stackNavigator.js

@@ -0,0 +1,38 @@
+import { createAppContainer } from "react-navigation";
+import { createStackNavigator } from "react-navigation-stack";
+
+// Screens
+import Home from "../screens/Home";
+import CharacterProfile from "../screens/CharacterProfile";
+// Constants
+import Colors from "../constants/Colors";
+
+const StackNavigator = createStackNavigator(
+  {
+    Home: {
+      screen: Home,
+      navigationOptions: {
+        headerShown: false,
+      },
+    },
+    CharacterProfile: {
+      screen: CharacterProfile,
+    },
+  },
+  {
+    defaultNavigationOptions: {
+      headerStyle: {
+        backgroundColor: Colors.primary,
+        elevation: 0,
+      },
+      headerTintColor: "white",
+      headerTitleAlign: "left",
+      headerTitleStyle: {
+        fontFamily: "Quicksand-SB",
+        fontWeight: "500",
+      },
+    },
+  }
+);
+
+export default createAppContainer(StackNavigator);