I would like to request a feature for the ability to customize the style of the top nav bar. Currently, I am unable to use black as a background color and would appreciate the option to pass my own styles that override default styles.

I would like to change background color, elevation, paddingTop.

Thank you.

Pleaske make props for theese 2 CSS settings so we can put 0 as elevation and transparent for header.

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @kanelloc/[email protected] 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;
+
 };

Does it support the pull-to-refresh feature?

I was trying to set a custom StatusBar color because my app has a theme, but it refused to update. I thought I was doing something wrong, but from debugging, I saw that you have a fixed color for the StatusBar on this line.

TLDR: Are there any intentions to make it extensible? like p ass in light | dark as StatusBar props.

I also noticed that the lib is light themed by default; it would be nice if we could pass in colors as parameters, with fallbacks.

Right now, I want to patch the package to fit my needs; please let me know if you intend to integrate this, so that I may fork and create a PR.

Thank you for the wonderful package!

Sorry for the shitty title, but it's really hard to describe.

My app has a light and a dark mode and everything works really smoothly, except when I'm in dark mode and scroll up a white view becomes visible that I do not seem to have control over.
Here are 2 screenshots, that hopefully can explain the issue better:

This is the view when everything is scrolled down. You can see that the red area covers everything. But when I scroll up, that white/redish area right above the red part becomes visible and will stay there when everything is all scrolled up. It appears to be the view that manages the fade out effect.

Am I missing something? Is there some kind of property that controls the color of this view?

Thanks a lot,
Chris

// Edit
Here's a quick video of what I'm seeing, maybe that helps: https://imgur.com/a/fWGZ7Bn

Currently I have an issue with header image aspect ratio. Can you do explain what default numbers used by this library? Because when I force to use aspect ration on props, the whole screen got affected not just only the header.

Hope you reply my message. Thanks in advance.

@kanelloc-deploy Please check the video, header is not clickable may be some overlapping on there, please let me know if I am doing something wrong.

Hi, I have an issue regarding the top bar on android devices. The height is bigger than iOS -- seems like the top had a big padding on it. You have a props headerMaxHeight but it doesn't work good with what I want it to be.

Hope you can figure it out on your android devices. The library was cool and really like it!
Thanks in advance.

Hi, I was wondering if there is any way to access the ref of the internal ScrollView of this component to call the scrollTo method? If not, is there any way to scroll to a certain item in the AnimatedScrollView?

Thanks!

Hey, thank you so much for creating this awesome package! Is it somehow possible to use the default header from react-navigation? Thank you!

Possible to implement something like expo-image?

Error: Style property 'zIndex' is not supported by native animated module
`
export default function ParentHabitHomePage (){

const data = Array.from(Array(20).keys());
return (
    <AnimatedScrollView
        headerMaxHeight={400}
        topBarHeight={80}
        TopNavBarComponent={<Text>TopNavBarComponent</Text>}
        headerImage={images.habit_home}
    >
        {data.map((e) => {
            return <Text>item</Text>
        })}
    </AnimatedScrollView>
);

};
`

"@kanelloc/react-native-animated-header-scroll-view": "^1.0.0",

I want to disable the vertical scrollView Indicator

I'd like to position a sticky/fixed element inside the header that the will be covered by the scrollable content. When the user scrolls, I want the element inside the header to remain in place while the header shrinks and the content covers it. I've tried adding the element to the HeaderNavbarComponent because it is fixed, but that component sits on top of the scrollable content instead of below it. I've tried messing with z-indexes but nothing seems to work. Is there a way to do this?