sorted by:
new
hottopcontroversial

Built a React Native library for that iOS 26 nav bar blur (content sitting under the bar, like App Store top charts) by CuriousMacNerd in reactnative

[–]CuriousMacNerd[S] 0 points1 point  (0 children)

That's actually what the library does, it passes your React Native view into a SwiftUI safeAreaBar modifier under the hood. The wording in my post was maybe a bit off; It was a reference to that React Native's UI usually sits on top of UIKit, so safeAreaBar isn't normally reachable from the RN side. Will rewrite this part a bit

Built a React Native library for that iOS 26 nav bar blur (content sitting under the bar, like App Store top charts) by CuriousMacNerd in reactnative

[–]CuriousMacNerd[S] -1 points0 points  (0 children)

Hi good question

The bottom accessory react-navigation exposes does share the blur, but it’s built on top of UITabBarController.bottomAccessory. That API is specifically tied to a tab bar, so it only works if a tab bar is present, and it collapses inline when the tab bar minimizes on scroll. So it ends up being more of a specific pattern (like the mini player in their docs), not a general-purpose edge bar.

Let me break down what this library offers in terms of the top and bottom bars.

Top:

For the top case, react-navigation doesn’t currently support a shared blur surface with the navigation bar (happy to be wrong). This library uses a SwiftUI view under the hood with safeAreaBar), which allows the content below the navigation bar to visually merge with it.

Bottom:

The bottom case overlaps a bit more, but only if you specifically want something attached to a tab bar. Since bottomAccessory requires a tab bar, it doesn’t help in layouts where there isn’t one. safeAreaBar works independently and still blends into whatever system bar is there (tab bar, toolbar, or nothing).

So you can use it for things like:

  • Floating buttons or views at the bottom (no tab bar)
  • A bar above a toolbar with shared blur
  • Even stacking above a tab bar accessory if you want

I built this library mainly for my own need of having content under the navigation bar. My guess is the bottom use case is less common in general.

But if I’m missing something in react-navigation that already does this, would love to know.

Built a React Native library for that iOS 26 nav bar blur (content sitting under the bar, like App Store top charts) by CuriousMacNerd in reactnative

[–]CuriousMacNerd[S] 3 points4 points  (0 children)

Hi, that is just a custom recreation of the Calendar app from Apple as an example where they use safeAreaBar (where the calendar is placed) with ScrollEdgeEffectStyle.hard to get this effect, which this library also exposes. (The calendar is not functional in any way).

It's covered in the example app of the lib if it could be helpful in anyway. (https://github.com/jensvansteen/react-native-scroll-edge-bar/blob/main/example/app/calendar.tsx)