fix(iOS): extraLight blur not working (#2338)

maksg · kkafar · kkafar · commit da70a27ce0a1 · 2024-10-25T11:45:33.000+02:00
Blur style `UIBlurEffectStyleExtraLight` equals `0` so using it in `if (config.blurEffect)` makes it that the code for applying `backgroundEffect` doesn't execute. With this fix the navigation bar can no longer be fully transparent because blur effect is always set as `extraLight` by default. So it's up for a discussion if it should stay that way or if we should make this value optional. Fixes #2320. Added `Test2320` to tests. - [x] Included code example that can be used to test this change - [ ] Ensured that CI passes --------- Co-authored-by: Kacper Kafara <kacperkafara@gmail.com> (cherry picked from commit fcb1693)
diff --git a/apps/src/tests/Test2320.tsx b/apps/src/tests/Test2320.tsx
@@ -0,0 +1,56 @@
+import * as React from "react";
+import { ScrollView, Text } from "react-native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { NavigationContainer, useTheme } from "@react-navigation/native";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+
+const ArticleScreen = () => {
+  return (
+    <ScrollView contentInsetAdjustmentBehavior="automatic">
+      <Text style={{ fontSize: 30 }}>
+        Lorem Ipsum is simply dummy text of the printing and typesetting
+        industry. Lorem Ipsum has been the industry&apos;s standard dummy text
+        ever since the 1500s, when an unknown printer took a galley of type and
+        scrambled it to make a type specimen book. It has survived not only five
+        centuries, but also the leap into electronic typesetting, remaining
+        essentially unchanged. It was popularised in the 1960s with the release
+        of Letraset sheets containing Lorem Ipsum passages, and more recently
+        with desktop publishing software like Aldus PageMaker including versions
+        of Lorem Ipsum.
+        Contrary to popular belief, Lorem Ipsum is not simply random text. It
+        has roots in a piece of classical Latin literature from 45 BC, making it
+        over 2000 years old. Richard McClintock, a Latin professor at
+        Hampden-Sydney College in Virginia, looked up one of the more obscure
+        Latin words, consectetur, from a Lorem Ipsum passage, and going through
+        the cites of the word in classical literature, discovered the
+        undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
+        of &quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good and
+        Evil) by Cicero, written in 45 BC. This book is a treatise on the theory
+        of ethics, very popular during the Renaissance. The first line of Lorem
+        Ipsum, &quot;Lorem ipsum dolor sit amet..&quot;, comes from a line in
+        section 1.10.32.
+      </Text>
+    </ScrollView>
+  );
+}
+
+export default function App() {
+  const Stack = createNativeStackNavigator();
+  return (
+    <SafeAreaProvider>
+      <NavigationContainer>
+        <Stack.Navigator>
+          <Stack.Screen
+            name="Article"
+            component={ArticleScreen}
+            options={{
+              headerTransparent: true,
+              headerBlurEffect: "extraLight",
+              headerLargeTitle: true
+            }}
+          />
+        </Stack.Navigator>
+      </NavigationContainer>
+    </SafeAreaProvider>
+  )
+}
diff --git a/apps/src/tests/index.ts b/apps/src/tests/index.ts
@@ -111,6 +111,7 @@ export { default as Test2252 } from './Test2252';
 export { default as Test2271 } from './Test2271';
 export { default as Test2282 } from './Test2282';
 export { default as Test2317 } from './Test2317';
+export { default as Test2320 } from './Test2320';
 export { default as Test2332 } from './Test2332';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 export { default as TestHeader } from './TestHeader';
diff --git a/ios/RNSConvert.h b/ios/RNSConvert.h
@@ -1,12 +1,17 @@
-#ifdef RCT_NEW_ARCH_ENABLED
 #import <UIKit/UIKit.h>
+#ifdef RCT_NEW_ARCH_ENABLED
 #import <react/renderer/components/rnscreens/Props.h>
+#endif // RCT_NEW_ARCH_ENABLED
 #import "RNSEnums.h"
 
+#ifdef RCT_NEW_ARCH_ENABLED
 namespace react = facebook::react;
+#endif // RCT_NEW_ARCH_ENABLED
 
 @interface RNSConvert : NSObject
 
+#ifdef RCT_NEW_ARCH_ENABLED
+
 + (UISemanticContentAttribute)UISemanticContentAttributeFromCppEquivalent:
     (react::RNSScreenStackHeaderConfigDirection)direction;
 
