kanelloc/react-native-animated-header-scroll-view

React native animated header ScrollView & FlatList. Animates an image or a custom component into a navbar header.

Hey! 👋

I'm Babis. I build things mostly using a computer.
For more information about me, check out kanelloc.com

---

💻 Activity

react-native-animated-header-scroll-view's Issues

Added function to change background color of 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;
+
 };

Use header from react-navigation

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

Is there a way to make a header element sit below the scrollable content?

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?

Header not clickable

@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.

Screen.Recording.2023-09-30.at.11.37.40.AM.mov

Accessing the ref of the internal ScrollView to use scrollTo() method?

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!

Fix white header visible when we scroll down

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

What numbers for header image aspect ratio?

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.

Override the default StatusBar color.

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!

Any way to disable the vertical scrollView

I want to disable the vertical scrollView Indicator

TopNavBarComponent styles

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.

Weird white view

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

Any way to prevent flicker when loading headerImage?

Possible to implement something like expo-image?

Top Bar Height on Android

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.

Refreshing support

Does it support the pull-to-refresh feature?

Error: Style property 'zIndex' is not supported by native animated module

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",