removed navigation header border

App.js

@@ -114,17 +114,14 @@ export function MyApp() {
     colors: {
       ...DefaultTheme.colors,
       background: appContext.appTheme.backgroundColor,
+      border: "transparent",
     },
   };
 
   return (
     <SafeAreaView style={{ flex: 1 }}>
       <NavigationContainer theme={navigatonTheme}>
-        <Stack.Navigator
-          screenOptions={{
-            headerTitleAlign: "center",
-          }}
-        >
+        <Stack.Navigator screenOptions={{ headerTitleAlign: "center" }}>
           <Stack.Screen
             name="drawer"
             component={MyDrawer}
@@ -337,6 +334,7 @@ export function MyApp() {
   );
 }
 
+// This is for the left sidebar navigation
 function MyDrawer() {
   const appContext = useContext(AppContext);
 
@@ -344,10 +342,10 @@ function MyDrawer() {
     <Drawer.Navigator
       screenOptions={{
         headerShown: false,
-        headerStyle: {
-          backgroundColor: appContext.appTheme.backgroundColor,
-        },
-        headerTintColor: appContext.appTheme.text,
+        //headerStyle: {
+        //  backgroundColor: appContext.appTheme.backgroundColor,
+        //},
+        //headerTintColor: appContext.appTheme.text,
         drawerStyle: {
           backgroundColor: appContext.appTheme.drawer.backgroundColor,
         },
@@ -448,6 +446,7 @@ function getScreenStackOptions(
       </TouchableOpacity>
     ),
     headerTintColor: headerTintColor,
+    headerTitleAlign: "center",
     headerStyle: {
       backgroundColor: headerBackgroundColor,
       height: IsPlatformIos() ? 76 : 56,