Adding a blurred background on the header

[YannickDot]

I am currently trying to replicate the behavior found in some native iOS apps where when the content is scrolled, the header is shown with a blurred/translucent background.

How can I implement something like this using react-native-header?

https://github.com/codeherence/react-native-header/assets/4729938/9b0d3889-3ab1-417a-b0c2-4b94348f1fb5

The SurfaceComponent prop of Header seems to work well to set a BlurView as the background of the header. I can clearly see that the header background changed. I just cannot make the header to be above the scrolling content.

I tried setting "position: absolute, zIndex: 1000" on the header and a paddingTop on the ScrollView, but it doesn't work as I expected. Maybe I am looking in the wrong direction.

Here is what I get :

https://github.com/codeherence/react-native-header/assets/4729938/0e5b0827-b2b6-4254-bacc-cbbb02755306

Here is my code for the Header :

const HeaderSurface: React.FC<SurfaceComponentProps> = ({ showNavBar }) => {
  return (
    <FadingView opacity={showNavBar} style={StyleSheet.absoluteFill}>
      <BlurView
        style={[StyleSheet.absoluteFill]}
        blurAmount={30}
        blurType="light"
      />
    </FadingView>
  );
};

const HeaderComponent: React.FC<ScrollHeaderProps> = ({ showNavBar }) => {
  const insets = useSafeAreaInsets();
  return (
    <Header
      showNavBar={showNavBar}
      headerStyle={{
        height: 44 + insets.top,
        position: "absolute",
        zIndex: 1000,
        top: 0,
        left: 0,
        right: 0,
      }}
      headerCenter={
        <Text style={{ fontSize: 16, fontWeight: "bold" }}>
          react-native-header
        </Text>
      }
      SurfaceComponent={HeaderSurface}
    />
  );
};

[e-younan]

I'm trying to reproduce this, and have modified the library to allow for a "transparent" background with some kind of padding (that you referenced here). I ran into an issue with BlurView though that apparently requires workarounds.

See the following:

• https://github.com/Kureev/react-native-blur/issues/317
• https://github.com/Kureev/react-native-blur/issues/126

There are more issues, but the gist is that when the opacity of the BlurView is not 1, the content under it does not update as you scroll. Here is a video demonstrating what I mean:

https://github.com/codeherence/react-native-header/assets/128341688/ebc7d20b-fed4-4dbd-8776-191343bf4878

I'll try to see if I can get the BlurView working and add it as an example in the example application.

[e-younan]

I figured it out - I will have a PR up in a bit with some adjustments to the API to allow for absolute headers and BlurViews. This will include an example that looks like this:

https://github.com/codeherence/react-native-header/assets/128341688/de2ad6d8-744e-4d57-8481-96afde43bbfb

[e-younan]

I just released this feature - let me know if it works: https://github.com/codeherence/react-native-header/releases/tag/v0.9.0

[YannickDot]

Thank you, this is perfect!

https://github.com/codeherence/react-native-header/assets/4729938/c3841d7b-c739-4a3a-9b45-d1d79af20b79