Add support for blurEffect (#3)

Author: kkafar

apps/src/tests/TestBottomTabs.tsx

@@ -16,7 +16,7 @@ function LayoutView(props: PropsWithChildren<ViewProps>) {
 function App() {
   return (
     <View style={{ flex: 1 }}>
-      <BottomTabs tabBarBackgroundColor={'yellow'}>
+      <BottomTabs tabBarBackgroundColor={'rgba(255, 255, 0, 0.5)'} tabBarBlurEffect={'dark'}>
         <BottomTabsScreen>
           <LayoutView style={{ backgroundColor: 'lightgreen' }}>
             <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

ios/bottom-tabs/RNSBottomTabsHostComponentView.h

@@ -1,5 +1,6 @@
 #import <React/RCTViewComponentView.h>
 #import "RNSBottomTabsHostComponentViewManager.h"
+#import "RNSEnums.h"
 #import "RNSScreenContainer.h"
 
 NS_ASSUME_NONNULL_BEGIN
@@ -18,6 +19,7 @@ NS_ASSUME_NONNULL_BEGIN
 // TODO: Extract all props to single struct / use codegened struct
 
 @property (nonatomic, strong, readonly, nullable) UIColor *tabBarBackgroundColor;
+@property (nonatomic, readonly) RNSBlurEffectStyle tabBarBlurEffect;
 
 @end
 

ios/bottom-tabs/RNSBottomTabsHostComponentView.mm

@@ -6,6 +6,8 @@
 #import <react/renderer/components/rnscreens/Props.h>
 #import <react/renderer/components/rnscreens/RCTComponentViewHelpers.h>
 #import "RNSBottomTabsScreenComponentView.h"
+#import "RNSConversions.h"
+#import "RNSConvert.h"
 #import "RNSDefines.h"
 #import "RNSTabBarController.h"
 
@@ -47,7 +49,16 @@ - (void)initState
 - (nullable UITabBarAppearance *)makeTabBarAppearance
 {
   UITabBarAppearance *newAppearance = [[UITabBarAppearance alloc] init];
+
   newAppearance.backgroundColor = _tabBarBackgroundColor;
+
+  if (_tabBarBlurEffect != RNSBlurEffectStyleNone) {
+    newAppearance.backgroundEffect =
+        [UIBlurEffect effectWithStyle:[RNSConvert tryConvertRNSBlurEffectStyleToUIBlurEffectStyle:_tabBarBlurEffect]];
+  } else {
+    newAppearance.backgroundEffect = nil;
+  }
+
   return newAppearance;
 }
 
@@ -142,6 +153,12 @@ - (void)updateProps:(const facebook::react::Props::Shared &)props
     _tabBarBackgroundColor = RCTUIColorFromSharedColor(newComponentProps.tabBarBackgroundColor);
   }
 
+  if (newComponentProps.tabBarBlurEffect != oldComponentProps.tabBarBlurEffect) {
+    _needsTabBarAppearanceUpdate = YES;
+    _tabBarBlurEffect =
+        rnscreens::conversion::RNSBlurEffectStyleFromRNSBottomTabsTabBarBlurEffect(newComponentProps.tabBarBlurEffect);
+  }
+
   // Super call updates _props pointer. We should NOT update it before calling super.
   [super updateProps:props oldProps:oldProps];
 }

ios/conversion/RNSConversions-BottomTabs.mm

@@ -0,0 +1,73 @@
+#import "RNSConversions.h"
+
+namespace rnscreens::conversion {
+
+RNSBlurEffectStyle RNSBlurEffectStyleFromRNSBottomTabsTabBarBlurEffect(
+    facebook::react::RNSBottomTabsTabBarBlurEffect blurEffect)
+{
+  using enum facebook::react::RNSBottomTabsTabBarBlurEffect;
+#if !TARGET_OS_TV
+  switch (blurEffect) {
+    case None:
+      return RNSBlurEffectStyleNone;
+    case ExtraLight:
+      return RNSBlurEffectStyleExtraLight;
+    case Light:
+      return RNSBlurEffectStyleLight;
+    case Dark:
+      return RNSBlurEffectStyleDark;
+    case Regular:
+      return RNSBlurEffectStyleRegular;
+    case Prominent:
+      return RNSBlurEffectStyleProminent;
+    case SystemUltraThinMaterial:
+      return RNSBlurEffectStyleSystemUltraThinMaterial;
+    case SystemThinMaterial:
+      return RNSBlurEffectStyleSystemThinMaterial;
+    case SystemMaterial:
+      return RNSBlurEffectStyleSystemMaterial;
+    case SystemThickMaterial:
+      return RNSBlurEffectStyleSystemThickMaterial;
+    case SystemChromeMaterial:
+      return RNSBlurEffectStyleSystemChromeMaterial;
+    case SystemUltraThinMaterialLight:
+      return RNSBlurEffectStyleSystemUltraThinMaterialLight;
+    case SystemThinMaterialLight:
+      return RNSBlurEffectStyleSystemThinMaterialLight;
+    case SystemMaterialLight:
+      return RNSBlurEffectStyleSystemMaterialLight;
+    case SystemThickMaterialLight:
+      return RNSBlurEffectStyleSystemThickMaterialLight;
+    case SystemChromeMaterialLight:
+      return RNSBlurEffectStyleSystemChromeMaterialLight;
+    case SystemUltraThinMaterialDark:
+      return RNSBlurEffectStyleSystemUltraThinMaterialDark;
+    case SystemThinMaterialDark:
+      return RNSBlurEffectStyleSystemThinMaterialDark;
+    case SystemMaterialDark:
+      return RNSBlurEffectStyleSystemMaterialDark;
+    case SystemThickMaterialDark:
+      return RNSBlurEffectStyleSystemThickMaterialDark;
+    case SystemChromeMaterialDark:
+      return RNSBlurEffectStyleSystemChromeMaterialDark;
+  }
+#endif
+
+  switch (blurEffect) {
+    case None:
+      return RNSBlurEffectStyleNone;
+    case Light:
+      return RNSBlurEffectStyleLight;
+    case Dark:
+      return RNSBlurEffectStyleDark;
+    case Regular:
+      return RNSBlurEffectStyleRegular;
+    case Prominent:
+      return RNSBlurEffectStyleProminent;
+    case ExtraLight:
+    default:
+      return RNSBlurEffectStyleNone;
+  }
+}
+
+}; // namespace rnscreens::conversion

ios/conversion/RNSConversions.h

@@ -0,0 +1,11 @@
+#pragma once
+
+#import <react/renderer/components/rnscreens/Props.h>
+#import "RNSEnums.h"
+
+namespace rnscreens::conversion {
+
+RNSBlurEffectStyle RNSBlurEffectStyleFromRNSBottomTabsTabBarBlurEffect(
+    facebook::react::RNSBottomTabsTabBarBlurEffect blurEffect);
+
+};

src/fabric/BottomTabsNativeComponent.ts

@@ -2,6 +2,7 @@
 
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 import type { ColorValue, ViewProps } from 'react-native';
+import { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
 
 // TODO: Report issue on RN repo, that nesting color value inside a struct does not work.
 // Generated code is ok, but the value is not passed down correctly - whatever color is set
@@ -10,9 +11,33 @@ type TabBarAppearance = Readonly<{
   backgroundColor?: ColorValue;
 }>;
 
+type BlurEffect =
+  | 'none'
+  | 'extraLight'
+  | 'light'
+  | 'dark'
+  | 'regular'
+  | 'prominent'
+  | 'systemUltraThinMaterial'
+  | 'systemThinMaterial'
+  | 'systemMaterial'
+  | 'systemThickMaterial'
+  | 'systemChromeMaterial'
+  | 'systemUltraThinMaterialLight'
+  | 'systemThinMaterialLight'
+  | 'systemMaterialLight'
+  | 'systemThickMaterialLight'
+  | 'systemChromeMaterialLight'
+  | 'systemUltraThinMaterialDark'
+  | 'systemThinMaterialDark'
+  | 'systemMaterialDark'
+  | 'systemThickMaterialDark'
+  | 'systemChromeMaterialDark';
+
 export interface NativeProps extends ViewProps {
   tabBarAppearance?: TabBarAppearance;
   tabBarBackgroundColor?: ColorValue;
+  tabBarBlurEffect?: WithDefault<BlurEffect, 'none'>;
 }
 
 export default codegenNativeComponent<NativeProps>('RNSBottomTabs', {});