bug: SurfaceComponent property of header doesn't work if provide header style background color

[shashanksoul]

Description

if we provide the headerStyle with a background property and use the SurfaceComponent property, the SurfaceComponent does not appear even after scrolling.

Reproduction

Please describe the steps required to reproduce the issue, including any relevant code snippets, error messages, or screenshots.

1. setup SectionListWithHeaders Component with Header and LargeHeader Components
2. add background color to Header component via headerStyle prop
3. add surface component in header via surfaceComponent prop
4. try to scroll screen

Expected behavior

should change header background color with surface component color

https://github.com/codeherence/react-native-header/assets/46104967/d8f78125-b121-4d65-a778-254e88a5f86f

Actual behavior

seeing same header background color. surface component color does not show up.

import React, {useEffect} from 'react';
import {StyleSheet, Text} from 'react-native';

import {
  FadingView,
  Header,
  ScrollHeaderProps,
  SurfaceComponentProps,
} from '@codeherence/react-native-header';
import {useNavigation} from '@react-navigation/native';
import Icon from 'react-native-vector-icons/MaterialIcons';

import styles from './styles';

const SURFACE_BG_COLOR = 'green';

const HeaderSurface: React.FC<SurfaceComponentProps> = ({showNavBar}) => (
  <FadingView
    opacity={showNavBar}
    // StyleSheet.absoluteFill is needed to ensure that the component fills up the header.
    style={[
      StyleSheet.absoluteFillObject,
      {backgroundColor: SURFACE_BG_COLOR},
    ]}>
    <Text>Hello View</Text>
  </FadingView>
);

const CustomHeaderComponent: React.FC<ScrollHeaderProps> = ({showNavBar}) => {
  const navigation = useNavigation();
  const onPressBackButton = () => navigation.goBack();
  return (
    <Header
      showNavBar={showNavBar}
      headerStyle={{backgroundColor: 'red'}}
      headerCenterStyle={styles.headerCenterStyle}
      headerLeftStyle={styles.headerLeftStyle}
      noBottomBorder
      SurfaceComponent={HeaderSurface}
      headerLeft={
        <Icon
          onPress={onPressBackButton}
          color="black"
          size={30}
          name="arrow-back"
        />
      }
      headerCenter={<Text style={styles.headerTitleStyle}>Settings</Text>}
    />
  );
};

export default CustomHeaderComponent;

https://github.com/codeherence/react-native-header/assets/46104967/e93b3236-98b0-4e17-8ef2-1ebb2a47b9e1

Environment

react-native-header	v0.73.3
Platform & OS (if applicable)	only tested on Android
Device (if applicable)	pixel 6a api 31 emulator
react-native-reanimated	v3.6.2
react-native-safe-area-context	v4.8.2

[e-younan]

Thanks for reporting this. I will review the API a bit more but in the meantime, you can use an Animated.View instead of a FadingView, and interpolate the showNavBar to change between red and green.

[shashanksoul]

Thanks for the reply. I updated the HeaderSurfaceComponent with Animated.View as you suggested, and now it’s working.

//To show custom color when user scrolls screen
const HeaderSurface: React.FC<SurfaceComponentProps> = ({showNavBar}) => {
  const bgColor = useDerivedValue(() => {
    return interpolateColor(
      showNavBar.value,
      [0, 1],
      ['#D7D9D8', SURFACE_BG_COLOR],
    );
  });

  const animatedStyle = useAnimatedStyle(() => {
    return {
      backgroundColor: bgColor.value,
    };
  });
  return (
    <Animated.View style={[StyleSheet.absoluteFillObject, animatedStyle]} />
  );
};

https://github.com/codeherence/react-native-header/assets/46104967/c93d2de1-2f95-4bfc-bdc6-caf2fde6b246