Added function to change background color of header

[rumfiske]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @kanelloc/react-native-animated-header-scroll-view@1.0.0 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/@kanelloc/react-native-animated-header-scroll-view/src/components/AnimatedNavbar.tsx b/node_modules/@kanelloc/react-native-animated-header-scroll-view/src/components/AnimatedNavbar.tsx
index 31c373d..419bfef 100644
--- a/node_modules/@kanelloc/react-native-animated-header-scroll-view/src/components/AnimatedNavbar.tsx
+++ b/node_modules/@kanelloc/react-native-animated-header-scroll-view/src/components/AnimatedNavbar.tsx
@@ -10,6 +10,7 @@ const AnimatedNavbar = ({
   TopNavbarComponent,
   headerHeight,
   headerElevation,
+  backgroundColor,
 }: AnimatedNavbarProps) => {
   const [headerOpacity, overflowHeaderOpacity] = useAnimateNavbar(
     scroll,
@@ -25,6 +26,8 @@ const AnimatedNavbar = ({
           {
             zIndex: headerOpacity,
             height: headerHeight,
+            backgroundColor: backgroundColor, 
+
             opacity: headerOpacity,
             elevation: headerElevation,
           },
@@ -54,7 +57,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     top: 0,
     width: '100%',
-    backgroundColor: 'white',
+
     alignItems: 'center',
     justifyContent: 'center',
   },
diff --git a/node_modules/@kanelloc/react-native-animated-header-scroll-view/src/components/AnimatedScrollView.tsx b/node_modules/@kanelloc/react-native-animated-header-scroll-view/src/components/AnimatedScrollView.tsx
index 52fcf3e..fec7f71 100644
--- a/node_modules/@kanelloc/react-native-animated-header-scroll-view/src/components/AnimatedScrollView.tsx
+++ b/node_modules/@kanelloc/react-native-animated-header-scroll-view/src/components/AnimatedScrollView.tsx
@@ -22,6 +22,7 @@ export const AnimatedScrollView = forwardRef<
       disableScale,
       children,
       imageStyle,
+      backgroundColor,
       ...props
     }: AnimatedScrollViewProps,
     ref
@@ -52,6 +53,7 @@ export const AnimatedScrollView = forwardRef<
           {children}
         </Animated.ScrollView>
         <AnimatedNavbar
+          backgroundColor={backgroundColor}
           headerElevation={headerElevation}
           headerHeight={headerNavHeight}
           scroll={scroll}
diff --git a/node_modules/@kanelloc/react-native-animated-header-scroll-view/src/types.d.ts b/node_modules/@kanelloc/react-native-animated-header-scroll-view/src/types.d.ts
index 01b29fa..e81e09a 100644
--- a/node_modules/@kanelloc/react-native-animated-header-scroll-view/src/types.d.ts
+++ b/node_modules/@kanelloc/react-native-animated-header-scroll-view/src/types.d.ts
@@ -7,6 +7,12 @@ import type {
 import { Animated, ImageSourcePropType } from 'react-native';

 type AnimatedViewProps = {
+
+  /**
+   * Set a custom background color for the header
+   */
+  backgroundColor: string;
+
   /**
    * Rendered on top of the screen as a navbar when scrolling to the top
    */
@@ -65,6 +71,8 @@ export type AnimatedNavbarProps = {
   imageHeight: number;
   headerHeight: number;
   headerElevation: number;
+  backgroundColor: string;
+
 };

 export type AnimatedHeaderProps = {
@@ -73,6 +81,8 @@ export type AnimatedHeaderProps = {
   translateYDown: Animated.AnimatedInterpolation<string | number> | 0;
   scale: Animated.AnimatedInterpolation<string | number> | 1;
   imageStyle?: StyleProp<ImageStyle>;
+
   HeaderComponent?: JSX.Element;
   headerImage?: ImageSourcePropType;
+
 };