Clean up header. Add theme.

components/default/ParallaxScrollView.tsx

@@ -1,28 +1,31 @@
 import type { PropsWithChildren, ReactElement } from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ViewStyle, StyleProp } from 'react-native';
 import Animated, {
   interpolate,
   useAnimatedRef,
   useAnimatedStyle,
   useScrollViewOffset,
 } from 'react-native-reanimated';
-import { ThemedView } from '@/components/theme/Theme';
+import { ThemedText, ThemedView } from '@/components/theme/Theme';
 import { useBottomTabOverflow } from '@/components/ui/TabBarBackground';
+import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 
-const HEADER_HEIGHT = 250;
+const HEADER_HEIGHT = 150;
 
 type Props = PropsWithChildren<{
-  headerImage: ReactElement;
-  headerBackgroundColor: { dark: string; light: string };
+  headerImage?: ReactElement;
+  headerBackgroundColor?: { dark: string; light: string };
   headerHeight?: number;
+  headerTitle?: ReactElement;
 }>;
 
 const ParallaxScrollView = ({
   children,
-  headerImage,
-  headerBackgroundColor,
+  headerImage = <ThemedView />,
+  headerBackgroundColor = { light: Colors.light.accent, dark: Colors.dark.accent },
   headerHeight = HEADER_HEIGHT,
+  headerTitle = <ThemedText />,
 }: Props) => {
   const scheme = useColorScheme() ?? 'dark';
   const scrollRef = useAnimatedRef<Animated.ScrollView>();
@@ -64,6 +67,7 @@ const ParallaxScrollView = ({
           ]}
         >
           {headerImage}
+          {headerTitle}
         </Animated.View>
         <ThemedView style={styles.content}>{children}</ThemedView>
       </Animated.ScrollView>
@@ -73,6 +77,9 @@ const ParallaxScrollView = ({
 export default ParallaxScrollView;
 
 const styles = StyleSheet.create({
+  blank: {
+
+  },
   container: {
     flex: 1,
   },