Open rumfiske opened 10 months ago
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.
@kanelloc/react-native-animated-header-scroll-view@1.0.0
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; + };
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: