fix(iOS): extraLight blur not working

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>
+  )
+}

apps/src/tests/index.ts

@@ -111,7 +111,8 @@ export { default as Test2235 } from './Test2235';
 export { default as Test2252 } from './Test2252';
 export { default as Test2271 } from './Test2271';
 export { default as Test2282 } from './Test2282';
-export { default as Test2232 } from './Test2332';
+export { default as Test2320 } from './Test2320';
+export { default as Test2332 } from './Test2332';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 export { default as TestHeader } from './TestHeader';
 export { default as TestModalNavigation } from './TestModalNavigation';

ios/RNSConvert.mm

@@ -177,6 +177,8 @@ + (UIBlurEffectStyle)UIBlurEffectStyleFromCppEquivalent:(react::RNSScreenStackHe
     __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0
   if (@available(iOS 13.0, *)) {
     switch (blurEffect) {
+      case react::RNSScreenStackHeaderConfigBlurEffect::Undefined:
+        return (UIBlurEffectStyle)-1;
       case react::RNSScreenStackHeaderConfigBlurEffect::ExtraLight:
         return UIBlurEffectStyleExtraLight;
       case react::RNSScreenStackHeaderConfigBlurEffect::Light:
@@ -222,6 +224,8 @@ + (UIBlurEffectStyle)UIBlurEffectStyleFromCppEquivalent:(react::RNSScreenStackHe
 #endif
 
   switch (blurEffect) {
+    case react::RNSScreenStackHeaderConfigBlurEffect::Undefined:
+      return (UIBlurEffectStyle)-1;
     case react::RNSScreenStackHeaderConfigBlurEffect::Light:
       return UIBlurEffectStyleLight;
     case react::RNSScreenStackHeaderConfigBlurEffect::Dark:

ios/RNSScreenStackHeaderConfig.mm

@@ -53,6 +53,8 @@ + (BOOL)RNSisBlank:(NSString *)string
 
 @end
 
+static UIBlurEffectStyle UIBlurEffectStyleUndefined = (UIBlurEffectStyle)-1;
+
 @implementation RNSScreenStackHeaderConfig {
   NSMutableArray<RNSScreenStackHeaderSubview *> *_reactSubviews;
 #ifdef RCT_NEW_ARCH_ENABLED
@@ -96,6 +98,7 @@ - (void)initProps
   self.hidden = YES;
   _reactSubviews = [NSMutableArray new];
   _backTitleVisible = YES;
+  _blurEffect = UIBlurEffectStyleUndefined;
 }
 
 - (UIView *)reactSuperview
@@ -390,8 +393,10 @@ + (UINavigationBarAppearance *)buildAppearance:(UIViewController *)vc
     appearance.backgroundColor = config.backgroundColor;
   }
 
-  if (config.blurEffect) {
+  if (config.blurEffect != UIBlurEffectStyleUndefined) {
     appearance.backgroundEffect = [UIBlurEffect effectWithStyle:config.blurEffect];
+  } else {
+    appearance.backgroundEffect = nil;
   }
 
   if (config.hideShadow) {
@@ -1002,6 +1007,7 @@ + (NSMutableDictionary *)blurEffectsForIOSVersion
 {
   NSMutableDictionary *blurEffects = [NSMutableDictionary new];
   [blurEffects addEntriesFromDictionary:@{
+    @"undefined" : @(UIBlurEffectStyleUndefined),
     @"extraLight" : @(UIBlurEffectStyleExtraLight),
     @"light" : @(UIBlurEffectStyleLight),
     @"dark" : @(UIBlurEffectStyleDark),
@@ -1057,6 +1063,6 @@ + (NSMutableDictionary *)blurEffectsForIOSVersion
     UINavigationItemBackButtonDisplayModeDefault,
     integerValue)
 
-RCT_ENUM_CONVERTER(UIBlurEffectStyle, ([self blurEffectsForIOSVersion]), UIBlurEffectStyleExtraLight, integerValue)
+RCT_ENUM_CONVERTER(UIBlurEffectStyle, ([self blurEffectsForIOSVersion]), UIBlurEffectStyleUndefined, integerValue)
 
 @end

src/fabric/ScreenStackHeaderConfigNativeComponent.ts

@@ -16,6 +16,7 @@ type OnDetachedEvent = Readonly<{}>;
 type BackButtonDisplayMode = 'minimal' | 'default' | 'generic';
 
 type BlurEffect =
+  | 'undefined'
   | 'extraLight'
   | 'light'
   | 'dark'
@@ -66,7 +67,7 @@ export interface NativeProps extends ViewProps {
   backButtonDisplayMode?: WithDefault<BackButtonDisplayMode, 'default'>;
   hideBackButton?: boolean;
   backButtonInCustomView?: boolean;
-  blurEffect?: WithDefault<BlurEffect, 'extraLight'>;
+  blurEffect?: WithDefault<BlurEffect, 'undefined'>;
   // TODO: implement this props on iOS
   topInsetEnabled?: boolean;
 }

src/types.tsx

@@ -41,6 +41,7 @@ export type StackAnimationTypes =
   | 'slide_from_left'
   | 'ios';
 export type BlurEffectTypes =
+  | 'undefined'
   | 'extraLight'
   | 'light'
   | 'dark'