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.

[A7medSa3ed]

any updates for this issue ?

[nedstar72]

Try this patch

diff --git a/node_modules/@react-native-community/blur/ios/BlurView.mm b/node_modules/@react-native-community/blur/ios/BlurView.mm
index 3d35d8f..709b60f 100644
--- a/node_modules/@react-native-community/blur/ios/BlurView.mm
+++ b/node_modules/@react-native-community/blur/ios/BlurView.mm
@@ -69,6 +69,17 @@ + (ComponentDescriptorProvider)componentDescriptorProvider
   return concreteComponentDescriptorProvider<BlurViewComponentDescriptor>();
 }
 
+- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+{
+  [self.blurEffectView.contentView insertSubview:(UIView *)childComponentView
+                                         atIndex:index];
+}
+
+- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+{
+  [(UIView *)childComponentView removeFromSuperview];
+}
+
 - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
 {
   const auto &oldViewProps = *std::static_pointer_cast<const BlurViewProps>(_props);

[k9027]

diff --git a/node_modules/@react-native-community/blur/ios/BlurView.mm b/node_modules/@react-native-community/blur/ios/BlurView.mm index 3d35d8f..709b60f 100644 --- a/node_modules/@react-native-community/blur/ios/BlurView.mm +++ b/node_modules/@react-native-community/blur/ios/BlurView.mm @@ -69,6 +69,17 @@ + (ComponentDescriptorProvider)componentDescriptorProvider return concreteComponentDescriptorProvider<BlurViewComponentDescriptor>(); }

+- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index +{

• [self.blurEffectView.contentView insertSubview:(UIView *)childComponentView

•                                     atIndex:index];
  

+} + +- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index +{

• [(UIView *)childComponentView removeFromSuperview]; +}

• (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps { const auto &oldViewProps = *std::static_pointer_cast<const BlurViewProps>(_props);

works fine for me.

[Gautham495]

@NedStar72 - This solved the issue for me in iOS.

Thanks.

[OmalPerera]

@NedStar72 Thanks a lot and works perfectly. 👏👏 Would you be interested in raising a PR with this change?

[saiyam-zepto-dev]

Any solution for android?

[bdtren]

Thanks @nedstar72 , it working!

Here is the file in case someone need it @react-native-community+blur+4.4.1.patch