feat: Add the new VibrancyView component

example/ios/Podfile.lock

@@ -1,5 +1,5 @@
 PODS:
-  - BlurView (1.0.0):
+  - BlurView (1.1.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2038,15 +2038,15 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
-  BlurView: dcf751e12df0262c9b9eaf26c347765a97b19348
+  BlurView: 7394e7edbf9a48d57a777c80649b0f014a599318
   boost: 7e761d76ca2ce687f7cc98e698152abd03a18f90
   DoubleConversion: cb417026b2400c8f53ae97020b2be961b59470cb
   fast_float: 06eeec4fe712a76acc9376682e4808b05ce978b6
   FBLazyVector: a62a7a5760929b6265e27bc01ab7598dde93ebd3
   fmt: a40bb5bd0294ea969aaaba240a927bd33d878cdd
   glog: 5683914934d5b6e4240e497e0f4a3b42d1854183
   hermes-engine: 94ed01537bdeccaab1adbf94b040d115d6fa1a7f
-  RCT-Folly: 36fe2295e44b10d831836cc0d1daec5f8abcf809
+  RCT-Folly: e78785aa9ba2ed998ea4151e314036f6c49e6d82
   RCTDeprecation: c3e3f5b4ea83e7ff3bc86ce09e2a54b7affd687d
   RCTRequired: ee438439880dffc9425930d1dd1a3c883ee6879c
   RCTTypeSafety: fe728195791e1a0222aa83596a570cf377cd475e

example/src/components/Tabs/index.tsx

@@ -1,8 +1,10 @@
+import { useMemo } from 'react';
 import { Text, TouchableOpacity, View } from 'react-native';
 import type { BottomTabBarProps } from '@react-navigation/bottom-tabs';
-import { BlurView } from '@danielsaraldi/react-native-blur-view';
+import { BlurView, VibrancyView } from '@danielsaraldi/react-native-blur-view';
 
 import { useBlur } from '../../hooks';
+import { isAndroid } from '../../utils';
 import { styles } from './styles';
 
 export function Tabs(props: BottomTabBarProps) {
@@ -13,40 +15,50 @@ export function Tabs(props: BottomTabBarProps) {
   const pageIndex = state.index;
   const id = state.routeNames[pageIndex] || 'Home';
 
+  const renderTabs = useMemo(
+    () =>
+      props.state.routes.map((route, index) => {
+        const isFocused = props.state.index === index;
+
+        return (
+          <TouchableOpacity
+            key={route.key}
+            activeOpacity={0.9}
+            style={[styles.tab, isFocused && styles.tabSelected]}
+            onPress={() => props.navigation.navigate(route.name)}
+          >
+            <Text
+              style={[
+                styles.tabText,
+                isDark && styles.textTextDark,
+                isFocused && styles.tabTextSelected,
+                isFocused && isDark && styles.tabTextDarkSelected,
+              ]}
+            >
+              {route.name}
+            </Text>
+          </TouchableOpacity>
+        );
+      }),
+    [props, isDark]
+  );
+
   return (
     <View style={styles.container}>
-      <BlurView
-        targetId={id}
-        style={styles.blurView}
-        type={mode}
-        radius={radius}
-      >
-        <View style={styles.content}>
-          {props.state.routes.map((route, index) => {
-            const isFocused = props.state.index === index;
-
-            return (
-              <TouchableOpacity
-                key={route.key}
-                activeOpacity={0.9}
-                style={[styles.tab, isFocused && styles.tabSelected]}
-                onPress={() => props.navigation.navigate(route.name)}
-              >
-                <Text
-                  style={[
-                    styles.tabText,
-                    isDark && styles.textTextDark,
-                    isFocused && styles.tabTextSelected,
-                    isFocused && isDark && styles.tabTextDarkSelected,
-                  ]}
-                >
-                  {route.name}
-                </Text>
-              </TouchableOpacity>
-            );
-          })}
-        </View>
-      </BlurView>
+      {isAndroid ? (
+        <BlurView
+          targetId={id}
+          style={styles.blurView}
+          type={mode}
+          radius={radius}
+        >
+          <View style={styles.content}>{renderTabs}</View>
+        </BlurView>
+      ) : (
+        <VibrancyView style={styles.blurView} type={mode} radius={radius}>
+          <View style={styles.content}>{renderTabs}</View>
+        </VibrancyView>
+      )}
     </View>
   );
 }

example/src/components/Tabs/styles.ts

@@ -6,19 +6,23 @@ export const styles = StyleSheet.create({
 
     position: 'absolute',
 
-    bottom: 0,
+    bottom: 16,
 
-    width: '100%',
+    width: '75%',
+
+    alignSelf: 'center',
+
+    borderRadius: 9999,
   },
 
   blurView: {
     width: '100%',
-    height: 80,
+    height: 64,
   },
 
   content: {
     width: '100%',
-    height: 80,
+    height: 64,
 
     flexDirection: 'row',
   },
@@ -36,6 +40,7 @@ export const styles = StyleSheet.create({
 
   tabText: {
     fontSize: 16,
+    fontWeight: '600',
 
     color: '#202020',
   },

example/src/screens/Settings/styles.ts

@@ -10,7 +10,6 @@ export const makeStyles = ({ top, bottom }: MakeStylesProps) =>
   StyleSheet.create({
     container: {
       flex: 1,
-      // backgroundColor: '#000',
     },
 
     content: {

ios/BlurUtils.h

@@ -0,0 +1,8 @@
+#import <UIKit/UIKit.h>
+
+@interface BlurUtils : NSObject
+
++ (NSNumber *)clipRadius:(NSNumber *)radius;
++ (UIBlurEffectStyle)blurEffectStyle:(NSString *)style;
+
+@end

ios/BlurUtils.mm

@@ -0,0 +1,54 @@
+#import "BlurUtils.h"
+
+@implementation BlurUtils
+
++ (UIBlurEffectStyle)blurEffectStyle:(NSString *)style
+{
+  if ([style isEqualToString: @"x-light"]) return UIBlurEffectStyleExtraLight;
+  else if ([style isEqualToString: @"light"]) return UIBlurEffectStyleLight;
+  else if ([style isEqualToString: @"dark"]) return UIBlurEffectStyleDark;
+
+  if (@available(iOS 10.0, *)) {
+    if ([style isEqualToString: @"regular"]) return UIBlurEffectStyleRegular;
+    else if ([style isEqualToString: @"prominent"]) return UIBlurEffectStyleProminent;
+  }
+
+  #if !TARGET_OS_TV
+    if (@available(iOS 13.0, *)) {
+      if ([style isEqualToString: @"chrome-material"]) return UIBlurEffectStyleSystemChromeMaterial;
+      else if ([style isEqualToString: @"material"]) return UIBlurEffectStyleSystemMaterial;
+      else if ([style isEqualToString: @"thick-material"]) return UIBlurEffectStyleSystemThickMaterial;
+      else if ([style isEqualToString: @"thin-material"]) return UIBlurEffectStyleSystemThinMaterial;
+      else if ([style isEqualToString: @"ultra-thin-material"]) return UIBlurEffectStyleSystemUltraThinMaterial;
+      else if ([style isEqualToString: @"chrome-material-dark"]) return UIBlurEffectStyleSystemChromeMaterialDark;
+      else if ([style isEqualToString: @"material-dark"]) return UIBlurEffectStyleSystemMaterialDark;
+      else if ([style isEqualToString: @"thick-material-dark"]) return UIBlurEffectStyleSystemThickMaterialDark;
+      else if ([style isEqualToString: @"thin-material-dark"]) return UIBlurEffectStyleSystemThinMaterialDark;
+      else if ([style isEqualToString: @"ultra-thin-material-dark"]) return UIBlurEffectStyleSystemUltraThinMaterialDark;
+      else if ([style isEqualToString: @"chrome-material-light"]) return UIBlurEffectStyleSystemChromeMaterialLight;
+      else if ([style isEqualToString: @"material-light"]) return UIBlurEffectStyleSystemMaterialLight;
+      else if ([style isEqualToString: @"thick-material-light"]) return UIBlurEffectStyleSystemThickMaterialLight;
+      else if ([style isEqualToString: @"thin-material-light"]) return UIBlurEffectStyleSystemThinMaterialLight;
+      else if ([style isEqualToString: @"ultra-thin-material-light"]) return UIBlurEffectStyleSystemUltraThinMaterialLight;
+    }
+  #endif
+
+  return UIBlurEffectStyleLight;
+}
+
++ (NSNumber *)clipRadius:(NSNumber *)radius
+{
+  if (radius == nil) {
+    return @0.0;
+  }
+
+  if ([radius doubleValue] <= 0.0) {
+    return @0.0;
+  } else if ([radius doubleValue] >= 100.0) {
+    return @100.0;
+  }
+
+  return radius;
+}
+
+@end

ios/BlurView.mm

@@ -1,5 +1,6 @@
 #import "BlurView.h"
 #import "BlurViewEffect.h"
+#import "BlurUtils.h"
 
 #import <react/renderer/components/BlurViewSpec/ComponentDescriptors.h>
 #import <react/renderer/components/BlurViewSpec/EventEmitters.h>
@@ -51,7 +52,7 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
   const auto &newViewProps = *std::static_pointer_cast<BlurViewProps const>(props);
 
   if (oldViewProps.blurRadius != newViewProps.blurRadius) {
-    NSNumber *blurRadius = [NSNumber numberWithInt:newViewProps.blurRadius];
+    NSNumber *blurRadius = [NSNumber numberWithDouble:newViewProps.blurRadius];
     [self setRadius:blurRadius];
   }
 
@@ -63,45 +64,11 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
   [super updateProps:props oldProps:oldProps];
 }
 
-- (UIBlurEffectStyle)blurEffectStyle
-{
-  if ([self.overlayColor isEqualToString: @"x-light"]) return UIBlurEffectStyleExtraLight;
-  else if ([self.overlayColor isEqualToString: @"light"]) return UIBlurEffectStyleLight;
-  else if ([self.overlayColor isEqualToString: @"dark"]) return UIBlurEffectStyleDark;
-
-  // Available >= iPhone 10
-  #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 100000
-    if ([self.overlayColor isEqualToString: @"regular"]) return UIBlurEffectStyleRegular;
-    else if ([self.overlayColor isEqualToString: @"prominent"]) return UIBlurEffectStyleProminent;
-  #endif
-
-  // Available >= iPhone 13
-  #if !TARGET_OS_TV && defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 130000
-    if ([self.overlayColor isEqualToString: @"chrome-material"]) return UIBlurEffectStyleSystemChromeMaterial;
-    else if ([self.overlayColor isEqualToString: @"material"]) return UIBlurEffectStyleSystemMaterial;
-    else if ([self.overlayColor isEqualToString: @"thick-material"]) return UIBlurEffectStyleSystemThickMaterial;
-    else if ([self.overlayColor isEqualToString: @"thin-material"]) return UIBlurEffectStyleSystemThinMaterial;
-    else if ([self.overlayColor isEqualToString: @"ultra-thin-material"]) return UIBlurEffectStyleSystemUltraThinMaterial;
-    else if ([self.overlayColor isEqualToString: @"chrome-material-dark"]) return UIBlurEffectStyleSystemChromeMaterialDark;
-    else if ([self.overlayColor isEqualToString: @"material-dark"]) return UIBlurEffectStyleSystemMaterialDark;
-    else if ([self.overlayColor isEqualToString: @"thick-material-dark"]) return UIBlurEffectStyleSystemThickMaterialDark;
-    else if ([self.overlayColor isEqualToString: @"thin-material-dark"]) return UIBlurEffectStyleSystemThinMaterialDark;
-    else if ([self.overlayColor isEqualToString: @"ultra-thin-material-dark"]) return UIBlurEffectStyleSystemUltraThinMaterialDark;
-    else if ([self.overlayColor isEqualToString: @"chrome-material-light"]) return UIBlurEffectStyleSystemChromeMaterialLight;
-    else if ([self.overlayColor isEqualToString: @"material-light"]) return UIBlurEffectStyleSystemMaterialLight;
-    else if ([self.overlayColor isEqualToString: @"thick-material-light"]) return UIBlurEffectStyleSystemThickMaterialLight;
-    else if ([self.overlayColor isEqualToString: @"thin-material-light"]) return UIBlurEffectStyleSystemThinMaterialLight;
-    else if ([self.overlayColor isEqualToString: @"ultra-thin-material-light"]) return UIBlurEffectStyleSystemUltraThinMaterialLight;
-  #endif
-
-  return UIBlurEffectStyleLight;
-}
-
 - (void)updateBlurEffect
 {
   self.blurEffectView.effect = nil;
 
-  UIBlurEffectStyle blurEffectStyle = [self blurEffectStyle];
+  UIBlurEffectStyle blurEffectStyle = [BlurUtils blurEffectStyle:self.overlayColor];
   BlurViewEffect *blurEffect = [BlurViewEffect effectWithStyle:blurEffectStyle andRadius:self.blurRadius];
 
   self.blurEffect = blurEffect;
@@ -110,8 +77,7 @@ - (void)updateBlurEffect
 
 - (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
 {
-  NSInteger adjustedIndex = index + 2;
-  [self insertSubview:childComponentView atIndex:adjustedIndex];
+  [self insertSubview:childComponentView atIndex:index];
 }
 
 - (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
@@ -142,7 +108,7 @@ - (void)dealloc
     [self.blurEffectView removeFromSuperview];
     self.blurEffectView = nil;
   }
-  
+
   if (self.blurEffect) {
     self.blurEffect = nil;
   }
@@ -161,21 +127,10 @@ - (void)setOverlayColor:(NSString *)overlayColor
   }
 }
 
-- (NSNumber *)clipRadius:(NSNumber *)radius
-{
-  if ([radius doubleValue] <= 0.0) {
-    return @0.0;
-  } else if ([radius doubleValue] >= 100.0) {
-    return @100.0;
-  }
-
-  return radius;
-}
-
 - (void)setRadius:(NSNumber *)radius
 {
   if (radius && ![self.blurRadius isEqualToNumber:radius]) {
-    _blurRadius = [self clipRadius:radius];
+    _blurRadius = [BlurUtils clipRadius:radius];
     [self updateBlurEffect];
   }
 }

ios/BlurViewManager.mm

@@ -17,6 +17,6 @@ - (UIView *)view
 }
 
 RCT_EXPORT_VIEW_PROPERTY(overlayColor, NSString);
-RCT_EXPORT_VIEW_PROPERTY(radius, NSNumber);
+RCT_EXPORT_VIEW_PROPERTY(blurRadius, NSNumber);
 
 @end

ios/VibrancyView.h

@@ -0,0 +1,25 @@
+#import <React/RCTViewComponentView.h>
+#import <UIKit/UIKit.h>
+
+#import "BlurViewEffect.h"
+
+#ifndef VibrancyViewNativeComponent_h
+#define VibrancyViewNativeComponent_h
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface VibrancyView : RCTViewComponentView
+
+@property(nonatomic, copy, nullable) NSString *overlayColor;
+@property(nonatomic, copy, nullable) NSNumber *blurRadius;
+
+@property(nonatomic, strong, nullable) BlurViewEffect *blurEffect;
+@property(nonatomic, strong, nullable) UIVisualEffectView *blurEffectView;
+@property(nonatomic, strong, nullable) UIVibrancyEffect *vibrancyEffect;
+@property(nonatomic, strong, nullable) UIVisualEffectView *vibrancyEffectView;
+
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif /* VibrancyViewNativeComponent_h */