@@ -40,8 +45,12 @@ namespace react = facebook::react;
 
 + (RNSSearchBarPlacement)RNSScreenSearchBarPlacementFromCppEquivalent:(react::RNSSearchBarPlacement)placement;
 
-+ (UIBlurEffectStyle)UIBlurEffectStyleFromCppEquivalent:(react::RNSScreenStackHeaderConfigBlurEffect)blurEffect;
-
-@end
++ (RNSBlurEffectStyle)RNSBlurEffectStyleFromCppEquivalent:(react::RNSScreenStackHeaderConfigBlurEffect)blurEffect;
 
 #endif // RCT_NEW_ARCH_ENABLED
+
+/// This method fails (by assertion) when `blurEffect == RNSBlurEffectStyleNone` which has no counter part in the UIKit
+/// type.
++ (UIBlurEffectStyle)tryConvertRNSBlurEffectStyleToUIBlurEffectStyle:(RNSBlurEffectStyle)blurEffect;
+
+@end
diff --git a/ios/RNSConvert.mm b/ios/RNSConvert.mm
@@ -1,8 +1,12 @@
 #import "RNSConvert.h"
 
-#ifdef RCT_NEW_ARCH_ENABLED
+#ifndef RCT_NEW_ARCH_ENABLED
+#import <react/RCTAssert.h>
+#endif // !RCT_NEW_ARCH_ENABLED
+
 @implementation RNSConvert
 
+#ifdef RCT_NEW_ARCH_ENABLED
 + (UISemanticContentAttribute)UISemanticContentAttributeFromCppEquivalent:
     (react::RNSScreenStackHeaderConfigDirection)direction
 {
@@ -180,71 +184,89 @@ + (RNSSearchBarPlacement)RNSScreenSearchBarPlacementFromCppEquivalent:(react::RN
   }
 }
 
-+ (UIBlurEffectStyle)UIBlurEffectStyleFromCppEquivalent:(react::RNSScreenStackHeaderConfigBlurEffect)blurEffect
++ (RNSBlurEffectStyle)RNSBlurEffectStyleFromCppEquivalent:(react::RNSScreenStackHeaderConfigBlurEffect)blurEffect
 {
 #if !TARGET_OS_TV && defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_13_0) && \
     __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0
   if (@available(iOS 13.0, *)) {
     switch (blurEffect) {
+      case react::RNSScreenStackHeaderConfigBlurEffect::None:
+        return RNSBlurEffectStyleNone;
       case react::RNSScreenStackHeaderConfigBlurEffect::ExtraLight:
-        return UIBlurEffectStyleExtraLight;
+        return RNSBlurEffectStyleExtraLight;
       case react::RNSScreenStackHeaderConfigBlurEffect::Light:
-        return UIBlurEffectStyleLight;
+        return RNSBlurEffectStyleLight;
       case react::RNSScreenStackHeaderConfigBlurEffect::Dark:
-        return UIBlurEffectStyleDark;
+        return RNSBlurEffectStyleDark;
       case react::RNSScreenStackHeaderConfigBlurEffect::Regular:
-        return UIBlurEffectStyleRegular;
+        return RNSBlurEffectStyleRegular;
       case react::RNSScreenStackHeaderConfigBlurEffect::Prominent:
-        return UIBlurEffectStyleProminent;
+        return RNSBlurEffectStyleProminent;
       case react::RNSScreenStackHeaderConfigBlurEffect::SystemUltraThinMaterial:
-        return UIBlurEffectStyleSystemUltraThinMaterial;
+        return RNSBlurEffectStyleSystemUltraThinMaterial;
       case react::RNSScreenStackHeaderConfigBlurEffect::SystemThinMaterial:
-        return UIBlurEffectStyleSystemThinMaterial;
+        return RNSBlurEffectStyleSystemThinMaterial;
       case react::RNSScreenStackHeaderConfigBlurEffect::SystemMaterial:
-        return UIBlurEffectStyleSystemMaterial;
+        return RNSBlurEffectStyleSystemMaterial;
       case react::RNSScreenStackHeaderConfigBlurEffect::SystemThickMaterial:
-        return UIBlurEffectStyleSystemThickMaterial;
+        return RNSBlurEffectStyleSystemThickMaterial;
       case react::RNSScreenStackHeaderConfigBlurEffect::SystemChromeMaterial:
-        return UIBlurEffectStyleSystemChromeMaterial;
+        return RNSBlurEffectStyleSystemChromeMaterial;
       case react::RNSScreenStackHeaderConfigBlurEffect::SystemUltraThinMaterialLight:
-        return UIBlurEffectStyleSystemUltraThinMaterialLight;
+        return RNSBlurEffectStyleSystemUltraThinMaterialLight;
       case react::RNSScreenStackHeaderConfigBlurEffect::SystemThinMaterialLight:
-        return UIBlurEffectStyleSystemThinMaterialLight;
+        return RNSBlurEffectStyleSystemThinMaterialLight;
       case react::RNSScreenStackHeaderConfigBlurEffect::SystemMaterialLight:
-        return UIBlurEffectStyleSystemMaterialLight;
+        return RNSBlurEffectStyleSystemMaterialLight;
       case react::RNSScreenStackHeaderConfigBlurEffect::SystemThickMaterialLight:
-        return UIBlurEffectStyleSystemThickMaterialLight;
+        return RNSBlurEffectStyleSystemThickMaterialLight;
       case react::RNSScreenStackHeaderConfigBlurEffect::SystemChromeMaterialLight:
-        return UIBlurEffectStyleSystemChromeMaterialLight;
+        return RNSBlurEffectStyleSystemChromeMaterialLight;
       case react::RNSScreenStackHeaderConfigBlurEffect::SystemUltraThinMaterialDark:
-        return UIBlurEffectStyleSystemUltraThinMaterialDark;
+        return RNSBlurEffectStyleSystemUltraThinMaterialDark;
       case react::RNSScreenStackHeaderConfigBlurEffect::SystemThinMaterialDark:
-        return UIBlurEffectStyleSystemThinMaterialDark;
+        return RNSBlurEffectStyleSystemThinMaterialDark;
       case react::RNSScreenStackHeaderConfigBlurEffect::SystemMaterialDark:
-        return UIBlurEffectStyleSystemMaterialDark;
+        return RNSBlurEffectStyleSystemMaterialDark;
       case react::RNSScreenStackHeaderConfigBlurEffect::SystemThickMaterialDark:
-        return UIBlurEffectStyleSystemThickMaterialDark;
+        return RNSBlurEffectStyleSystemThickMaterialDark;
       case react::RNSScreenStackHeaderConfigBlurEffect::SystemChromeMaterialDark:
-        return UIBlurEffectStyleSystemChromeMaterialDark;
+        return RNSBlurEffectStyleSystemChromeMaterialDark;
     }
   }
 #endif
 
   switch (blurEffect) {
+    case react::RNSScreenStackHeaderConfigBlurEffect::None:
+      return RNSBlurEffectStyleNone;
     case react::RNSScreenStackHeaderConfigBlurEffect::Light:
-      return UIBlurEffectStyleLight;
+      return RNSBlurEffectStyleLight;
     case react::RNSScreenStackHeaderConfigBlurEffect::Dark:
-      return UIBlurEffectStyleDark;
+      return RNSBlurEffectStyleDark;
     case react::RNSScreenStackHeaderConfigBlurEffect::Regular:
-      return UIBlurEffectStyleRegular;
+      return RNSBlurEffectStyleRegular;
     case react::RNSScreenStackHeaderConfigBlurEffect::Prominent:
-      return UIBlurEffectStyleProminent;
+      return RNSBlurEffectStyleProminent;
     case react::RNSScreenStackHeaderConfigBlurEffect::ExtraLight:
     default:
-      return UIBlurEffectStyleExtraLight;
+      return RNSBlurEffectStyleNone;
   }
 }
 
-@end
+#endif // RCT_NEW_ARCH_ENABLED
 
++ (UIBlurEffectStyle)tryConvertRNSBlurEffectStyleToUIBlurEffectStyle:(RNSBlurEffectStyle)blurEffect
+{
+#ifdef RCT_NEW_ARCH_ENABLED
+  react_native_assert(blurEffect != RNSBlurEffectStyleNone);
+#else
+  RCTAssert(
+      blurEffect != RNSBlurEffectStyleNone, @"RNSBlurEffectStyleNone variant is not convertible to UIBlurEffectStyle");
 #endif // RCT_NEW_ARCH_ENABLED
+
+  // Cast safety: RNSBlurEffectStyle is defined in such way that its values map 1:1 with
+  // UIBlurEffectStyle, except RNSBlurEffectStyleNone which is excluded above.
+  return (UIBlurEffectStyle)blurEffect;
+}
+
+@end
diff --git a/ios/RNSEnums.h b/ios/RNSEnums.h
@@ -70,3 +70,49 @@ typedef NS_ENUM(NSInteger, RNSSearchBarPlacement) {
   RNSSearchBarPlacementInline,
   RNSSearchBarPlacementStacked,
 };
+
+// Redefinition of UIBlurEffectStyle. We need to represent additional case of `None`.
+typedef NS_ENUM(NSInteger, RNSBlurEffectStyle) {
+  /// No blur effect should be visible
+  RNSBlurEffectStyleNone = -1,
+  RNSBlurEffectStyleExtraLight = UIBlurEffectStyleExtraLight,
+  RNSBlurEffectStyleLight = UIBlurEffectStyleLight,
+  RNSBlurEffectStyleDark = UIBlurEffectStyleDark,
+  // TODO: Add support for this variant on tvOS
+  //  RNSBlurEffectStyleExtraDark = UIBlurEffectStyleExtraDark API_AVAILABLE(tvos(10.0)) API_UNAVAILABLE(ios)
+  //  API_UNAVAILABLE(watchos),
+  RNSBlurEffectStyleRegular API_AVAILABLE(ios(10.0)) API_UNAVAILABLE(watchos) = UIBlurEffectStyleRegular,
+  RNSBlurEffectStyleProminent API_AVAILABLE(ios(10.0)) API_UNAVAILABLE(watchos) = UIBlurEffectStyleProminent,
+  RNSBlurEffectStyleSystemUltraThinMaterial API_AVAILABLE(ios(13.0))
+      API_UNAVAILABLE(watchos, tvos) = UIBlurEffectStyleSystemUltraThinMaterial,
+  RNSBlurEffectStyleSystemThinMaterial API_AVAILABLE(ios(13.0))
+      API_UNAVAILABLE(watchos, tvos) = UIBlurEffectStyleSystemThinMaterial,
+  RNSBlurEffectStyleSystemMaterial API_AVAILABLE(ios(13.0))
+      API_UNAVAILABLE(watchos, tvos) = UIBlurEffectStyleSystemMaterial,
+  RNSBlurEffectStyleSystemThickMaterial API_AVAILABLE(ios(13.0))
+      API_UNAVAILABLE(watchos, tvos) = UIBlurEffectStyleSystemThickMaterial,
+  RNSBlurEffectStyleSystemChromeMaterial API_AVAILABLE(ios(13.0))
+      API_UNAVAILABLE(watchos, tvos) = UIBlurEffectStyleSystemChromeMaterial,
+  RNSBlurEffectStyleSystemUltraThinMaterialLight API_AVAILABLE(ios(13.0))
+      API_UNAVAILABLE(watchos, tvos) = UIBlurEffectStyleSystemUltraThinMaterialLight,
+  RNSBlurEffectStyleSystemThinMaterialLight API_AVAILABLE(ios(13.0))
+      API_UNAVAILABLE(watchos, tvos) = UIBlurEffectStyleSystemThinMaterialLight,
+  RNSBlurEffectStyleSystemMaterialLight API_AVAILABLE(ios(13.0))
+      API_UNAVAILABLE(watchos, tvos) = UIBlurEffectStyleSystemMaterialLight,
+  RNSBlurEffectStyleSystemThickMaterialLight API_AVAILABLE(ios(13.0))
+      API_UNAVAILABLE(watchos, tvos) = UIBlurEffectStyleSystemThickMaterialLight,
+  RNSBlurEffectStyleSystemChromeMaterialLight API_AVAILABLE(ios(13.0))
+      API_UNAVAILABLE(watchos, tvos) = UIBlurEffectStyleSystemChromeMaterialLight,
+
+  RNSBlurEffectStyleSystemUltraThinMaterialDark API_AVAILABLE(ios(13.0))
+      API_UNAVAILABLE(watchos, tvos) = UIBlurEffectStyleSystemUltraThinMaterialDark,
+  RNSBlurEffectStyleSystemThinMaterialDark API_AVAILABLE(ios(13.0))
+      API_UNAVAILABLE(watchos, tvos) = UIBlurEffectStyleSystemThinMaterialDark,
+  RNSBlurEffectStyleSystemMaterialDark API_AVAILABLE(ios(13.0))
+      API_UNAVAILABLE(watchos, tvos) = UIBlurEffectStyleSystemMaterialDark,
+  RNSBlurEffectStyleSystemThickMaterialDark API_AVAILABLE(ios(13.0))
+      API_UNAVAILABLE(watchos, tvos) = UIBlurEffectStyleSystemThickMaterialDark,
+  RNSBlurEffectStyleSystemChromeMaterialDark API_AVAILABLE(ios(13.0))
+      API_UNAVAILABLE(watchos, tvos) = UIBlurEffectStyleSystemChromeMaterialDark
+
+} API_AVAILABLE(ios(8.0)) API_UNAVAILABLE(watchos);
diff --git a/ios/RNSScreenStackHeaderConfig.h b/ios/RNSScreenStackHeaderConfig.h
@@ -55,7 +55,7 @@
 @property (nonatomic) BOOL backButtonInCustomView;
 @property (nonatomic) UISemanticContentAttribute direction;
 @property (nonatomic) UINavigationItemBackButtonDisplayMode backButtonDisplayMode;
