working fallback view with background color

example/App.js

@@ -60,6 +60,7 @@ export default class Basic extends Component {
           <BlurView
             blurType={this.state.blurBlurType}
             blurAmount={100}
+            reducedTransparencyFallbackColor={'pink'}
             style={[styles.blurView]}>
             <Text style={[styles.text, { color: tintColor }]}>
               Blur component ({platform})
@@ -84,6 +85,7 @@ export default class Basic extends Component {
           <VibrancyView
             blurType={this.state.vibrancyBlurType}
             blurAmount={10}
+            reducedTransparencyFallbackColor={'pink'}
             style={[styles.container, styles.blurContainer]}>
 
             <Text style={styles.text}>

ios/BlurView.h

@@ -3,11 +3,15 @@
 
 @interface BlurView : UIView
 
-@property (nonatomic, copy) NSString *blurType;
-@property (nonatomic, copy) NSNumber *blurAmount;
+@property (nonatomic, copy, nullable) NSString *blurType;
+@property (nonatomic, copy, nullable) NSNumber *blurAmount;
+@property (nonatomic, copy, nullable) UIColor *reducedTransparencyFallbackColor;
 
-@property (nonatomic, strong) BlurEffectWithAmount *blurEffect;
-@property (nonatomic, strong) UIVisualEffectView *blurEffectView;
+@property (nonatomic, strong, nullable) BlurEffectWithAmount *blurEffect;
+@property (nonatomic, strong, nullable) UIVisualEffectView *blurEffectView;
+@property (nonatomic, strong, nullable) UIView *reducedTransparencyFallbackView;
 
 - (void)updateBlurEffect;
+- (void)updateFallbackView;
+- (BOOL)useReduceTransparencyFallback;
 @end

ios/BlurView.m

@@ -7,28 +7,52 @@
 
 @implementation BlurView
 
-- (instancetype)initWithFrame:(CGRect)frame {
-    if (self = [super initWithFrame:frame]) {
-        self.blurEffectView = [[UIVisualEffectView alloc] init];
-        self.blurEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
-        self.blurEffectView.frame = frame;
+- (instancetype)init
+{
+  if (self = [super init]) {
+    [[NSNotificationCenter defaultCenter] addObserver:self
+                                          selector:@selector(reduceTransparencyStatusDidChange:)
+                                          name:UIAccessibilityReduceTransparencyStatusDidChangeNotification
+                                          object:nil];
+  }
 
-        self.blurAmount = @10;
-        self.blurType = @"dark";
-        [self updateBlurEffect];
+  return self;
+}
 
-        self.clipsToBounds = true;
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    self.blurEffectView = [[UIVisualEffectView alloc] init];
+    self.blurEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+    self.blurEffectView.frame = frame;
 
-        [self addSubview:self.blurEffectView];
-    }
+    self.reducedTransparencyFallbackView = [[UIView alloc] init];
+    self.reducedTransparencyFallbackView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+    self.reducedTransparencyFallbackView.frame = frame;
 
-    return self;
+    self.blurAmount = @10;
+    self.blurType = @"dark";
+    [self updateBlurEffect];
+    [self updateFallbackView];
+
+    self.clipsToBounds = true;
+
+    [self addSubview:self.blurEffectView];
+  }
+
+  return self;
+}
+
+- (void)dealloc
+{
+  [[NSNotificationCenter defaultCenter] removeObserver:self];
 }
 
 - (void)layoutSubviews
 {
   [super layoutSubviews];
   self.blurEffectView.frame = self.bounds;
+  self.reducedTransparencyFallbackView.frame = self.bounds;
 }
 
 - (void)setBlurType:(NSString *)blurType
@@ -47,6 +71,13 @@
   }
 }
 
