@sbaiahmed1/react-native-blur 3.1.2 → 3.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -8
- package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNativeBlurViewManagerDelegate.java +18 -3
- package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNativeBlurViewManagerInterface.java +6 -1
- package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNativeGlassEffectContainerManagerDelegate.java +53 -0
- package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNativeGlassEffectContainerManagerInterface.java +25 -0
- package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNativeGlassViewManagerDelegate.java +38 -0
- package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNativeGlassViewManagerInterface.java +20 -0
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ComponentDescriptors.cpp +1 -0
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ComponentDescriptors.h +1 -0
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/EventEmitters.cpp +1 -0
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/EventEmitters.h +7 -0
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/Props.cpp +21 -2
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/Props.h +70 -2
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ShadowNodes.cpp +1 -0
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ShadowNodes.h +11 -0
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/States.h +12 -0
- package/android/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeBlurViewManager.kt +6 -1
- package/ios/Helpers/ReactNativeBlurViewHelper.swift +6 -1
- package/ios/ReactNativeBlurView.mm +37 -30
- package/ios/ReactNativeBlurViewManager.m +15 -9
- package/ios/Views/AdvancedBlurView.swift +8 -1
- package/ios/Views/BasicColoredView.swift +75 -38
- package/lib/module/BlurView.js +3 -0
- package/lib/module/BlurView.js.map +1 -1
- package/lib/module/ReactNativeBlurViewNativeComponent.ts +1 -0
- package/lib/typescript/src/BlurView.d.ts +6 -0
- package/lib/typescript/src/BlurView.d.ts.map +1 -1
- package/lib/typescript/src/ReactNativeBlurViewNativeComponent.d.ts +1 -0
- package/lib/typescript/src/ReactNativeBlurViewNativeComponent.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/BlurView.tsx +10 -0
- package/src/ReactNativeBlurViewNativeComponent.ts +1 -0
package/README.md
CHANGED
|
@@ -206,7 +206,7 @@ import { BlurView } from '@sbaiahmed1/react-native-blur';
|
|
|
206
206
|
// Before - Expo dependency + limited Android
|
|
207
207
|
import { BlurView } from 'expo-blur';
|
|
208
208
|
|
|
209
|
-
<BlurView
|
|
209
|
+
<BlurView
|
|
210
210
|
intensity={50} // 0-100 intensity scale
|
|
211
211
|
tint="light" // light, dark, default, system materials
|
|
212
212
|
experimentalBlurMethod="dimezisBlurView" // Android experimental blur
|
|
@@ -218,7 +218,7 @@ import { BlurView } from 'expo-blur';
|
|
|
218
218
|
// After - No dependencies + real Android blur
|
|
219
219
|
import { BlurView } from '@sbaiahmed1/react-native-blur';
|
|
220
220
|
|
|
221
|
-
<BlurView
|
|
221
|
+
<BlurView
|
|
222
222
|
blurAmount={50} // intensity → blurAmount (same scale)
|
|
223
223
|
blurType="light" // tint → blurType (same options + more)
|
|
224
224
|
style={styles.absolute}
|
|
@@ -257,11 +257,11 @@ import { BlurView } from '@sbaiahmed1/react-native-blur';
|
|
|
257
257
|
|
|
258
258
|
3. **Optional: Add liquid glass effects:**
|
|
259
259
|
```tsx
|
|
260
|
-
<BlurView
|
|
261
|
-
type="liquidGlass"
|
|
262
|
-
glassType="regular"
|
|
263
|
-
glassTintColor="#007AFF"
|
|
264
|
-
glassOpacity={0.8}
|
|
260
|
+
<BlurView
|
|
261
|
+
type="liquidGlass"
|
|
262
|
+
glassType="regular"
|
|
263
|
+
glassTintColor="#007AFF"
|
|
264
|
+
glassOpacity={0.8}
|
|
265
265
|
/>
|
|
266
266
|
```
|
|
267
267
|
|
|
@@ -443,6 +443,7 @@ All props are optional and have sensible defaults.
|
|
|
443
443
|
| `glassType` | `GlassType` | `'clear'` | The type of glass effect |
|
|
444
444
|
| `glassTintColor` | `string` | `'clear'` | The tint color for glass effect |
|
|
445
445
|
| `glassOpacity` | `number` | `1.0` | The opacity of glass effect (0-1) |
|
|
446
|
+
| `ignoreSafeArea` | `boolean` | `false` | (iOS only) Controls whether the liquid glass effect should ignore all safe area edges or stops once it reaches it |
|
|
446
447
|
| `isInteractive` | `boolean` | `true` | (iOS only) Controls whether the liquid glass effect is interactive. When `false`, the liquid glass effect will not react to touch or movement. Only applicable when `type` is `'liquidGlass'` and iOS 26+. |
|
|
447
448
|
| `reducedTransparencyFallbackColor` | `string` | `'#FFFFFF'` | Fallback color when reduced transparency is enabled |
|
|
448
449
|
| `style` | `ViewStyle` | `undefined` | Style object for the blur view |
|
|
@@ -480,7 +481,7 @@ On iOS, this component has been completely rewritten using **SwiftUI** for moder
|
|
|
480
481
|
- **SwiftUI Integration**: Leverages SwiftUI's declarative UI for better performance and maintainability
|
|
481
482
|
|
|
482
483
|
### Android
|
|
483
|
-
On Android, the component uses the BlurView library to provide real blur effects with hardware acceleration. The implementation supports multiple blur algorithms and gracefully falls back to translucent overlay approximation on devices with limited graphics capabilities.
|
|
484
|
+
On Android, the component uses the BlurView library to provide real blur effects with hardware acceleration. The implementation supports multiple blur algorithms and gracefully falls back to translucent overlay approximation on devices with limited graphics capabilities.
|
|
484
485
|
|
|
485
486
|
**⚠️ Liquid Glass Limitation**: Liquid glass effects (`type="liquidGlass"`) are **iOS 26+ exclusive**. On Android, they automatically fall back to enhanced blur with tint overlay to approximate the visual effect.
|
|
486
487
|
|
|
@@ -22,14 +22,29 @@ public class ReactNativeBlurViewManagerDelegate<T extends View, U extends BaseVi
|
|
|
22
22
|
@Override
|
|
23
23
|
public void setProperty(T view, String propName, @Nullable Object value) {
|
|
24
24
|
switch (propName) {
|
|
25
|
-
case "
|
|
26
|
-
mViewManager.
|
|
25
|
+
case "glassTintColor":
|
|
26
|
+
mViewManager.setGlassTintColor(view, value == null ? "clear" : (String) value);
|
|
27
|
+
break;
|
|
28
|
+
case "glassOpacity":
|
|
29
|
+
mViewManager.setGlassOpacity(view, value == null ? 1f : ((Double) value).doubleValue());
|
|
27
30
|
break;
|
|
28
31
|
case "blurAmount":
|
|
29
32
|
mViewManager.setBlurAmount(view, value == null ? 10f : ((Double) value).doubleValue());
|
|
30
33
|
break;
|
|
34
|
+
case "type":
|
|
35
|
+
mViewManager.setType(view, (String) value);
|
|
36
|
+
break;
|
|
37
|
+
case "blurType":
|
|
38
|
+
mViewManager.setBlurType(view, (String) value);
|
|
39
|
+
break;
|
|
40
|
+
case "glassType":
|
|
41
|
+
mViewManager.setGlassType(view, (String) value);
|
|
42
|
+
break;
|
|
31
43
|
case "reducedTransparencyFallbackColor":
|
|
32
|
-
mViewManager.setReducedTransparencyFallbackColor(view, value == null ?
|
|
44
|
+
mViewManager.setReducedTransparencyFallbackColor(view, value == null ? "#FFFFFF" : (String) value);
|
|
45
|
+
break;
|
|
46
|
+
case "isInteractive":
|
|
47
|
+
mViewManager.setIsInteractive(view, value == null ? true : (boolean) value);
|
|
33
48
|
break;
|
|
34
49
|
default:
|
|
35
50
|
super.setProperty(view, propName, value);
|
|
@@ -14,7 +14,12 @@ import androidx.annotation.Nullable;
|
|
|
14
14
|
import com.facebook.react.uimanager.ViewManagerWithGeneratedInterface;
|
|
15
15
|
|
|
16
16
|
public interface ReactNativeBlurViewManagerInterface<T extends View> extends ViewManagerWithGeneratedInterface {
|
|
17
|
-
void
|
|
17
|
+
void setGlassTintColor(T view, @Nullable String value);
|
|
18
|
+
void setGlassOpacity(T view, double value);
|
|
18
19
|
void setBlurAmount(T view, double value);
|
|
20
|
+
void setType(T view, @Nullable String value);
|
|
21
|
+
void setBlurType(T view, @Nullable String value);
|
|
22
|
+
void setGlassType(T view, @Nullable String value);
|
|
19
23
|
void setReducedTransparencyFallbackColor(T view, @Nullable String value);
|
|
24
|
+
void setIsInteractive(T view, boolean value);
|
|
20
25
|
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
|
|
3
|
+
*
|
|
4
|
+
* Do not edit this file as changes may cause incorrect behavior and will be lost
|
|
5
|
+
* once the code is regenerated.
|
|
6
|
+
*
|
|
7
|
+
* @generated by codegen project: GeneratePropsJavaDelegate.js
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
package com.facebook.react.viewmanagers;
|
|
11
|
+
|
|
12
|
+
import android.view.View;
|
|
13
|
+
import androidx.annotation.Nullable;
|
|
14
|
+
import com.facebook.react.uimanager.BaseViewManager;
|
|
15
|
+
import com.facebook.react.uimanager.BaseViewManagerDelegate;
|
|
16
|
+
import com.facebook.react.uimanager.LayoutShadowNode;
|
|
17
|
+
|
|
18
|
+
public class ReactNativeGlassEffectContainerManagerDelegate<T extends View, U extends BaseViewManager<T, ? extends LayoutShadowNode> & ReactNativeGlassEffectContainerManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
|
|
19
|
+
public ReactNativeGlassEffectContainerManagerDelegate(U viewManager) {
|
|
20
|
+
super(viewManager);
|
|
21
|
+
}
|
|
22
|
+
@Override
|
|
23
|
+
public void setProperty(T view, String propName, @Nullable Object value) {
|
|
24
|
+
switch (propName) {
|
|
25
|
+
case "glassType":
|
|
26
|
+
mViewManager.setGlassType(view, (String) value);
|
|
27
|
+
break;
|
|
28
|
+
case "glassTintColor":
|
|
29
|
+
mViewManager.setGlassTintColor(view, value == null ? "clear" : (String) value);
|
|
30
|
+
break;
|
|
31
|
+
case "glassOpacity":
|
|
32
|
+
mViewManager.setGlassOpacity(view, value == null ? 1f : ((Double) value).doubleValue());
|
|
33
|
+
break;
|
|
34
|
+
case "isInteractive":
|
|
35
|
+
mViewManager.setIsInteractive(view, value == null ? true : (boolean) value);
|
|
36
|
+
break;
|
|
37
|
+
case "spacing":
|
|
38
|
+
mViewManager.setSpacing(view, value == null ? 8f : ((Double) value).doubleValue());
|
|
39
|
+
break;
|
|
40
|
+
case "enableMorphing":
|
|
41
|
+
mViewManager.setEnableMorphing(view, value == null ? true : (boolean) value);
|
|
42
|
+
break;
|
|
43
|
+
case "morphingDuration":
|
|
44
|
+
mViewManager.setMorphingDuration(view, value == null ? 300 : ((Double) value).intValue());
|
|
45
|
+
break;
|
|
46
|
+
case "reducedTransparencyFallbackColor":
|
|
47
|
+
mViewManager.setReducedTransparencyFallbackColor(view, value == null ? "#FFFFFF" : (String) value);
|
|
48
|
+
break;
|
|
49
|
+
default:
|
|
50
|
+
super.setProperty(view, propName, value);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
|
|
3
|
+
*
|
|
4
|
+
* Do not edit this file as changes may cause incorrect behavior and will be lost
|
|
5
|
+
* once the code is regenerated.
|
|
6
|
+
*
|
|
7
|
+
* @generated by codegen project: GeneratePropsJavaInterface.js
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
package com.facebook.react.viewmanagers;
|
|
11
|
+
|
|
12
|
+
import android.view.View;
|
|
13
|
+
import androidx.annotation.Nullable;
|
|
14
|
+
import com.facebook.react.uimanager.ViewManagerWithGeneratedInterface;
|
|
15
|
+
|
|
16
|
+
public interface ReactNativeGlassEffectContainerManagerInterface<T extends View> extends ViewManagerWithGeneratedInterface {
|
|
17
|
+
void setGlassType(T view, @Nullable String value);
|
|
18
|
+
void setGlassTintColor(T view, @Nullable String value);
|
|
19
|
+
void setGlassOpacity(T view, double value);
|
|
20
|
+
void setIsInteractive(T view, boolean value);
|
|
21
|
+
void setSpacing(T view, double value);
|
|
22
|
+
void setEnableMorphing(T view, boolean value);
|
|
23
|
+
void setMorphingDuration(T view, int value);
|
|
24
|
+
void setReducedTransparencyFallbackColor(T view, @Nullable String value);
|
|
25
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
|
|
3
|
+
*
|
|
4
|
+
* Do not edit this file as changes may cause incorrect behavior and will be lost
|
|
5
|
+
* once the code is regenerated.
|
|
6
|
+
*
|
|
7
|
+
* @generated by codegen project: GeneratePropsJavaDelegate.js
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
package com.facebook.react.viewmanagers;
|
|
11
|
+
|
|
12
|
+
import android.view.View;
|
|
13
|
+
import androidx.annotation.Nullable;
|
|
14
|
+
import com.facebook.react.uimanager.BaseViewManager;
|
|
15
|
+
import com.facebook.react.uimanager.BaseViewManagerDelegate;
|
|
16
|
+
import com.facebook.react.uimanager.LayoutShadowNode;
|
|
17
|
+
|
|
18
|
+
public class ReactNativeGlassViewManagerDelegate<T extends View, U extends BaseViewManager<T, ? extends LayoutShadowNode> & ReactNativeGlassViewManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
|
|
19
|
+
public ReactNativeGlassViewManagerDelegate(U viewManager) {
|
|
20
|
+
super(viewManager);
|
|
21
|
+
}
|
|
22
|
+
@Override
|
|
23
|
+
public void setProperty(T view, String propName, @Nullable Object value) {
|
|
24
|
+
switch (propName) {
|
|
25
|
+
case "glassType":
|
|
26
|
+
mViewManager.setGlassType(view, (String) value);
|
|
27
|
+
break;
|
|
28
|
+
case "glassAmount":
|
|
29
|
+
mViewManager.setGlassAmount(view, value == null ? 50f : ((Double) value).doubleValue());
|
|
30
|
+
break;
|
|
31
|
+
case "reducedTransparencyFallbackColor":
|
|
32
|
+
mViewManager.setReducedTransparencyFallbackColor(view, value == null ? null : (String) value);
|
|
33
|
+
break;
|
|
34
|
+
default:
|
|
35
|
+
super.setProperty(view, propName, value);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
|
|
3
|
+
*
|
|
4
|
+
* Do not edit this file as changes may cause incorrect behavior and will be lost
|
|
5
|
+
* once the code is regenerated.
|
|
6
|
+
*
|
|
7
|
+
* @generated by codegen project: GeneratePropsJavaInterface.js
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
package com.facebook.react.viewmanagers;
|
|
11
|
+
|
|
12
|
+
import android.view.View;
|
|
13
|
+
import androidx.annotation.Nullable;
|
|
14
|
+
import com.facebook.react.uimanager.ViewManagerWithGeneratedInterface;
|
|
15
|
+
|
|
16
|
+
public interface ReactNativeGlassViewManagerInterface<T extends View> extends ViewManagerWithGeneratedInterface {
|
|
17
|
+
void setGlassType(T view, @Nullable String value);
|
|
18
|
+
void setGlassAmount(T view, double value);
|
|
19
|
+
void setReducedTransparencyFallbackColor(T view, @Nullable String value);
|
|
20
|
+
}
|
|
@@ -17,6 +17,7 @@ namespace facebook::react {
|
|
|
17
17
|
void ReactNativeBlurViewSpec_registerComponentDescriptorsFromCodegen(
|
|
18
18
|
std::shared_ptr<const ComponentDescriptorProviderRegistry> registry) {
|
|
19
19
|
registry->add(concreteComponentDescriptorProvider<ReactNativeBlurViewComponentDescriptor>());
|
|
20
|
+
registry->add(concreteComponentDescriptorProvider<ReactNativeGlassEffectContainerComponentDescriptor>());
|
|
20
21
|
}
|
|
21
22
|
|
|
22
23
|
} // namespace facebook::react
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
namespace facebook::react {
|
|
18
18
|
|
|
19
19
|
using ReactNativeBlurViewComponentDescriptor = ConcreteComponentDescriptor<ReactNativeBlurViewShadowNode>;
|
|
20
|
+
using ReactNativeGlassEffectContainerComponentDescriptor = ConcreteComponentDescriptor<ReactNativeGlassEffectContainerShadowNode>;
|
|
20
21
|
|
|
21
22
|
void ReactNativeBlurViewSpec_registerComponentDescriptorsFromCodegen(
|
|
22
23
|
std::shared_ptr<const ComponentDescriptorProviderRegistry> registry);
|
|
@@ -19,5 +19,12 @@ class ReactNativeBlurViewEventEmitter : public ViewEventEmitter {
|
|
|
19
19
|
|
|
20
20
|
|
|
21
21
|
|
|
22
|
+
};
|
|
23
|
+
class ReactNativeGlassEffectContainerEventEmitter : public ViewEventEmitter {
|
|
24
|
+
public:
|
|
25
|
+
using ViewEventEmitter::ViewEventEmitter;
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
22
29
|
};
|
|
23
30
|
} // namespace facebook::react
|
|
@@ -19,9 +19,28 @@ ReactNativeBlurViewProps::ReactNativeBlurViewProps(
|
|
|
19
19
|
const ReactNativeBlurViewProps &sourceProps,
|
|
20
20
|
const RawProps &rawProps): ViewProps(context, sourceProps, rawProps),
|
|
21
21
|
|
|
22
|
-
|
|
22
|
+
glassTintColor(convertRawProp(context, rawProps, "glassTintColor", sourceProps.glassTintColor, {"clear"})),
|
|
23
|
+
glassOpacity(convertRawProp(context, rawProps, "glassOpacity", sourceProps.glassOpacity, {1.0})),
|
|
23
24
|
blurAmount(convertRawProp(context, rawProps, "blurAmount", sourceProps.blurAmount, {10.0})),
|
|
24
|
-
|
|
25
|
+
type(convertRawProp(context, rawProps, "type", sourceProps.type, {ReactNativeBlurViewType::Blur})),
|
|
26
|
+
blurType(convertRawProp(context, rawProps, "blurType", sourceProps.blurType, {ReactNativeBlurViewBlurType::Xlight})),
|
|
27
|
+
glassType(convertRawProp(context, rawProps, "glassType", sourceProps.glassType, {ReactNativeBlurViewGlassType::Clear})),
|
|
28
|
+
reducedTransparencyFallbackColor(convertRawProp(context, rawProps, "reducedTransparencyFallbackColor", sourceProps.reducedTransparencyFallbackColor, {"#FFFFFF"})),
|
|
29
|
+
isInteractive(convertRawProp(context, rawProps, "isInteractive", sourceProps.isInteractive, {true}))
|
|
30
|
+
{}
|
|
31
|
+
ReactNativeGlassEffectContainerProps::ReactNativeGlassEffectContainerProps(
|
|
32
|
+
const PropsParserContext &context,
|
|
33
|
+
const ReactNativeGlassEffectContainerProps &sourceProps,
|
|
34
|
+
const RawProps &rawProps): ViewProps(context, sourceProps, rawProps),
|
|
35
|
+
|
|
36
|
+
glassType(convertRawProp(context, rawProps, "glassType", sourceProps.glassType, {ReactNativeGlassEffectContainerGlassType::Clear})),
|
|
37
|
+
glassTintColor(convertRawProp(context, rawProps, "glassTintColor", sourceProps.glassTintColor, {"clear"})),
|
|
38
|
+
glassOpacity(convertRawProp(context, rawProps, "glassOpacity", sourceProps.glassOpacity, {1.0})),
|
|
39
|
+
isInteractive(convertRawProp(context, rawProps, "isInteractive", sourceProps.isInteractive, {true})),
|
|
40
|
+
spacing(convertRawProp(context, rawProps, "spacing", sourceProps.spacing, {8.0})),
|
|
41
|
+
enableMorphing(convertRawProp(context, rawProps, "enableMorphing", sourceProps.enableMorphing, {true})),
|
|
42
|
+
morphingDuration(convertRawProp(context, rawProps, "morphingDuration", sourceProps.morphingDuration, {300})),
|
|
43
|
+
reducedTransparencyFallbackColor(convertRawProp(context, rawProps, "reducedTransparencyFallbackColor", sourceProps.reducedTransparencyFallbackColor, {"#FFFFFF"}))
|
|
25
44
|
{}
|
|
26
45
|
|
|
27
46
|
} // namespace facebook::react
|
|
@@ -14,6 +14,21 @@
|
|
|
14
14
|
|
|
15
15
|
namespace facebook::react {
|
|
16
16
|
|
|
17
|
+
enum class ReactNativeBlurViewType { Blur, LiquidGlass };
|
|
18
|
+
|
|
19
|
+
static inline void fromRawValue(const PropsParserContext& context, const RawValue &value, ReactNativeBlurViewType &result) {
|
|
20
|
+
auto string = (std::string)value;
|
|
21
|
+
if (string == "blur") { result = ReactNativeBlurViewType::Blur; return; }
|
|
22
|
+
if (string == "liquidGlass") { result = ReactNativeBlurViewType::LiquidGlass; return; }
|
|
23
|
+
abort();
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
static inline std::string toString(const ReactNativeBlurViewType &value) {
|
|
27
|
+
switch (value) {
|
|
28
|
+
case ReactNativeBlurViewType::Blur: return "blur";
|
|
29
|
+
case ReactNativeBlurViewType::LiquidGlass: return "liquidGlass";
|
|
30
|
+
}
|
|
31
|
+
}
|
|
17
32
|
enum class ReactNativeBlurViewBlurType { Xlight, Light, Dark, ExtraDark, Regular, Prominent, SystemUltraThinMaterial, SystemThinMaterial, SystemMaterial, SystemThickMaterial, SystemChromeMaterial };
|
|
18
33
|
|
|
19
34
|
static inline void fromRawValue(const PropsParserContext& context, const RawValue &value, ReactNativeBlurViewBlurType &result) {
|
|
@@ -47,6 +62,21 @@ static inline std::string toString(const ReactNativeBlurViewBlurType &value) {
|
|
|
47
62
|
case ReactNativeBlurViewBlurType::SystemChromeMaterial: return "systemChromeMaterial";
|
|
48
63
|
}
|
|
49
64
|
}
|
|
65
|
+
enum class ReactNativeBlurViewGlassType { Clear, Regular };
|
|
66
|
+
|
|
67
|
+
static inline void fromRawValue(const PropsParserContext& context, const RawValue &value, ReactNativeBlurViewGlassType &result) {
|
|
68
|
+
auto string = (std::string)value;
|
|
69
|
+
if (string == "clear") { result = ReactNativeBlurViewGlassType::Clear; return; }
|
|
70
|
+
if (string == "regular") { result = ReactNativeBlurViewGlassType::Regular; return; }
|
|
71
|
+
abort();
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
static inline std::string toString(const ReactNativeBlurViewGlassType &value) {
|
|
75
|
+
switch (value) {
|
|
76
|
+
case ReactNativeBlurViewGlassType::Clear: return "clear";
|
|
77
|
+
case ReactNativeBlurViewGlassType::Regular: return "regular";
|
|
78
|
+
}
|
|
79
|
+
}
|
|
50
80
|
|
|
51
81
|
class ReactNativeBlurViewProps final : public ViewProps {
|
|
52
82
|
public:
|
|
@@ -55,9 +85,47 @@ class ReactNativeBlurViewProps final : public ViewProps {
|
|
|
55
85
|
|
|
56
86
|
#pragma mark - Props
|
|
57
87
|
|
|
58
|
-
|
|
88
|
+
std::string glassTintColor{"clear"};
|
|
89
|
+
double glassOpacity{1.0};
|
|
59
90
|
double blurAmount{10.0};
|
|
60
|
-
|
|
91
|
+
ReactNativeBlurViewType type{ReactNativeBlurViewType::Blur};
|
|
92
|
+
ReactNativeBlurViewBlurType blurType{ReactNativeBlurViewBlurType::Xlight};
|
|
93
|
+
ReactNativeBlurViewGlassType glassType{ReactNativeBlurViewGlassType::Clear};
|
|
94
|
+
std::string reducedTransparencyFallbackColor{"#FFFFFF"};
|
|
95
|
+
bool isInteractive{true};
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
enum class ReactNativeGlassEffectContainerGlassType { Clear, Regular };
|
|
99
|
+
|
|
100
|
+
static inline void fromRawValue(const PropsParserContext& context, const RawValue &value, ReactNativeGlassEffectContainerGlassType &result) {
|
|
101
|
+
auto string = (std::string)value;
|
|
102
|
+
if (string == "clear") { result = ReactNativeGlassEffectContainerGlassType::Clear; return; }
|
|
103
|
+
if (string == "regular") { result = ReactNativeGlassEffectContainerGlassType::Regular; return; }
|
|
104
|
+
abort();
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
static inline std::string toString(const ReactNativeGlassEffectContainerGlassType &value) {
|
|
108
|
+
switch (value) {
|
|
109
|
+
case ReactNativeGlassEffectContainerGlassType::Clear: return "clear";
|
|
110
|
+
case ReactNativeGlassEffectContainerGlassType::Regular: return "regular";
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
class ReactNativeGlassEffectContainerProps final : public ViewProps {
|
|
115
|
+
public:
|
|
116
|
+
ReactNativeGlassEffectContainerProps() = default;
|
|
117
|
+
ReactNativeGlassEffectContainerProps(const PropsParserContext& context, const ReactNativeGlassEffectContainerProps &sourceProps, const RawProps &rawProps);
|
|
118
|
+
|
|
119
|
+
#pragma mark - Props
|
|
120
|
+
|
|
121
|
+
ReactNativeGlassEffectContainerGlassType glassType{ReactNativeGlassEffectContainerGlassType::Clear};
|
|
122
|
+
std::string glassTintColor{"clear"};
|
|
123
|
+
double glassOpacity{1.0};
|
|
124
|
+
bool isInteractive{true};
|
|
125
|
+
double spacing{8.0};
|
|
126
|
+
bool enableMorphing{true};
|
|
127
|
+
int morphingDuration{300};
|
|
128
|
+
std::string reducedTransparencyFallbackColor{"#FFFFFF"};
|
|
61
129
|
};
|
|
62
130
|
|
|
63
131
|
} // namespace facebook::react
|
|
@@ -29,4 +29,15 @@ using ReactNativeBlurViewShadowNode = ConcreteViewShadowNode<
|
|
|
29
29
|
ReactNativeBlurViewEventEmitter,
|
|
30
30
|
ReactNativeBlurViewState>;
|
|
31
31
|
|
|
32
|
+
JSI_EXPORT extern const char ReactNativeGlassEffectContainerComponentName[];
|
|
33
|
+
|
|
34
|
+
/*
|
|
35
|
+
* `ShadowNode` for <ReactNativeGlassEffectContainer> component.
|
|
36
|
+
*/
|
|
37
|
+
using ReactNativeGlassEffectContainerShadowNode = ConcreteViewShadowNode<
|
|
38
|
+
ReactNativeGlassEffectContainerComponentName,
|
|
39
|
+
ReactNativeGlassEffectContainerProps,
|
|
40
|
+
ReactNativeGlassEffectContainerEventEmitter,
|
|
41
|
+
ReactNativeGlassEffectContainerState>;
|
|
42
|
+
|
|
32
43
|
} // namespace facebook::react
|
|
@@ -26,4 +26,16 @@ public:
|
|
|
26
26
|
#endif
|
|
27
27
|
};
|
|
28
28
|
|
|
29
|
+
class ReactNativeGlassEffectContainerState {
|
|
30
|
+
public:
|
|
31
|
+
ReactNativeGlassEffectContainerState() = default;
|
|
32
|
+
|
|
33
|
+
#ifdef ANDROID
|
|
34
|
+
ReactNativeGlassEffectContainerState(ReactNativeGlassEffectContainerState const &previousState, folly::dynamic data){};
|
|
35
|
+
folly::dynamic getDynamic() const {
|
|
36
|
+
return {};
|
|
37
|
+
};
|
|
38
|
+
#endif
|
|
39
|
+
};
|
|
40
|
+
|
|
29
41
|
} // namespace facebook::react
|
|
@@ -63,12 +63,17 @@ class ReactNativeBlurViewManager : ViewGroupManager<ReactNativeBlurView>(),
|
|
|
63
63
|
override fun setGlassType(view: ReactNativeBlurView?, glassType: String?) {
|
|
64
64
|
view?.setGlassType(glassType ?: "clear")
|
|
65
65
|
}
|
|
66
|
-
|
|
66
|
+
|
|
67
67
|
@ReactProp(name = "isInteractive")
|
|
68
68
|
override fun setIsInteractive(view: ReactNativeBlurView?, isInteractive: Boolean) {
|
|
69
69
|
view?.setIsInteractive(isInteractive)
|
|
70
70
|
}
|
|
71
71
|
|
|
72
|
+
@ReactProp(name = "setIgnoreSafeArea")
|
|
73
|
+
override fun setIgnoreSafeArea(view: ReactNativeBlurView?, isInteractive: Boolean) {
|
|
74
|
+
// no-op
|
|
75
|
+
}
|
|
76
|
+
|
|
72
77
|
/**
|
|
73
78
|
* Called when view is detached from view hierarchy and allows for cleanup.
|
|
74
79
|
* This prevents the white screen issue during navigation transitions on Android.
|
|
@@ -47,6 +47,11 @@ import UIKit
|
|
|
47
47
|
blurView.isInteractive = isInteractive
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
+
/// Updates the blur view with a new blur style.
|
|
51
|
+
@objc public static func updateBlurView(_ blurView: AdvancedBlurView, withIgnoringSafeArea ignoreSafeArea: Bool) {
|
|
52
|
+
blurView.ignoreSafeArea = ignoreSafeArea
|
|
53
|
+
}
|
|
54
|
+
|
|
50
55
|
/// Updates the blur view with a new reduced transparency fallback color.
|
|
51
56
|
@objc public static func updateBlurView(_ blurView: AdvancedBlurView, withReducedTransparencyFallbackColor fallbackColor: UIColor) {
|
|
52
57
|
blurView.reducedTransparencyFallbackColor = fallbackColor
|
|
@@ -56,4 +61,4 @@ import UIKit
|
|
|
56
61
|
@objc public static func updateBlurView(_ blurView: AdvancedBlurView) {
|
|
57
62
|
// Nothing to update in the minimal implementation
|
|
58
63
|
}
|
|
59
|
-
}
|
|
64
|
+
}
|
|
@@ -28,13 +28,13 @@ using namespace facebook::react;
|
|
|
28
28
|
if (!colorString || [colorString isEqualToString:@""] || colorString.length == 0) {
|
|
29
29
|
return [UIColor clearColor]; // Default color
|
|
30
30
|
}
|
|
31
|
-
|
|
31
|
+
|
|
32
32
|
// Prevent excessively long strings that could cause performance issues
|
|
33
33
|
if (colorString.length > 50) {
|
|
34
34
|
NSLog(@"[ReactNativeBlurView] Warning: Color string too long, using default clear color");
|
|
35
35
|
return [UIColor clearColor];
|
|
36
36
|
}
|
|
37
|
-
|
|
37
|
+
|
|
38
38
|
// Handle common color names
|
|
39
39
|
NSDictionary *colorMap = @{
|
|
40
40
|
@"red": [UIColor redColor],
|
|
@@ -49,12 +49,12 @@ using namespace facebook::react;
|
|
|
49
49
|
@"clear": [UIColor clearColor],
|
|
50
50
|
@"transparent": [UIColor clearColor]
|
|
51
51
|
};
|
|
52
|
-
|
|
52
|
+
|
|
53
53
|
UIColor *namedColor = colorMap[colorString.lowercaseString];
|
|
54
54
|
if (namedColor) {
|
|
55
55
|
return namedColor;
|
|
56
56
|
}
|
|
57
|
-
|
|
57
|
+
|
|
58
58
|
// Handle hex colors (e.g., "#FF0000", "FF0000", "#FF00FF00", "FF00FF00")
|
|
59
59
|
NSString *hexString = colorString;
|
|
60
60
|
if ([hexString hasPrefix:@"#"]) {
|
|
@@ -64,7 +64,7 @@ using namespace facebook::react;
|
|
|
64
64
|
}
|
|
65
65
|
hexString = [hexString substringFromIndex:1];
|
|
66
66
|
}
|
|
67
|
-
|
|
67
|
+
|
|
68
68
|
// Validate hex string contains only valid hex characters
|
|
69
69
|
NSCharacterSet *hexCharacterSet = [NSCharacterSet characterSetWithCharactersInString:@"0123456789ABCDEFabcdef"];
|
|
70
70
|
NSCharacterSet *invalidCharacters = [hexCharacterSet invertedSet];
|
|
@@ -72,7 +72,7 @@ using namespace facebook::react;
|
|
|
72
72
|
NSLog(@"[ReactNativeBlurView] Warning: Invalid hex color format '%@', contains non-hex characters", colorString);
|
|
73
73
|
return [UIColor clearColor];
|
|
74
74
|
}
|
|
75
|
-
|
|
75
|
+
|
|
76
76
|
// Handle 6-character hex (RGB)
|
|
77
77
|
if (hexString.length == 6) {
|
|
78
78
|
unsigned int hexValue;
|
|
@@ -104,7 +104,7 @@ using namespace facebook::react;
|
|
|
104
104
|
unsigned int r = (hexValue & 0xF00) >> 8;
|
|
105
105
|
unsigned int g = (hexValue & 0x0F0) >> 4;
|
|
106
106
|
unsigned int b = (hexValue & 0x00F);
|
|
107
|
-
|
|
107
|
+
|
|
108
108
|
return [UIColor colorWithRed:(r | (r << 4)) / 255.0
|
|
109
109
|
green:(g | (g << 4)) / 255.0
|
|
110
110
|
blue:(b | (b << 4)) / 255.0
|
|
@@ -112,10 +112,10 @@ using namespace facebook::react;
|
|
|
112
112
|
}
|
|
113
113
|
}
|
|
114
114
|
else {
|
|
115
|
-
NSLog(@"[ReactNativeBlurView] Warning: Unsupported hex color length (%lu) for '%@', expected 3, 6, or 8 characters",
|
|
115
|
+
NSLog(@"[ReactNativeBlurView] Warning: Unsupported hex color length (%lu) for '%@', expected 3, 6, or 8 characters",
|
|
116
116
|
(unsigned long)hexString.length, colorString);
|
|
117
117
|
}
|
|
118
|
-
|
|
118
|
+
|
|
119
119
|
NSLog(@"[ReactNativeBlurView] Warning: Could not parse color '%@', using default clear color", colorString);
|
|
120
120
|
return [UIColor clearColor]; // Fallback to clear
|
|
121
121
|
}
|
|
@@ -132,48 +132,51 @@ using namespace facebook::react;
|
|
|
132
132
|
if (self = [super initWithFrame:frame]) {
|
|
133
133
|
static const auto defaultProps = std::make_shared<const ReactNativeBlurViewProps>();
|
|
134
134
|
_props = defaultProps;
|
|
135
|
-
|
|
135
|
+
|
|
136
136
|
const auto &bvProps = *std::static_pointer_cast<const ReactNativeBlurViewProps>(defaultProps);
|
|
137
|
-
|
|
137
|
+
|
|
138
138
|
_advancedBlurView = [ReactNativeBlurViewHelper createBlurViewWithFrame:frame];
|
|
139
|
-
|
|
139
|
+
|
|
140
140
|
// Set initial glassTintColor from default props
|
|
141
141
|
NSString *defaultGlassTintColorString = [[NSString alloc] initWithUTF8String:bvProps.glassTintColor.c_str()];
|
|
142
142
|
UIColor *defaultGlassTintColor = [ReactNativeBlurView colorFromString:defaultGlassTintColorString];
|
|
143
143
|
[ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withGlassTintColor:defaultGlassTintColor];
|
|
144
|
-
|
|
144
|
+
|
|
145
145
|
// Set initial glassOpacity from default props
|
|
146
146
|
[ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withGlassOpacity:bvProps.glassOpacity];
|
|
147
|
-
|
|
147
|
+
|
|
148
148
|
// Set initial blurAmount from default props
|
|
149
149
|
[ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withBlurAmount:bvProps.blurAmount];
|
|
150
|
-
|
|
150
|
+
|
|
151
151
|
// Set initial blurType from default props
|
|
152
152
|
if (bvProps.blurType != facebook::react::ReactNativeBlurViewBlurType::Xlight) {
|
|
153
153
|
NSString *blurTypeString = [[NSString alloc] initWithUTF8String:toString(bvProps.blurType).c_str()];
|
|
154
154
|
[ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withBlurType:blurTypeString];
|
|
155
155
|
}
|
|
156
|
-
|
|
156
|
+
|
|
157
157
|
// Set initial isInteractive from default props
|
|
158
158
|
[ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withIsInteractive:bvProps.isInteractive];
|
|
159
|
-
|
|
159
|
+
|
|
160
|
+
[ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withIgnoringSafeArea:bvProps.ignoreSafeArea];
|
|
161
|
+
|
|
162
|
+
|
|
160
163
|
// Set initial glassType from default props
|
|
161
164
|
if (bvProps.glassType != facebook::react::ReactNativeBlurViewGlassType::Clear) {
|
|
162
165
|
NSString *glassTypeString = [[NSString alloc] initWithUTF8String:toString(bvProps.glassType).c_str()];
|
|
163
166
|
[ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withGlassType:glassTypeString];
|
|
164
167
|
}
|
|
165
|
-
|
|
168
|
+
|
|
166
169
|
// Set initial type from default props
|
|
167
170
|
NSString *blurTypeString = [[NSString alloc] initWithUTF8String:toString(bvProps.type).c_str()];
|
|
168
171
|
[ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withType:blurTypeString];
|
|
169
|
-
|
|
172
|
+
|
|
170
173
|
// Set initial reducedTransparencyFallbackColor from default props
|
|
171
174
|
if (!bvProps.reducedTransparencyFallbackColor.empty()) {
|
|
172
175
|
NSString *fallbackColorString = [[NSString alloc] initWithUTF8String:bvProps.reducedTransparencyFallbackColor.c_str()];
|
|
173
176
|
UIColor *fallbackColor = [ReactNativeBlurView colorFromString:fallbackColorString];
|
|
174
177
|
[ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withReducedTransparencyFallbackColor:fallbackColor];
|
|
175
178
|
}
|
|
176
|
-
|
|
179
|
+
|
|
177
180
|
[self addSubview:_advancedBlurView];
|
|
178
181
|
}
|
|
179
182
|
return self;
|
|
@@ -183,7 +186,7 @@ using namespace facebook::react;
|
|
|
183
186
|
{
|
|
184
187
|
const auto &oldViewProps = *std::static_pointer_cast<ReactNativeBlurViewProps const>(_props);
|
|
185
188
|
const auto &newViewProps = *std::static_pointer_cast<ReactNativeBlurViewProps const>(props);
|
|
186
|
-
|
|
189
|
+
|
|
187
190
|
// Update glassTintColor if it has changed
|
|
188
191
|
if (oldViewProps.glassTintColor != newViewProps.glassTintColor) {
|
|
189
192
|
if (!newViewProps.glassTintColor.empty()) {
|
|
@@ -192,17 +195,17 @@ using namespace facebook::react;
|
|
|
192
195
|
[ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withGlassTintColor:newGlassTintColor];
|
|
193
196
|
}
|
|
194
197
|
}
|
|
195
|
-
|
|
198
|
+
|
|
196
199
|
// Update glassOpacity if it has changed
|
|
197
200
|
if (oldViewProps.glassOpacity != newViewProps.glassOpacity) {
|
|
198
201
|
[ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withGlassOpacity:newViewProps.glassOpacity];
|
|
199
202
|
}
|
|
200
|
-
|
|
203
|
+
|
|
201
204
|
// Update blurAmount if it has changed
|
|
202
205
|
if (oldViewProps.blurAmount != newViewProps.blurAmount) {
|
|
203
206
|
[ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withBlurAmount:newViewProps.blurAmount];
|
|
204
207
|
}
|
|
205
|
-
|
|
208
|
+
|
|
206
209
|
// Update blurType if it has changed
|
|
207
210
|
if (oldViewProps.blurType != newViewProps.blurType) {
|
|
208
211
|
if (newViewProps.blurType != facebook::react::ReactNativeBlurViewBlurType::Xlight) {
|
|
@@ -210,7 +213,7 @@ using namespace facebook::react;
|
|
|
210
213
|
[ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withBlurType:blurTypeString];
|
|
211
214
|
}
|
|
212
215
|
}
|
|
213
|
-
|
|
216
|
+
|
|
214
217
|
// Update glassType if it has changed
|
|
215
218
|
if (oldViewProps.glassType != newViewProps.glassType) {
|
|
216
219
|
if (newViewProps.glassType != facebook::react::ReactNativeBlurViewGlassType::Clear) {
|
|
@@ -218,18 +221,22 @@ using namespace facebook::react;
|
|
|
218
221
|
[ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withGlassType:glassTypeString];
|
|
219
222
|
}
|
|
220
223
|
}
|
|
221
|
-
|
|
224
|
+
|
|
222
225
|
// Update type if it has changed
|
|
223
226
|
if (oldViewProps.type != newViewProps.type) {
|
|
224
227
|
NSString *blurTypeString = [[NSString alloc] initWithUTF8String:toString(newViewProps.type).c_str()];
|
|
225
228
|
[ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withType:blurTypeString];
|
|
226
229
|
}
|
|
227
|
-
|
|
230
|
+
|
|
228
231
|
// Update isInteractive if it has changed
|
|
229
232
|
if (oldViewProps.isInteractive != newViewProps.isInteractive) {
|
|
230
233
|
[ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withIsInteractive:newViewProps.isInteractive];
|
|
231
234
|
}
|
|
232
|
-
|
|
235
|
+
|
|
236
|
+
if (oldViewProps.ignoreSafeArea != newViewProps.ignoreSafeArea) {
|
|
237
|
+
[ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withIgnoringSafeArea:newViewProps.ignoreSafeArea];
|
|
238
|
+
}
|
|
239
|
+
|
|
233
240
|
// Update reducedTransparencyFallbackColor if it has changed
|
|
234
241
|
if (oldViewProps.reducedTransparencyFallbackColor != newViewProps.reducedTransparencyFallbackColor) {
|
|
235
242
|
if (!newViewProps.reducedTransparencyFallbackColor.empty()) {
|
|
@@ -238,10 +245,10 @@ using namespace facebook::react;
|
|
|
238
245
|
[ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withReducedTransparencyFallbackColor:fallbackColor];
|
|
239
246
|
}
|
|
240
247
|
}
|
|
241
|
-
|
|
248
|
+
|
|
242
249
|
// Store the new props
|
|
243
250
|
_props = props;
|
|
244
|
-
|
|
251
|
+
|
|
245
252
|
[super updateProps:props oldProps:oldProps];
|
|
246
253
|
}
|
|
247
254
|
|
|
@@ -68,6 +68,12 @@ RCT_CUSTOM_VIEW_PROPERTY(isInteractive, NSNumber, AdvancedBlurView)
|
|
|
68
68
|
[ReactNativeBlurViewHelper updateBlurView:view withIsInteractive:isInteractive];
|
|
69
69
|
}
|
|
70
70
|
|
|
71
|
+
RCT_CUSTOM_VIEW_PROPERTY(ignoreSafeArea, NSNumber, AdvancedBlurView)
|
|
72
|
+
{
|
|
73
|
+
BOOL ignoreSafeArea = json ? [RCTConvert BOOL:json] : NO;
|
|
74
|
+
[ReactNativeBlurViewHelper updateBlurView:view withIgnoringSafeArea:ignoreSafeArea];
|
|
75
|
+
}
|
|
76
|
+
|
|
71
77
|
RCT_CUSTOM_VIEW_PROPERTY(reducedTransparencyFallbackColor, NSString, AdvancedBlurView)
|
|
72
78
|
{
|
|
73
79
|
NSString *colorString = json ? [RCTConvert NSString:json] : @"#FFFFFF";
|
|
@@ -81,13 +87,13 @@ RCT_CUSTOM_VIEW_PROPERTY(reducedTransparencyFallbackColor, NSString, AdvancedBlu
|
|
|
81
87
|
if (!colorString || [colorString isEqualToString:@""] || colorString.length == 0) {
|
|
82
88
|
return [UIColor clearColor]; // Default color
|
|
83
89
|
}
|
|
84
|
-
|
|
90
|
+
|
|
85
91
|
// Prevent excessively long strings that could cause performance issues
|
|
86
92
|
if (colorString.length > 50) {
|
|
87
93
|
NSLog(@"[ReactNativeBlurViewManager] Warning: Color string too long, using default clear color");
|
|
88
94
|
return [UIColor clearColor];
|
|
89
95
|
}
|
|
90
|
-
|
|
96
|
+
|
|
91
97
|
// Handle common color names
|
|
92
98
|
NSDictionary *colorMap = @{
|
|
93
99
|
@"red": [UIColor redColor],
|
|
@@ -102,12 +108,12 @@ RCT_CUSTOM_VIEW_PROPERTY(reducedTransparencyFallbackColor, NSString, AdvancedBlu
|
|
|
102
108
|
@"clear": [UIColor clearColor],
|
|
103
109
|
@"transparent": [UIColor clearColor]
|
|
104
110
|
};
|
|
105
|
-
|
|
111
|
+
|
|
106
112
|
UIColor *namedColor = colorMap[colorString.lowercaseString];
|
|
107
113
|
if (namedColor) {
|
|
108
114
|
return namedColor;
|
|
109
115
|
}
|
|
110
|
-
|
|
116
|
+
|
|
111
117
|
// Handle hex colors (e.g., "#FF0000", "FF0000", "#FF00FF00", "FF00FF00")
|
|
112
118
|
NSString *hexString = colorString;
|
|
113
119
|
if ([hexString hasPrefix:@"#"]) {
|
|
@@ -117,7 +123,7 @@ RCT_CUSTOM_VIEW_PROPERTY(reducedTransparencyFallbackColor, NSString, AdvancedBlu
|
|
|
117
123
|
}
|
|
118
124
|
hexString = [hexString substringFromIndex:1];
|
|
119
125
|
}
|
|
120
|
-
|
|
126
|
+
|
|
121
127
|
// Validate hex string contains only valid hex characters
|
|
122
128
|
NSCharacterSet *hexCharacterSet = [NSCharacterSet characterSetWithCharactersInString:@"0123456789ABCDEFabcdef"];
|
|
123
129
|
NSCharacterSet *invalidCharacters = [hexCharacterSet invertedSet];
|
|
@@ -125,7 +131,7 @@ RCT_CUSTOM_VIEW_PROPERTY(reducedTransparencyFallbackColor, NSString, AdvancedBlu
|
|
|
125
131
|
NSLog(@"[ReactNativeBlurViewManager] Warning: Invalid hex color format '%@', contains non-hex characters", colorString);
|
|
126
132
|
return [UIColor clearColor];
|
|
127
133
|
}
|
|
128
|
-
|
|
134
|
+
|
|
129
135
|
// Handle 6-character hex (RGB)
|
|
130
136
|
if (hexString.length == 6) {
|
|
131
137
|
unsigned int hexValue;
|
|
@@ -157,7 +163,7 @@ RCT_CUSTOM_VIEW_PROPERTY(reducedTransparencyFallbackColor, NSString, AdvancedBlu
|
|
|
157
163
|
unsigned int r = (hexValue & 0xF00) >> 8;
|
|
158
164
|
unsigned int g = (hexValue & 0x0F0) >> 4;
|
|
159
165
|
unsigned int b = (hexValue & 0x00F);
|
|
160
|
-
|
|
166
|
+
|
|
161
167
|
return [UIColor colorWithRed:(r | (r << 4)) / 255.0
|
|
162
168
|
green:(g | (g << 4)) / 255.0
|
|
163
169
|
blue:(b | (b << 4)) / 255.0
|
|
@@ -165,10 +171,10 @@ RCT_CUSTOM_VIEW_PROPERTY(reducedTransparencyFallbackColor, NSString, AdvancedBlu
|
|
|
165
171
|
}
|
|
166
172
|
}
|
|
167
173
|
else {
|
|
168
|
-
NSLog(@"[ReactNativeBlurViewManager] Warning: Unsupported hex color length (%lu) for '%@', expected 3, 6, or 8 characters",
|
|
174
|
+
NSLog(@"[ReactNativeBlurViewManager] Warning: Unsupported hex color length (%lu) for '%@', expected 3, 6, or 8 characters",
|
|
169
175
|
(unsigned long)hexString.length, colorString);
|
|
170
176
|
}
|
|
171
|
-
|
|
177
|
+
|
|
172
178
|
NSLog(@"[ReactNativeBlurViewManager] Warning: Could not parse color '%@', using default clear color", colorString);
|
|
173
179
|
return [UIColor clearColor]; // Fallback to clear
|
|
174
180
|
}
|
|
@@ -55,6 +55,12 @@ import UIKit
|
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
+
@objc public var ignoreSafeArea: Bool = false {
|
|
59
|
+
didSet {
|
|
60
|
+
updateView()
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
58
64
|
public override init(frame: CGRect) {
|
|
59
65
|
super.init(frame: frame)
|
|
60
66
|
setupHostingController()
|
|
@@ -89,7 +95,8 @@ import UIKit
|
|
|
89
95
|
type: type,
|
|
90
96
|
glassType: glassType,
|
|
91
97
|
reducedTransparencyFallbackColor: reducedTransparencyFallbackColor,
|
|
92
|
-
isInteractive: isInteractive
|
|
98
|
+
isInteractive: isInteractive,
|
|
99
|
+
ignoreSafeArea: ignoreSafeArea
|
|
93
100
|
)
|
|
94
101
|
|
|
95
102
|
let hosting = UIHostingController(rootView: swiftUIView)
|
|
@@ -6,53 +6,90 @@ import UIKit
|
|
|
6
6
|
// MARK: - SwiftUI View Component
|
|
7
7
|
|
|
8
8
|
struct BasicColoredView: View {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
9
|
+
let glassTintColor: UIColor
|
|
10
|
+
let glassOpacity: Double
|
|
11
|
+
let blurAmount: Double
|
|
12
|
+
let blurStyle: UIBlurEffect.Style
|
|
13
|
+
let type: String
|
|
14
|
+
let glassType: String
|
|
15
|
+
let reducedTransparencyFallbackColor: UIColor
|
|
16
|
+
let isInteractive: Bool
|
|
17
|
+
let blurIntensity: Double
|
|
18
|
+
let ignoreSafeArea: Bool
|
|
17
19
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
+
let isReducedTransparencyEnabled = UIAccessibility.isReduceTransparencyEnabled
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
init(glassTintColor: UIColor,
|
|
24
|
+
glassOpacity: Double,
|
|
25
|
+
blurAmount: Double,
|
|
26
|
+
blurStyle: UIBlurEffect.Style,
|
|
27
|
+
type: String,
|
|
28
|
+
glassType: String,
|
|
29
|
+
reducedTransparencyFallbackColor: UIColor,
|
|
30
|
+
isInteractive: Bool,
|
|
31
|
+
ignoreSafeArea: Bool = false) {
|
|
32
|
+
self.glassTintColor = glassTintColor
|
|
33
|
+
self.glassOpacity = glassOpacity
|
|
34
|
+
self.blurAmount = blurAmount
|
|
35
|
+
self.blurStyle = blurStyle
|
|
36
|
+
self.type = type
|
|
37
|
+
self.glassType = glassType
|
|
38
|
+
self.reducedTransparencyFallbackColor = reducedTransparencyFallbackColor
|
|
39
|
+
self.isInteractive = isInteractive
|
|
40
|
+
self.ignoreSafeArea = ignoreSafeArea
|
|
41
|
+
|
|
42
|
+
self.blurIntensity = mapBlurAmountToIntensity(blurAmount)
|
|
43
|
+
}
|
|
20
44
|
|
|
21
|
-
|
|
22
|
-
|
|
45
|
+
var body: some View {
|
|
46
|
+
content
|
|
47
|
+
.ignoresSafeArea(ignoreSafeArea ? .all : [])
|
|
48
|
+
}
|
|
23
49
|
|
|
50
|
+
private var content: some View {
|
|
24
51
|
if isReducedTransparencyEnabled {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
52
|
+
AnyView(
|
|
53
|
+
Rectangle()
|
|
54
|
+
.fill(Color(reducedTransparencyFallbackColor))
|
|
55
|
+
)
|
|
28
56
|
} else {
|
|
29
57
|
if (type == "liquidGlass"){
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
}
|
|
50
|
-
}else {
|
|
51
|
-
// Use proper blur intensity control for regular blur
|
|
58
|
+
AnyView(liquidGlassBlurView)
|
|
59
|
+
} else {
|
|
60
|
+
AnyView(regularBlurView)
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
private var liquidGlassBlurView: some View {
|
|
66
|
+
Group {
|
|
67
|
+
if #available(iOS 26.0, *) {
|
|
68
|
+
let baseGlassEffect = glassEffectFromString(glassType)
|
|
69
|
+
Rectangle()
|
|
70
|
+
.glassEffect(
|
|
71
|
+
baseGlassEffect
|
|
72
|
+
.tint(Color(glassTintColor).opacity(glassOpacity))
|
|
73
|
+
.interactive(isInteractive), in: .rect
|
|
74
|
+
)
|
|
75
|
+
} else {
|
|
76
|
+
// Use proper blur intensity control for liquid glass fallback
|
|
52
77
|
Rectangle()
|
|
53
78
|
.fill(Color(.clear))
|
|
54
79
|
.background(Blur(style: blurStyle, intensity: blurIntensity))
|
|
80
|
+
.overlay(
|
|
81
|
+
Color(glassTintColor)
|
|
82
|
+
.opacity(glassOpacity)
|
|
83
|
+
)
|
|
55
84
|
}
|
|
56
85
|
}
|
|
57
86
|
}
|
|
58
|
-
|
|
87
|
+
|
|
88
|
+
private var regularBlurView: some View {
|
|
89
|
+
// Use proper blur intensity control for regular blur
|
|
90
|
+
Rectangle()
|
|
91
|
+
.fill(Color(.clear))
|
|
92
|
+
.background(Blur(style: blurStyle, intensity: blurIntensity))
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
package/lib/module/BlurView.js
CHANGED
|
@@ -37,6 +37,7 @@ export const BlurView = ({
|
|
|
37
37
|
glassTintColor = 'clear',
|
|
38
38
|
glassOpacity = 1.0,
|
|
39
39
|
isInteractive = true,
|
|
40
|
+
ignoreSafeArea = false,
|
|
40
41
|
...props
|
|
41
42
|
}) => {
|
|
42
43
|
// If no children, render the blur view directly (for background use)
|
|
@@ -51,6 +52,7 @@ export const BlurView = ({
|
|
|
51
52
|
reducedTransparencyFallbackColor: reducedTransparencyFallbackColor,
|
|
52
53
|
style: style,
|
|
53
54
|
isInteractive: isInteractive,
|
|
55
|
+
ignoreSafeArea: ignoreSafeArea,
|
|
54
56
|
...props
|
|
55
57
|
});
|
|
56
58
|
}
|
|
@@ -69,6 +71,7 @@ export const BlurView = ({
|
|
|
69
71
|
glassOpacity: glassOpacity,
|
|
70
72
|
type: type,
|
|
71
73
|
isInteractive: isInteractive,
|
|
74
|
+
ignoreSafeArea: ignoreSafeArea,
|
|
72
75
|
reducedTransparencyFallbackColor: reducedTransparencyFallbackColor,
|
|
73
76
|
style: {
|
|
74
77
|
position: 'absolute',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","ReactNativeBlurView","jsx","_jsx","jsxs","_jsxs","BlurView","blurType","blurAmount","reducedTransparencyFallbackColor","style","children","type","glassType","glassTintColor","glassOpacity","isInteractive","props","Children","count","position","overflow","top","left","right","bottom","zIndex"],"sourceRoot":"../../src","sources":["BlurView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AAEnC,OAAOC,mBAAmB,MAEnB,sCAAsC;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;
|
|
1
|
+
{"version":3,"names":["React","View","ReactNativeBlurView","jsx","_jsx","jsxs","_jsxs","BlurView","blurType","blurAmount","reducedTransparencyFallbackColor","style","children","type","glassType","glassTintColor","glassOpacity","isInteractive","ignoreSafeArea","props","Children","count","position","overflow","top","left","right","bottom","zIndex"],"sourceRoot":"../../src","sources":["BlurView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AAEnC,OAAOC,mBAAmB,MAEnB,sCAAsC;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AA+E9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,QAAiC,GAAGA,CAAC;EAChDC,QAAQ,GAAG,QAAQ;EACnBC,UAAU,GAAG,EAAE;EACfC,gCAAgC,GAAG,SAAS;EAC5CC,KAAK;EACLC,QAAQ;EACRC,IAAI,GAAG,MAAM;EACbC,SAAS,GAAG,OAAO;EACnBC,cAAc,GAAG,OAAO;EACxBC,YAAY,GAAG,GAAG;EAClBC,aAAa,GAAG,IAAI;EACpBC,cAAc,GAAG,KAAK;EACtB,GAAGC;AACL,CAAC,KAAK;EACJ;EACA,IAAInB,KAAK,CAACoB,QAAQ,CAACC,KAAK,CAACT,QAAQ,CAAC,KAAK,CAAC,EAAE;IACxC,oBACER,IAAA,CAACF,mBAAmB;MAClBM,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBK,SAAS,EAAEA,SAAU;MACrBC,cAAc,EAAEA,cAAe;MAC/BC,YAAY,EAAEA,YAAa;MAC3BH,IAAI,EAAEA,IAAK;MACXH,gCAAgC,EAAEA,gCAAiC;MACnEC,KAAK,EAAEA,KAAM;MACbM,aAAa,EAAEA,aAAc;MAC7BC,cAAc,EAAEA,cAAe;MAAA,GAC3BC;IAAK,CACV,CAAC;EAEN;;EAEA;EACA,oBACEb,KAAA,CAACL,IAAI;IAACU,KAAK,EAAE,CAAC;MAAEW,QAAQ,EAAE,UAAU;MAAEC,QAAQ,EAAE;IAAS,CAAC,EAAEZ,KAAK,CAAE;IAAAC,QAAA,gBAEjER,IAAA,CAACF,mBAAmB;MAClBM,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBK,SAAS,EAAEA,SAAU;MACrBC,cAAc,EAAEA,cAAe;MAC/BC,YAAY,EAAEA,YAAa;MAC3BH,IAAI,EAAEA,IAAK;MACXI,aAAa,EAAEA,aAAc;MAC7BC,cAAc,EAAEA,cAAe;MAC/BR,gCAAgC,EAAEA,gCAAiC;MACnEC,KAAK,EAAE;QACLW,QAAQ,EAAE,UAAU;QACpBE,GAAG,EAAE,CAAC;QACNC,IAAI,EAAE,CAAC;QACPC,KAAK,EAAE,CAAC;QACRC,MAAM,EAAE;MACV,CAAE;MAAA,GACER;IAAK,CACV,CAAC,eAEFf,IAAA,CAACH,IAAI;MAACU,KAAK,EAAE;QAAEW,QAAQ,EAAE,UAAU;QAAEM,MAAM,EAAE;MAAE,CAAE;MAAAhB,QAAA,EAAEA;IAAQ,CAAO,CAAC;EAAA,CAC/D,CAAC;AAEX,CAAC;AAED,eAAeL,QAAQ","ignoreList":[]}
|
|
@@ -29,6 +29,7 @@ interface NativeProps extends ViewProps {
|
|
|
29
29
|
glassType?: WithDefault<GlassType, 'clear'>;
|
|
30
30
|
reducedTransparencyFallbackColor?: WithDefault<string, '#FFFFFF'>;
|
|
31
31
|
isInteractive?: WithDefault<boolean, true>;
|
|
32
|
+
ignoreSafeArea?: WithDefault<boolean, false>;
|
|
32
33
|
}
|
|
33
34
|
|
|
34
35
|
export default codegenNativeComponent<NativeProps>('ReactNativeBlurView');
|
|
@@ -60,6 +60,12 @@ export interface BlurViewProps {
|
|
|
60
60
|
* @default true
|
|
61
61
|
*/
|
|
62
62
|
isInteractive?: boolean;
|
|
63
|
+
/**
|
|
64
|
+
* Platform: iOS only
|
|
65
|
+
* Whether the blur view should be ignore safe area insets
|
|
66
|
+
* @default false
|
|
67
|
+
*/
|
|
68
|
+
ignoreSafeArea?: boolean;
|
|
63
69
|
}
|
|
64
70
|
/**
|
|
65
71
|
* A cross-platform blur view component that provides native blur effects.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlurView.d.ts","sourceRoot":"","sources":["../../../src/BlurView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAA4B,EAC1B,KAAK,QAAQ,EACd,MAAM,sCAAsC,CAAC;AAC9C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2CAA2C,CAAC;AAE3E,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAE1C;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;IAE9B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"BlurView.d.ts","sourceRoot":"","sources":["../../../src/BlurView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAA4B,EAC1B,KAAK,QAAQ,EACd,MAAM,sCAAsC,CAAC;AAC9C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2CAA2C,CAAC;AAE3E,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAE1C;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;IAE9B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA4D5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -11,6 +11,7 @@ interface NativeProps extends ViewProps {
|
|
|
11
11
|
glassType?: WithDefault<GlassType, 'clear'>;
|
|
12
12
|
reducedTransparencyFallbackColor?: WithDefault<string, '#FFFFFF'>;
|
|
13
13
|
isInteractive?: WithDefault<boolean, true>;
|
|
14
|
+
ignoreSafeArea?: WithDefault<boolean, false>;
|
|
14
15
|
}
|
|
15
16
|
declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
|
|
16
17
|
export default _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ReactNativeBlurViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/ReactNativeBlurViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EACV,WAAW,EACX,MAAM,EACP,MAAM,2CAA2C,CAAC;AAEnD,MAAM,MAAM,QAAQ,GAChB,QAAQ,GACR,OAAO,GACP,MAAM,GACN,WAAW,GACX,SAAS,GACT,WAAW,GACX,yBAAyB,GACzB,oBAAoB,GACpB,gBAAgB,GAChB,qBAAqB,GACrB,sBAAsB,CAAC;AAE3B,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE5C,UAAU,WAAY,SAAQ,SAAS;IACrC,cAAc,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9C,YAAY,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACvC,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,GAAG,aAAa,EAAE,MAAM,CAAC,CAAC;IACnD,QAAQ,CAAC,EAAE,WAAW,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAC5C,gCAAgC,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAClE,aAAa,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"ReactNativeBlurViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/ReactNativeBlurViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EACV,WAAW,EACX,MAAM,EACP,MAAM,2CAA2C,CAAC;AAEnD,MAAM,MAAM,QAAQ,GAChB,QAAQ,GACR,OAAO,GACP,MAAM,GACN,WAAW,GACX,SAAS,GACT,WAAW,GACX,yBAAyB,GACzB,oBAAoB,GACpB,gBAAgB,GAChB,qBAAqB,GACrB,sBAAsB,CAAC;AAE3B,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE5C,UAAU,WAAY,SAAQ,SAAS;IACrC,cAAc,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9C,YAAY,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACvC,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,GAAG,aAAa,EAAE,MAAM,CAAC,CAAC;IACnD,QAAQ,CAAC,EAAE,WAAW,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAC5C,gCAAgC,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAClE,aAAa,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IAC3C,cAAc,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;CAC9C;;AAED,wBAA0E"}
|
package/package.json
CHANGED
package/src/BlurView.tsx
CHANGED
|
@@ -73,6 +73,13 @@ export interface BlurViewProps {
|
|
|
73
73
|
* @default true
|
|
74
74
|
*/
|
|
75
75
|
isInteractive?: boolean;
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* Platform: iOS only
|
|
79
|
+
* Whether the blur view should be ignore safe area insets
|
|
80
|
+
* @default false
|
|
81
|
+
*/
|
|
82
|
+
ignoreSafeArea?: boolean;
|
|
76
83
|
}
|
|
77
84
|
|
|
78
85
|
/**
|
|
@@ -108,6 +115,7 @@ export const BlurView: React.FC<BlurViewProps> = ({
|
|
|
108
115
|
glassTintColor = 'clear',
|
|
109
116
|
glassOpacity = 1.0,
|
|
110
117
|
isInteractive = true,
|
|
118
|
+
ignoreSafeArea = false,
|
|
111
119
|
...props
|
|
112
120
|
}) => {
|
|
113
121
|
// If no children, render the blur view directly (for background use)
|
|
@@ -123,6 +131,7 @@ export const BlurView: React.FC<BlurViewProps> = ({
|
|
|
123
131
|
reducedTransparencyFallbackColor={reducedTransparencyFallbackColor}
|
|
124
132
|
style={style}
|
|
125
133
|
isInteractive={isInteractive}
|
|
134
|
+
ignoreSafeArea={ignoreSafeArea}
|
|
126
135
|
{...props}
|
|
127
136
|
/>
|
|
128
137
|
);
|
|
@@ -140,6 +149,7 @@ export const BlurView: React.FC<BlurViewProps> = ({
|
|
|
140
149
|
glassOpacity={glassOpacity}
|
|
141
150
|
type={type}
|
|
142
151
|
isInteractive={isInteractive}
|
|
152
|
+
ignoreSafeArea={ignoreSafeArea}
|
|
143
153
|
reducedTransparencyFallbackColor={reducedTransparencyFallbackColor}
|
|
144
154
|
style={{
|
|
145
155
|
position: 'absolute',
|
|
@@ -29,6 +29,7 @@ interface NativeProps extends ViewProps {
|
|
|
29
29
|
glassType?: WithDefault<GlassType, 'clear'>;
|
|
30
30
|
reducedTransparencyFallbackColor?: WithDefault<string, '#FFFFFF'>;
|
|
31
31
|
isInteractive?: WithDefault<boolean, true>;
|
|
32
|
+
ignoreSafeArea?: WithDefault<boolean, false>;
|
|
32
33
|
}
|
|
33
34
|
|
|
34
35
|
export default codegenNativeComponent<NativeProps>('ReactNativeBlurView');
|