Build (#4)

* stable for build * design bug fixed
0ME9A · Jul 10, 2023 · 2bb20cc · 2bb20cc
1 parent 23aff48
commit 2bb20cc
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 51 deletions.
diff --git a/App.jsx b/App.jsx
@@ -1,4 +1,5 @@
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 import { NavigationContainer } from "@react-navigation/native";
 import { openDatabase } from "./src/functions/functions";
 import { AppProvider } from "./src/Contexts/Contexts";
@@ -30,14 +31,16 @@ export default function App() {
   if (!appReady) return <SplashScreen />;
 
   return (
-    <AppProvider>
-      <NavigationContainer>
-        <Stack.Navigator screenOptions={{ headerShown: false }}>
-          <Stack.Screen name="Home" component={Home} />
-          <Stack.Screen name="Details" component={Details} />
-          <Stack.Screen name="History" component={History} />
-        </Stack.Navigator>
-      </NavigationContainer>
-    </AppProvider>
+    <SafeAreaProvider style={{backgroundColor: ""}}>
+      <AppProvider>
+        <NavigationContainer>
+          <Stack.Navigator screenOptions={{ headerShown: false }}>
+            <Stack.Screen name="Home" component={Home} />
+            <Stack.Screen name="Details" component={Details} />
+            <Stack.Screen name="History" component={History} />
+          </Stack.Navigator>
+        </NavigationContainer>
+      </AppProvider>
+    </SafeAreaProvider>
   );
 }
diff --git a/assets/favicon.png b/assets/favicon.png
diff --git a/assets/splash.png b/assets/splash.png
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -1,10 +1,13 @@
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Feather, Ionicons } from "@expo/vector-icons";
 import { Pressable, View, Text } from "react-native";
 import { StyleSheet } from "react-native";
 
 export default function Navbar({ brand, navigation }) {
+  const insets = useSafeAreaInsets();
+
   return (
-    <View style={styles.navbar}>
+    <View style={[styles.navbar, {paddingTop: insets.top}]}>
       {brand ? (
         <Text style={styles.brand}>ForgeScan</Text>
       ) : (
@@ -23,7 +26,6 @@ const styles = StyleSheet.create({
   navbar: {
     display: "flex",
     alignItems: "flex-end",
-    paddingTop: 50,
     flexDirection: "row",
     justifyContent: "space-between",
   },

diff --git a/src/screens/Details.jsx b/src/screens/Details.jsx
@@ -116,7 +116,7 @@ const styles = StyleSheet.create({
   },
   responseContainer: {
     flex: 1,
-    padding: 20,
+    paddingHorizontal: 20,
     gap: 10,
   },
   responseSubContainer: {

diff --git a/src/screens/History.jsx b/src/screens/History.jsx
@@ -11,6 +11,7 @@ import {
 } from "@expo/vector-icons";
 
 import AlertBox from "../components/AlertBox";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 const db = SQLite.openDatabase("myDatabase.db");
 
@@ -26,6 +27,8 @@ export default function Home({ navigation }) {
     color: null,
   });
 
+  const insets = useSafeAreaInsets();
+
   const handleCheckbox = () => {
     if (isCheck) {
       setCheck(false);
@@ -125,48 +128,48 @@ export default function Home({ navigation }) {
 
   return (
     <View style={styles.container}>
-      <View style={styles.responseContainer}>
-        <View style={styles.headerContainer}>
-          <Text
-            style={{
-              fontSize: 20,
-            }}
-          >
-            History
-          </Text>
+      <View style={[styles.headerContainer, { paddingTop: 50 }]}>
+        <Text
+          style={{
+            fontSize: 20,
+          }}
+        >
+          History
+        </Text>
 
-          <View style={{ flexDirection: "row", gap: 16, alignItems: "center" }}>
-            {isDelete ? (
-              <Pressable onPress={handleAllDelete}>
-                <MaterialIcons name="delete-forever" size={24} color="black" />
-              </Pressable>
+        <View style={{ flexDirection: "row", gap: 16, alignItems: "center" }}>
+          {isDelete ? (
+            <Pressable onPress={handleAllDelete}>
+              <MaterialIcons name="delete-forever" size={24} color="black" />
+            </Pressable>
+          ) : (
+            <MaterialIcons
+              name="delete-forever"
+              size={24}
+              color="black"
+              style={{ opacity: 0.3 }}
+            />
+          )}
+          <View style={{ borderWidth: 1, opacity: 0.1, height: "50%" }} />
+          <Pressable onPress={handleCheckbox}>
+            {isCheck ? (
+              <MaterialIcons name="check-box" size={24} color="black" />
             ) : (
               <MaterialIcons
-                name="delete-forever"
+                name="check-box-outline-blank"
                 size={24}
                 color="black"
-                style={{ opacity: 0.3 }}
               />
             )}
-            <View style={{ borderWidth: 1, opacity: 0.1, height: "50%" }} />
-            <Pressable onPress={handleCheckbox}>
-              {isCheck ? (
-                <MaterialIcons name="check-box" size={24} color="black" />
-              ) : (
-                <MaterialIcons
-                  name="check-box-outline-blank"
-                  size={24}
-                  color="black"
-                />
-              )}
-            </Pressable>
-          </View>
+          </Pressable>
         </View>
-        {alertBox.message && (
-          <View style={{ marginTop: -10 }}>
-            <AlertBox message={alertBox.message} color={alertBox.color} />
-          </View>
-        )}
+      </View>
+      {alertBox.message && (
+        <View style={{ marginTop: -10 }}>
+          <AlertBox message={alertBox.message} color={alertBox.color} />
+        </View>
+      )}
+      <View style={styles.responseContainer}>
         <ScrollView>
           <View style={styles.responseSubContainer}>
             {historyDb &&
@@ -232,7 +235,6 @@ const styles = StyleSheet.create({
     borderBottomWidth: 2,
     borderColor: "#CED0FF",
     padding: 20,
-    paddingTop: 60,
   },
   footer: {},
   actionsContainer: {
@@ -249,15 +251,14 @@ const styles = StyleSheet.create({
   iconContainer: {},
   responseContainer: {
     flex: 1,
-    // padding: 20,
     gap: 10,
   },
   responseSubContainer: {
     flex: 1,
-    paddingHorizontal: 20,
     paddingBottom: 100,
     gap: 5,
     overflow: "scroll",
+    padding: 10
   },
   primeAction: {
     padding: 10,

diff --git a/src/screens/Home.jsx b/src/screens/Home.jsx
@@ -69,8 +69,6 @@ export default function Home({ navigation }) {
 
   return (
     <View style={styles.container}>
-      <Navbar brand={true} navigation={navigation} />
-
       {alertBox && <AlertBox message={alertBox} />}
 
       {isFocus && <Cam flash={flashlightOn ? 2 : 0} zoom={value} />}