-@property (nonatomic) UIBlurEffectStyle blurEffect;
+@property (nonatomic) RNSBlurEffectStyle blurEffect;
 
 + (void)willShowViewController:(UIViewController *)vc
                       animated:(BOOL)animated
diff --git a/ios/RNSScreenStackHeaderConfig.mm b/ios/RNSScreenStackHeaderConfig.mm
@@ -96,6 +96,7 @@ - (void)initProps
   self.hidden = YES;
   _reactSubviews = [NSMutableArray new];
   _backTitleVisible = YES;
+  _blurEffect = RNSBlurEffectStyleNone;
 }
 
 - (UIView *)reactSuperview
@@ -390,8 +391,11 @@ + (UINavigationBarAppearance *)buildAppearance:(UIViewController *)vc
     appearance.backgroundColor = config.backgroundColor;
   }
 
-  if (config.blurEffect) {
-    appearance.backgroundEffect = [UIBlurEffect effectWithStyle:config.blurEffect];
+  if (config.blurEffect != RNSBlurEffectStyleNone) {
+    appearance.backgroundEffect =
+        [UIBlurEffect effectWithStyle:[RNSConvert tryConvertRNSBlurEffectStyleToUIBlurEffectStyle:config.blurEffect]];
+  } else {
+    appearance.backgroundEffect = nil;
   }
 
   if (config.hideShadow) {
@@ -921,7 +925,7 @@ - (void)updateProps:(react::Props::Shared const &)props oldProps:(react::Props::
   _backgroundColor = RCTUIColorFromSharedColor(newScreenProps.backgroundColor);
 
   if (newScreenProps.blurEffect != oldScreenProps.blurEffect) {
-    _blurEffect = [RNSConvert UIBlurEffectStyleFromCppEquivalent:newScreenProps.blurEffect];
+    _blurEffect = [RNSConvert RNSBlurEffectStyleFromCppEquivalent:newScreenProps.blurEffect];
   }
 
   [self updateViewControllerIfNeeded];
@@ -989,7 +993,7 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(backTitleFontSize, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(backgroundColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(backTitleVisible, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(blurEffect, UIBlurEffectStyle)
+RCT_EXPORT_VIEW_PROPERTY(blurEffect, RNSBlurEffectStyle)
 RCT_EXPORT_VIEW_PROPERTY(color, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(direction, UISemanticContentAttribute)
 RCT_EXPORT_VIEW_PROPERTY(largeTitle, BOOL)
@@ -1015,36 +1019,37 @@ + (NSMutableDictionary *)blurEffectsForIOSVersion
 {
   NSMutableDictionary *blurEffects = [NSMutableDictionary new];
   [blurEffects addEntriesFromDictionary:@{
-    @"extraLight" : @(UIBlurEffectStyleExtraLight),
-    @"light" : @(UIBlurEffectStyleLight),
-    @"dark" : @(UIBlurEffectStyleDark),
+    @"none" : @(RNSBlurEffectStyleNone),
+    @"extraLight" : @(RNSBlurEffectStyleExtraLight),
+    @"light" : @(RNSBlurEffectStyleLight),
+    @"dark" : @(RNSBlurEffectStyleDark),
   }];
 
   if (@available(iOS 10.0, *)) {
     [blurEffects addEntriesFromDictionary:@{
-      @"regular" : @(UIBlurEffectStyleRegular),
-      @"prominent" : @(UIBlurEffectStyleProminent),
+      @"regular" : @(RNSBlurEffectStyleRegular),
+      @"prominent" : @(RNSBlurEffectStyleProminent),
     }];
   }
 #if !TARGET_OS_TV && defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_13_0) && \
     __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0
   if (@available(iOS 13.0, *)) {
     [blurEffects addEntriesFromDictionary:@{
-      @"systemUltraThinMaterial" : @(UIBlurEffectStyleSystemUltraThinMaterial),
-      @"systemThinMaterial" : @(UIBlurEffectStyleSystemThinMaterial),
-      @"systemMaterial" : @(UIBlurEffectStyleSystemMaterial),
-      @"systemThickMaterial" : @(UIBlurEffectStyleSystemThickMaterial),
-      @"systemChromeMaterial" : @(UIBlurEffectStyleSystemChromeMaterial),
-      @"systemUltraThinMaterialLight" : @(UIBlurEffectStyleSystemUltraThinMaterialLight),
-      @"systemThinMaterialLight" : @(UIBlurEffectStyleSystemThinMaterialLight),
-      @"systemMaterialLight" : @(UIBlurEffectStyleSystemMaterialLight),
-      @"systemThickMaterialLight" : @(UIBlurEffectStyleSystemThickMaterialLight),
-      @"systemChromeMaterialLight" : @(UIBlurEffectStyleSystemChromeMaterialLight),
-      @"systemUltraThinMaterialDark" : @(UIBlurEffectStyleSystemUltraThinMaterialDark),
-      @"systemThinMaterialDark" : @(UIBlurEffectStyleSystemThinMaterialDark),
-      @"systemMaterialDark" : @(UIBlurEffectStyleSystemMaterialDark),
-      @"systemThickMaterialDark" : @(UIBlurEffectStyleSystemThickMaterialDark),
-      @"systemChromeMaterialDark" : @(UIBlurEffectStyleSystemChromeMaterialDark),
+      @"systemUltraThinMaterial" : @(RNSBlurEffectStyleSystemUltraThinMaterial),
+      @"systemThinMaterial" : @(RNSBlurEffectStyleSystemThinMaterial),
+      @"systemMaterial" : @(RNSBlurEffectStyleSystemMaterial),
+      @"systemThickMaterial" : @(RNSBlurEffectStyleSystemThickMaterial),
+      @"systemChromeMaterial" : @(RNSBlurEffectStyleSystemChromeMaterial),
+      @"systemUltraThinMaterialLight" : @(RNSBlurEffectStyleSystemUltraThinMaterialLight),
+      @"systemThinMaterialLight" : @(RNSBlurEffectStyleSystemThinMaterialLight),
+      @"systemMaterialLight" : @(RNSBlurEffectStyleSystemMaterialLight),
+      @"systemThickMaterialLight" : @(RNSBlurEffectStyleSystemThickMaterialLight),
+      @"systemChromeMaterialLight" : @(RNSBlurEffectStyleSystemChromeMaterialLight),
+      @"systemUltraThinMaterialDark" : @(RNSBlurEffectStyleSystemUltraThinMaterialDark),
+      @"systemThinMaterialDark" : @(RNSBlurEffectStyleSystemThinMaterialDark),
+      @"systemMaterialDark" : @(RNSBlurEffectStyleSystemMaterialDark),
+      @"systemThickMaterialDark" : @(RNSBlurEffectStyleSystemThickMaterialDark),
+      @"systemChromeMaterialDark" : @(RNSBlurEffectStyleSystemChromeMaterialDark),
     }];
   }
 #endif
@@ -1070,6 +1075,6 @@ + (NSMutableDictionary *)blurEffectsForIOSVersion
     UINavigationItemBackButtonDisplayModeDefault,
     integerValue)
 
-RCT_ENUM_CONVERTER(UIBlurEffectStyle, ([self blurEffectsForIOSVersion]), UIBlurEffectStyleExtraLight, integerValue)
+RCT_ENUM_CONVERTER(RNSBlurEffectStyle, ([self blurEffectsForIOSVersion]), RNSBlurEffectStyleNone, integerValue)
 
 @end
diff --git a/src/fabric/ScreenStackHeaderConfigNativeComponent.ts b/src/fabric/ScreenStackHeaderConfigNativeComponent.ts
diff --git a/src/types.tsx b/src/types.tsx
