Header blur effect on scroll

[nandorojo]

GitHub's iOS app doesn't show the header blur until you've scrolled down. Is there a way to achieve this? Perhaps with animating in the blur as you scroll?

Upload.from.GitHub.for.iOS.MOV

[WoLewicki]

Cannot you use navigation.setOptions with blurEffect based on the scroll position?

[nandorojo]

similarly, is there a way to add headerBottomContent like these pills on the GitHub notifications that are sticky under the title?

Upload.from.GitHub.for.iOS.MOV

[WoLewicki]

Upload.from.GitHub.for.iOS.MOV
iMessage has the faded blur header.

Can't you achieve something like this with something like such configuration of header:

screenOptions={{
        headerTranslucent: true,
        headerStyle: {
          backgroundColor: 'transparent',
          blurEffect: 'systemUltraThinMaterialDark',
        },
        headerLargeStyle: {
          backgroundColor: 'black',
        },
        headerLargeTitle: true,
}}

and dark theme on the NavigationContainer ?

similarly, is there a way to add headerBottomContent like these pills on the GitHub notifications that are sticky under the title?

Upload.from.GitHub.for.iOS.MOV

I think it is achieved in native apps just by sticky header in ScrollView. Is it not possible to do something like this in your project too?

[cnhhoang850]

This is the way

[EvanBacon]

@WoLewicki this no longer works in SDK 52 / React Navigation v7 / [email protected]. The headerLargeStyle.backgroundColor is not respected and the header stays blurry.

[EvanBacon]

These two changes get closer:

• fix(iOS): add missing largeTitleBackgroundColor prop #2500
• feat: add support for transparent large header on iOS #2501

Main thing I'm not sure about is which blurStyle to use to match the default.

[Karthik-B-06]

@nandorojo I tried to achieve a blur effect on the scroll. It was unable to upload a video, file size was high. Can you check the video here, and tell me if it is close to what you wanted to achieve?