BlurView incorrectly layered above child components in New Arch

[gerzonc]

Hello everyone, my current issue is that a couple of my components render with the BlurView on top of them when moving to the New Arch. Currently I have only tested on iOS. Here is a comparison of my header:

Old Arch	New Arch

Here is my sample project to check it out

[tvooo]

+1 Can confirm, this also happened once we switched our app to new arch.

[csorfab]

+1 just upgraded to 0.76 where new architecure is enabled by default, and it rendered my components that use BlurView unusable. Anyone know a workaround for this?

[yuriiburov]

+1

"@react-native-community/blur": "4.4.1",
"react-native": "0.76.1"

[LuK3zz]

+1
"@react-native-community/blur": "4.4.0",
"react-native": "0.76.1"

[smfunder]

I'm getting the same with RN 0.76.1. I also tried blur 4.3.2 and 4.4.1 same issue. I disabled bridgeless option for RN 0.76.1.
Here are some comparing screenshots. Oh and it is happening in iOS and Android. In the case

[smfunder]

One quick solution for me was to place the BlurView in background and the remaining screen wrapped with a view with position: 'absolute' so it is over the blurView and not embebed in the blurView.

Example:

            <View style={{ width: normalize(297), height: 60 }}>
              <BlurView
                blurType="light"
                blurAmount={50}
              >
              </BlurView>
              <View style={{ position: 'absolute' }}>
                <OptionsMenu
                  options={menuOptions}
                  onOptionPress={!isWorkspaceSettingsFlow ? handleOptionMenu : null}
                />
              </View>
            </View>

[pistonsky]

I agree with @smfunder 's solution, but that's a lot of meaningless work to do. We really need a fix for this issue, please 🙏 This library is the last one having issues on the new architecture for my app!

[gerzonc]

I agree with @smfunder 's solution, but that's a lot of meaningless work to do. We really need a fix for this issue, please 🙏 This library is the last one having issues on the new architecture for my app!

My solution was to migrate to expo-blur. API is slightly different, but rather that than having to make a ton of changes across my entire app just to fix those issues.

With that said, I believe we could contribute in the future to fix this one, but as of now I'm just working with what is available.

[alexfoxy]

+1 also having this issue.