Fix colors and status bar colors

fosopenscouting · Nov 16, 2024 · 1b5fb8f · 1b5fb8f
1 parent 2a1c327
commit 1b5fb8f
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 27 deletions.
diff --git a/app/(tabs)/faq/_layout.tsx b/app/(tabs)/faq/_layout.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
 
-import { Stack, useFocusEffect } from 'expo-router';
+import { Stack } from 'expo-router';
 import SaamdagenAppbar from '@/components/SaamdagenAppbar';
 import Colors from '@/constants/Colors';
 import useColorScheme from '@/hooks/useColorScheme';
-import { setStatusBarStyle, StatusBar } from 'expo-status-bar';
 
 export const unstable_settings = {
   initialRouteName: 'index',
@@ -13,16 +12,11 @@ export const unstable_settings = {
 export default function MoreLayout() {
   const colorScheme = useColorScheme();
 
-  useFocusEffect(() => {
-    setStatusBarStyle(colorScheme == 'light' ? 'dark' : 'light');
-  });
-
   return (
     <>
       <Stack
         screenOptions={{
           header: (props) => <SaamdagenAppbar {...props} />,
-          headerTintColor: Colors[colorScheme].tabTextColor,
           headerStyle: Colors[colorScheme].tabBarStyle,
           headerTitleStyle: {
             fontFamily: 'Quicksand_600SemiBold',
@@ -36,11 +30,6 @@ export default function MoreLayout() {
           }}
         />
       </Stack>
-      <StatusBar
-        backgroundColor={Colors[colorScheme].tabBarStyle.backgroundColor}
-        animated={true}
-        style="light"
-      />
     </>
   );
 }
diff --git a/app/(tabs)/faq/index.tsx b/app/(tabs)/faq/index.tsx
@@ -6,14 +6,10 @@ import { useDataContext } from '@/hooks/useDataContext';
 import { ContentMetadata } from '@/models/ContentMetadata';
 import { FAQ_ITEMS } from '@/constants/Strings';
 import FaqCard from '@/components/FaqCard';
-import { useFocusEffect } from 'expo-router';
-import { setStatusBarStyle } from 'expo-status-bar';
-import useColorScheme from '@/hooks/useColorScheme';
 
 const FaqScreen: React.FC = () => {
   const { data, refreshContext, refreshing } = useDataContext();
   const [faqData, setFaqData] = useState<ContentMetadata>();
-  const colorScheme = useColorScheme();
 
   useEffect(() => {
     if (data) {
@@ -26,10 +22,6 @@ const FaqScreen: React.FC = () => {
     await refreshContext();
   };
 
-  useFocusEffect(() => {
-    setStatusBarStyle(colorScheme == 'light' ? 'dark' : 'light');
-  });
-
   return (
     <View style={styles.container}>
       <FlatList

diff --git a/app/(tabs)/more/_layout.tsx b/app/(tabs)/more/_layout.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
 
-import { Stack, useFocusEffect } from 'expo-router';
+import { Stack } from 'expo-router';
 import SaamdagenAppbar from '@/components/SaamdagenAppbar';
 import Colors from '@/constants/Colors';
 import useColorScheme from '@/hooks/useColorScheme';
-import { setStatusBarStyle } from 'expo-status-bar';
 
 export const unstable_settings = {
   initialRouteName: 'index',
@@ -13,10 +12,6 @@ export const unstable_settings = {
 export default function MoreLayout() {
   const colorScheme = useColorScheme();
 
-  useFocusEffect(() => {
-    setStatusBarStyle(colorScheme == 'light' ? 'dark' : 'light');
-  });
-
   return (
     <Stack
       screenOptions={{

diff --git a/components/SaamdagenAppbar.tsx b/components/SaamdagenAppbar.tsx
@@ -22,7 +22,10 @@ const SaamdagenAppbar: React.FC<NativeStackHeaderProps> = (
       {props.back ? (
         <Appbar.BackAction onPress={props.navigation.goBack} />
       ) : null}
-      <Appbar.Content title={title} />
+      <Appbar.Content
+        titleStyle={{ color: Colors[colorScheme].tabTextColor }}
+        title={title}
+      />
     </Appbar.Header>
   );
 };