feat: introduce bottom border color interpolation

Key Highlights:
- Introduce a new prop `initialBorderColor` in `Header` component to
  allow users to set the color of the bottom border.
- Ensured that the bottom border color animates between the initial
  color and the final color when the scroll container is scrolled down.

Author: e-younan

docs/docs/03-api-reference/05-header.mdx

@@ -73,6 +73,11 @@ you should set this to `true`.
 An optional boolean to indicate whether the header should not have a bottom border. Defaults to
 `false`.
 
+### initialBorderColor
+
+An optional color to use for the header's bottom border color initially. When the user scrolls down,
+the color will animate to the supplied [borderColor](/docs/components/header#bordercolor). Defaults to `#E5E5E5`.
+
 ### borderColor
 
 An optional color to use for the header's bottom border. Defaults to `#E5E5E5`.

example/src/screens/usage/Simple.tsx

@@ -21,6 +21,8 @@ const HeaderComponent: React.FC<ScrollHeaderProps> = ({ showNavBar }) => {
     <Header
       showNavBar={showNavBar}
       headerCenterFadesIn={false}
+      borderColor="red"
+      initialBorderColor="blue"
       headerCenter={
         <Text style={styles.navBarTitle} numberOfLines={1}>
           Header
@@ -79,6 +81,8 @@ const Simple: React.FC<SimpleUsageScreenNavigationProps> = () => {
       HeaderComponent={HeaderComponent}
       LargeHeaderComponent={LargeHeaderComponent}
       LargeHeaderSubtitleComponent={LargeHeaderSubtitleComponent}
+      automaticallyAdjustsScrollIndicatorInsets={false}
+      scrollIndicatorInsets={{ bottom }}
       contentContainerStyle={{ paddingBottom: bottom }}
       refreshControl={
         <RefreshControl refreshing={refreshing} colors={['#8E8E93']} onRefresh={onRefresh} />

package.json

@@ -151,7 +151,8 @@
     "singleQuote": true,
     "tabWidth": 2,
     "trailingComma": "es5",
-    "useTabs": false
+    "useTabs": false,
+    "printWidth": 100
   },
   "react-native-builder-bob": {
     "source": "src",

src/components/headers/Header.tsx

@@ -23,6 +23,7 @@ const Header: React.FC<HeaderProps> = ({
   noBottomBorder = false,
   ignoreTopSafeArea = false,
   borderColor,
+  initialBorderColor,
   borderWidth,
   SurfaceComponent,
 }) => {
@@ -113,6 +114,7 @@ const Header: React.FC<HeaderProps> = ({
         <HeaderBottomBorder
           opacity={showNavBar}
           borderColor={borderColor}
+          initialBorderColor={initialBorderColor}
           borderWidth={borderWidth}
         />
       )}

src/components/headers/types.ts

@@ -107,6 +107,13 @@ export interface HeaderProps {
    * @type {boolean}
    */
   noBottomBorder?: boolean;
+  /**
+   * The color of the border when the header is not scrolled up.
+   *
+   * @default '#E5E5E5'
+   * @type {string}
+   */
+  initialBorderColor?: string;
   /**
    * The color of the bottom border.
    *

src/components/line/HeaderBottomBorder.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, StyleProp, ViewStyle } from 'react-native';
-import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import Animated, { interpolateColor, useAnimatedStyle } from 'react-native-reanimated';
 
 interface HeaderBottomBorderProps {
   /**
@@ -13,6 +13,10 @@ interface HeaderBottomBorderProps {
    * Style of the bottom border component.
    */
   style?: StyleProp<ViewStyle>;
+  /**
+   *
+   */
+  initialBorderColor?: string;
   /**
    * Color of the bottom border.
    *
@@ -30,21 +34,18 @@ interface HeaderBottomBorderProps {
 const HeaderBottomBorder: React.FC<HeaderBottomBorderProps> = ({
   opacity,
   style,
+  initialBorderColor = '#E5E5E5',
   borderColor = '#E5E5E5',
   borderWidth = 1,
 }) => {
-  const borderBottomStyle = useAnimatedStyle(() => ({ opacity: opacity.value }));
-
-  return (
-    <Animated.View
-      style={[
-        styles.line,
-        borderBottomStyle,
-        { height: borderWidth, backgroundColor: borderColor },
-        style,
-      ]}
-    />
+  const borderBottomStyle = useAnimatedStyle(
+    () => ({
+      backgroundColor: interpolateColor(opacity.value, [0, 1], [initialBorderColor, borderColor]),
+    }),
+    [initialBorderColor, borderColor]
   );
+
+  return <Animated.View style={[styles.line, borderBottomStyle, { height: borderWidth }, style]} />;
 };
 
 export default HeaderBottomBorder;