+- (void)setReducedTransparencyFallbackColor:(nullable UIColor *)reducedTransparencyFallbackColor
+{
+  if (reducedTransparencyFallbackColor && ![self.reducedTransparencyFallbackColor isEqual:reducedTransparencyFallbackColor]) {
+    _reducedTransparencyFallbackColor = reducedTransparencyFallbackColor;
+    [self updateFallbackView];
+  }
+}
 
 - (UIBlurEffectStyle)blurEffectStyle
 {
@@ -89,6 +120,11 @@
   return UIBlurEffectStyleDark;
 }
 
+- (BOOL)useReduceTransparencyFallback
+{
+  return UIAccessibilityIsReduceTransparencyEnabled() == YES && self.reducedTransparencyFallbackColor != NULL;
+}
+
 - (void)updateBlurEffect
 {
   UIBlurEffectStyle style = [self blurEffectStyle];
@@ -96,4 +132,32 @@
   self.blurEffectView.effect = self.blurEffect;
 }
 
+- (void)updateFallbackView
+{
+  if ([self useReduceTransparencyFallback]) {
+    if (![self.subviews containsObject:self.reducedTransparencyFallbackView]) {
+      [self insertSubview:self.reducedTransparencyFallbackView atIndex:0];
+    }
+
+    if ([self.subviews containsObject:self.blurEffectView]) {
+      [self.blurEffectView removeFromSuperview];
+    }
+  } else {
+    if ([self.subviews containsObject:self.reducedTransparencyFallbackView]) {
+      [self.reducedTransparencyFallbackView removeFromSuperview];
+    }
+
+    if (![self.subviews containsObject:self.blurEffectView]) {
+      [self insertSubview:self.blurEffectView atIndex:0];
+    }
+  }
+
+  self.reducedTransparencyFallbackView.backgroundColor = self.reducedTransparencyFallbackColor;
+}
+
+- (void)reduceTransparencyStatusDidChange:(__unused NSNotification *)notification
+{
+  [self updateFallbackView];
+}
+
 @end

ios/BlurViewManager.m

@@ -12,5 +12,6 @@ RCT_EXPORT_MODULE();
 
 RCT_EXPORT_VIEW_PROPERTY(blurType, NSString);
 RCT_EXPORT_VIEW_PROPERTY(blurAmount, NSNumber);
+RCT_EXPORT_VIEW_PROPERTY(reducedTransparencyFallbackColor, UIColor);
 
 @end

ios/VibrancyView.m

@@ -30,7 +30,11 @@
 }
 
 - (void)insertReactSubview:(id<RCTComponent>)subview atIndex:(NSInteger)atIndex {
+  if ([self useReduceTransparencyFallback]) {
+    [self addSubview:(UIView*)subview];
+  } else {
     [self.vibrancyEffectView.contentView addSubview:(UIView*)subview];
+  }
 }
 
 - (void)updateBlurEffect
@@ -45,4 +49,24 @@
   self.vibrancyEffectView.effect = self.vibrancyEffect;
 }
 
+- (void)updateFallbackView
+{
+  [super updateFallbackView];
+
+  if ([self useReduceTransparencyFallback]) {
+    for (UIView *subview in self.blurEffectView.contentView.subviews) {
+      [subview removeFromSuperview];
+      [self addSubview:subview];
+    }
+  } else {
+    for (UIView *subview in self.subviews) {
+      if (subview == self.blurEffectView) continue;
+      if (subview == self.reducedTransparencyFallbackView) continue;
+
+      [subview removeFromSuperview];
+      [self.blurEffectView.contentView addSubview:subview];
+    }
+  }
+}
+
 @end

ios/VibrancyViewManager.m

@@ -12,5 +12,6 @@ RCT_EXPORT_MODULE();
 
 RCT_EXPORT_VIEW_PROPERTY(blurType, NSString);
 RCT_EXPORT_VIEW_PROPERTY(blurAmount, NSNumber);
+RCT_EXPORT_VIEW_PROPERTY(reducedTransparencyFallbackColor, UIColor);
 
 @end