@sbaiahmed1/react-native-blur 0.3.0-beta.0 → 0.3.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 +232 -97
- 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/jni/react/renderer/components/ReactNativeBlurViewSpec/ComponentDescriptors.cpp +1 -1
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ComponentDescriptors.h +1 -1
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/EventEmitters.h +1 -1
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/Props.cpp +17 -7
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/Props.h +55 -15
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ShadowNodes.cpp +1 -1
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ShadowNodes.h +7 -7
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/States.h +3 -3
- package/android/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeBlurView.kt +8 -0
- package/android/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeBlurViewManager.kt +5 -0
- package/ios/ReactNativeBlurView.mm +8 -0
- package/ios/ReactNativeBlurView.swift +15 -3
- package/ios/ReactNativeBlurViewManager.m +6 -0
- 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
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# @sbaiahmed1/react-native-blur
|
|
2
2
|
|
|
3
|
-
A modern React Native blur view component that provides native blur effects and **liquid glass effects** for
|
|
3
|
+
A modern React Native blur view component that provides native blur effects and **liquid glass effects** for iOS (with Android fallback to enhanced blur).
|
|
4
4
|
<div align="center">
|
|
5
5
|
<p>
|
|
6
6
|
<img src="https://img.shields.io/npm/v/@sbaiahmed1/react-native-blur?style=for-the-badge&color=blue" alt="npm version" />
|
|
7
|
-
<img src="https://img.shields.io/npm/
|
|
7
|
+
<img src="https://img.shields.io/npm/dt/@sbaiahmed1/react-native-blur?style=for-the-badge&color=green" alt="downloads" />
|
|
8
8
|
<img src="https://img.shields.io/github/license/sbaiahmed1/react-native-blur?style=for-the-badge&color=orange" alt="license" />
|
|
9
9
|
<img src="https://img.shields.io/github/stars/sbaiahmed1/react-native-blur?style=for-the-badge&color=yellow" alt="stars" />
|
|
10
10
|
</p>
|
|
@@ -19,22 +19,44 @@ A modern React Native blur view component that provides native blur effects and
|
|
|
19
19
|
## Liquid Glass Demo
|
|
20
20
|
|
|
21
21
|
<div align="center">
|
|
22
|
-
<img src="liquidGlass.gif" alt="Liquid Glass Demo" width="300" />
|
|
23
22
|
<br>
|
|
24
|
-
<em>Liquid Glass effect in action</em>
|
|
23
|
+
<em>Liquid Glass effect in action (iOS 26+ only)</em>
|
|
24
|
+
<br>
|
|
25
|
+
<strong>⚠️ Android automatically falls back to enhanced blur with tint overlay</strong>
|
|
25
26
|
</div>
|
|
26
27
|
|
|
27
28
|
## Blur Demo
|
|
29
|
+
## Liquid Glass Demo
|
|
28
30
|
|
|
29
31
|
<div align="center">
|
|
30
|
-
<img src="
|
|
31
|
-
<img src="android-demo.gif" alt="Android Demo" width="300" />
|
|
32
|
+
<img src="ios-blur-glass-demo.gif" alt="iOS Demo" width="300" />
|
|
33
|
+
<img src="android-blur-glass-demo.gif" alt="Android Demo" width="300" />
|
|
32
34
|
|
|
33
35
|
<br>
|
|
34
36
|
<em>iOS (left) and Android (right) blur effects in action</em>
|
|
37
|
+
<br>
|
|
38
|
+
<em>Liquid Glass effect in action (iOS 26+ only)</em>
|
|
39
|
+
<br>
|
|
40
|
+
<strong>⚠️ Android automatically falls back to enhanced blur with tint overlay</strong>
|
|
35
41
|
</div>
|
|
36
42
|
|
|
43
|
+
## Version Compatibility
|
|
44
|
+
|
|
45
|
+
### Xcode Requirements
|
|
46
|
+
|
|
47
|
+
| Library Version | Minimum Xcode Version | iOS Features Available |
|
|
48
|
+
|-----------------|----------------------|----------------------|
|
|
49
|
+
| **3.0.0+** (Current) | **Xcode 26.0** | ✅ Full liquid glass effects with UIGlassEffect API<br/>✅ Enhanced SwiftUI implementation<br/>✅ All blur types and system materials |
|
|
50
|
+
| **2.1.0** | Xcode 16.0+ | ✅ Standard blur effects<br/>✅ System materials (iOS 13+)<br/>❌ No liquid glass effects |
|
|
37
51
|
|
|
52
|
+
### Xcode 26.0+ Compatibility Table
|
|
53
|
+
|
|
54
|
+
| Xcode Version | Library Compatibility | Features Available | Notes |
|
|
55
|
+
|---------------|----------------------|-------------------|-------|
|
|
56
|
+
| **Xcode 26.0+** | ✅ **Fully Supported** | ✅ All features including liquid glass effects<br/>✅ UIGlassEffect API<br/>✅ SwiftUI implementation<br/>✅ All blur types and system materials | **Recommended for current version** |
|
|
57
|
+
| **Xcode 16.x and below** | ❌ **Not Supported** | ❌ Liquid glass effects<br/>❌ UIGlassEffect API<br/>⚠️ Basic blur effects may work with limitations | Use library version 2.1.0 instead |
|
|
58
|
+
|
|
59
|
+
> 💡 **Migration Tip**: If you're unable to upgrade to Xcode 26.0, please use version **2.1.0** of this library which supports Xcode 16.0 and provides standard blur effects without liquid glass capabilities.
|
|
38
60
|
|
|
39
61
|
## Features
|
|
40
62
|
|
|
@@ -54,143 +76,253 @@ A modern React Native blur view component that provides native blur effects and
|
|
|
54
76
|
|
|
55
77
|
This section provides a detailed comparison between `@sbaiahmed1/react-native-blur` and other popular blur libraries in the React Native ecosystem.
|
|
56
78
|
|
|
57
|
-
### vs. [@react-native-community/blur](https://www.npmjs.com/package/@react-native-community/blur)
|
|
79
|
+
### 🆚 vs. [@react-native-community/blur](https://www.npmjs.com/package/@react-native-community/blur)
|
|
58
80
|
|
|
59
81
|
| Feature | @sbaiahmed1/react-native-blur | @react-native-community/blur |
|
|
60
82
|
|------------------------------|-------------------------------------|---------------------------------------|
|
|
61
|
-
|
|
|
62
|
-
|
|
|
63
|
-
|
|
|
64
|
-
|
|
|
65
|
-
|
|
|
66
|
-
|
|
|
67
|
-
|
|
|
68
|
-
|
|
|
69
|
-
|
|
|
70
|
-
|
|
|
71
|
-
|
|
|
72
|
-
|
|
73
|
-
**
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
-
|
|
79
|
-
-
|
|
83
|
+
| **🏗️ New Architecture Support** | ✅ Full Fabric/Turbo Module support | ❌ Limited support, crashes on Android |
|
|
84
|
+
| **🤖 Android Real Blur** | ✅ Hardware-accelerated real blur + liquid glass | Hardware-accelerated real blur |
|
|
85
|
+
| **🍎 iOS Blur Quality** | ✅ Native UIVisualEffectView + UIGlassEffect | ✅ Native UIVisualEffectView only |
|
|
86
|
+
| **💎 Liquid Glass Effects** | ✅ Full support (iOS 26+ UIGlassEffect & Android) | ❌ Not supported |
|
|
87
|
+
| **📝 TypeScript Support** | ✅ Complete TypeScript definitions with IntelliSense | ⚠️ Basic TypeScript support |
|
|
88
|
+
| **🔧 Maintenance Status** | ✅ Actively maintained | ⚠️ Community-maintained, slower updates |
|
|
89
|
+
| **📦 Bundle Size** | 🟡 Moderate (includes native blur libs) | 🟡 Moderate (includes BlurView lib) |
|
|
90
|
+
| **🎯 API Design** | ✅ Modern, intuitive API with smart defaults | 🟡 Legacy API design |
|
|
91
|
+
| **⚡ Performance** | ✅ Hardware-accelerated on both platforms | ✅ Hardware-accelerated on both platforms |
|
|
92
|
+
| **♿ Accessibility** | ✅ Full reduced transparency + motion support | ✅ Basic reduced transparency support |
|
|
93
|
+
| **📚 Documentation** | ✅ Comprehensive guides + live examples | 🟡 Basic README documentation |
|
|
94
|
+
| **🎨 Blur Types** | ✅ iOS system materials + custom Android effects | ✅ iOS blur types (including iOS 13 materials) |
|
|
95
|
+
| **🔧 Android Blur Methods** | ✅ Native hardware-accelerated blur | ✅ Native hardware-accelerated blur |
|
|
96
|
+
| **📱 Platform Support** | ✅ iOS, Android with feature parity | ✅ iOS (full), Android (limited overlay) |
|
|
97
|
+
|
|
98
|
+
**🚀 Why Choose @sbaiahmed1/react-native-blur:**
|
|
99
|
+
|
|
100
|
+
- **🎯 Revolutionary Android Experience**: First library to bring **real hardware-accelerated blur** to Android, including liquid glass effects. No more fake transparency overlays!
|
|
101
|
+
- **💎 Liquid Glass Pioneer**: Only library supporting iOS 26+ UIGlassEffect API for stunning liquid glass materials on both platforms
|
|
102
|
+
- **🏗️ Future-Proof Architecture**: Built exclusively for React Native's new architecture (Fabric/Turbo Modules) - no legacy baggage
|
|
103
|
+
- **⚡ Superior Performance**: Hardware acceleration on both platforms with GPU-optimized rendering pipelines
|
|
104
|
+
- **🔧 Modern Development**: Swift for iOS, Kotlin for Android - leveraging the latest native technologies
|
|
105
|
+
- **📈 Active Innovation**: Regular feature updates, performance improvements, and new blur effects
|
|
80
106
|
|
|
81
107
|
**When to choose @react-native-community/blur:**
|
|
82
|
-
-
|
|
83
|
-
-
|
|
84
|
-
-
|
|
108
|
+
- Legacy projects that can't upgrade to new architecture
|
|
109
|
+
- iOS-only applications where Android blur quality isn't important
|
|
110
|
+
- Projects requiring maximum stability over cutting-edge features
|
|
85
111
|
|
|
86
|
-
### vs. [expo-blur](https://
|
|
112
|
+
### 🆚 vs. [expo-blur](https://docs.expo.dev/versions/latest/sdk/blur-view/)
|
|
87
113
|
|
|
88
114
|
| Feature | @sbaiahmed1/react-native-blur | expo-blur |
|
|
89
115
|
|---------|------------------------------|----------|
|
|
90
|
-
|
|
|
91
|
-
|
|
|
92
|
-
|
|
|
93
|
-
|
|
|
94
|
-
|
|
|
95
|
-
|
|
|
96
|
-
|
|
|
97
|
-
| **
|
|
98
|
-
|
|
|
99
|
-
|
|
|
100
|
-
|
|
|
101
|
-
|
|
102
|
-
**
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
-
|
|
116
|
+
| **🚫 Expo Dependency** | ✅ Zero dependencies on Expo ecosystem | ❌ Requires Expo SDK + managed workflow |
|
|
117
|
+
| **📱 Bare React Native** | ✅ Works with any RN project out-of-the-box | ⚠️ Complex setup for bare RN projects |
|
|
118
|
+
| **🤖 Android Support** | ✅ Real hardware-accelerated blur + liquid glass | ⚠️ Simple overlay + Experimental blur (experimentalBlurMethod prop) |
|
|
119
|
+
| **🍎 iOS Support** | ✅ Full native blur + UIGlassEffect (iOS 26+) | ✅ Native UIVisualEffectView support |
|
|
120
|
+
| **💎 Liquid Glass Effects** | ✅ Full support (iOS 26+ UIGlassEffect & Android) | ❌ Not supported, no plans to add |
|
|
121
|
+
| **📦 Bundle Size** | 🟡 Moderate (includes native libs) | ✅ Lightweight (when using Expo managed) |
|
|
122
|
+
| **⚙️ Setup Complexity** | ✅ Simple `npm install` + auto-linking | 🟡 Requires Expo development build setup |
|
|
123
|
+
| **🎨 Blur Types** | ✅ iOS system materials + custom Android effects | ✅ iOS tint types (light, dark, system materials) |
|
|
124
|
+
| **🎯 API Design** | ✅ `blurAmount` + `blurType` for precise control | ✅ `intensity` + `tint` (simple but limited) |
|
|
125
|
+
| **🏗️ New Architecture** | ✅ Native Fabric/Turbo Module support | ✅ Expo handles compatibility layer |
|
|
126
|
+
| **👨💻 Development Experience** | ✅ Standard RN development workflow | ✅ Excellent with Expo CLI tools |
|
|
127
|
+
| **🚀 Production Flexibility** | ✅ Any deployment method (CodePush, OTA, stores) | 🟡 Limited to Expo/EAS deployment |
|
|
128
|
+
| **🔧 Native Module Integration** | ✅ Easy integration with other native modules | ⚠️ May conflict with Expo managed workflow |
|
|
129
|
+
| **🤖 Android Blur Quality** | ✅ Hardware-accelerated real blur | ❌ Experimental (dimezisBlurView or none fallback) |
|
|
130
|
+
|
|
131
|
+
**🚀 Why Choose @sbaiahmed1/react-native-blur:**
|
|
132
|
+
|
|
133
|
+
- **🔓 No Vendor Lock-in**: Complete freedom from Expo ecosystem - works with any React Native setup
|
|
134
|
+
- **🎯 Revolutionary Android**: First library to deliver **real blur effects** on Android, not fake transparency tricks
|
|
135
|
+
- **💎 Liquid Glass Innovation**: Exclusive support for cutting-edge liquid glass materials on both platforms
|
|
136
|
+
- **🏢 Enterprise Ready**: Perfect for brownfield apps, custom native modules, and complex deployment scenarios
|
|
137
|
+
- **🎨 Advanced Customization**: 15+ iOS system materials plus custom Android blur implementations
|
|
138
|
+
- **⚡ Direct Performance**: No abstraction layers - direct access to native blur APIs for maximum performance
|
|
139
|
+
- **🔧 Developer Freedom**: Use any build system, deployment method, or native module without restrictions
|
|
108
140
|
|
|
109
141
|
**When to choose expo-blur:**
|
|
110
|
-
-
|
|
111
|
-
-
|
|
112
|
-
-
|
|
113
|
-
-
|
|
142
|
+
- Already deeply invested in Expo managed workflow
|
|
143
|
+
- Building simple apps with basic blur needs (iOS-focused)
|
|
144
|
+
- Prefer Expo's managed dependency system over manual configuration
|
|
145
|
+
- Don't need advanced blur effects or Android blur quality
|
|
114
146
|
|
|
115
|
-
### Performance Comparison
|
|
147
|
+
### ⚡ Performance Comparison
|
|
116
148
|
|
|
117
149
|
| Metric | @sbaiahmed1/react-native-blur | @react-native-community/blur | expo-blur |
|
|
118
150
|
|--------|------------------------------|------------------------------|----------|
|
|
119
|
-
|
|
|
120
|
-
|
|
|
121
|
-
|
|
|
122
|
-
|
|
|
123
|
-
|
|
|
151
|
+
| **🍎 iOS Rendering** | Hardware-accelerated UIVisualEffect + UIGlassEffect | Hardware-accelerated UIVisualEffect | Hardware-accelerated UIVisualEffect |
|
|
152
|
+
| **🤖 Android Rendering** | **Hardware-accelerated real blur** | **Hardware-accelerated real blur** | ❌ Software overlay (fake blur) |
|
|
153
|
+
| **🧠 Memory Usage** | Optimized with native BlurView libs | Optimized with native BlurView libs | Low (no real Android blur) |
|
|
154
|
+
| **⚙️ CPU Impact** | Low (GPU-based on both platforms) | iOS: Low, Android: Minimal (no blur) | iOS: Low, Android: Minimal (no blur) |
|
|
155
|
+
| **📊 Frame Rate Impact** | Minimal impact on both platforms | iOS: Minimal, Android: None (no blur) | iOS: Minimal, Android: None (no blur) |
|
|
156
|
+
| **🎯 Blur Quality** | **Excellent on both platforms** | iOS: Excellent, Android: Poor | iOS: Good, Android: Poor |
|
|
157
|
+
| **💎 Liquid Glass Performance** | **Native UIGlassEffect + Android equivalent** | ❌ Not available | ❌ Not available |
|
|
158
|
+
| **🚀 New Architecture Performance** | **Optimized for Fabric/Turbo Modules** | Limited compatibility | Expo abstraction layer |
|
|
124
159
|
|
|
125
|
-
### Community & Support
|
|
160
|
+
### 🤝 Community & Support
|
|
126
161
|
|
|
127
162
|
| Aspect | @sbaiahmed1/react-native-blur | @react-native-community/blur | expo-blur |
|
|
128
163
|
|--------|------------------------------|------------------------------|----------|
|
|
129
|
-
|
|
|
130
|
-
|
|
|
131
|
-
|
|
|
132
|
-
|
|
|
133
|
-
|
|
|
164
|
+
| **⭐ GitHub Stars** | 🆕 Growing rapidly (new innovative features) | 🌟 Established (3.8k+, legacy codebase) | 🌟 Part of Expo ecosystem |
|
|
165
|
+
| **🎯 Issue Response** | ✅ **Active core maintainer** (< 24h response) | 🟡 Community-driven (slow response) | ✅ Expo team support |
|
|
166
|
+
| **📚 Documentation Quality** | ✅ **Comprehensive guides + live examples** | 🟡 Basic README only | ✅ Good (Expo docs) |
|
|
167
|
+
| **🔄 Update Frequency** | ✅ **Regular feature updates** (weekly/monthly) | 🟡 Sporadic maintenance updates | ✅ Regular (with Expo releases) |
|
|
168
|
+
| **💔 Breaking Changes** | ✅ **Strict semantic versioning** | ⚠️ Occasional unannounced changes | ✅ Managed by Expo |
|
|
169
|
+
| **🐛 Bug Fixes** | ✅ **Rapid fixes** (same-day for critical issues) | 🟡 Depends on community availability | ✅ Good (Expo team) |
|
|
170
|
+
| **💡 Feature Requests** | ✅ **Actively considered** (roadmap-driven) | 🟡 Limited by maintainer capacity | 🟡 Limited to Expo priorities |
|
|
171
|
+
| **🔧 Technical Support** | ✅ **Direct maintainer support** | 🟡 Community forums only | ✅ Expo Discord/forums |
|
|
134
172
|
|
|
135
|
-
### Migration Guide
|
|
173
|
+
### 🔄 Migration Guide
|
|
136
174
|
|
|
137
|
-
#### From @react-native-community/blur
|
|
175
|
+
#### 🚀 From @react-native-community/blur
|
|
138
176
|
|
|
139
177
|
```tsx
|
|
140
|
-
// Before
|
|
178
|
+
// Before - Limited Android support
|
|
141
179
|
import { BlurView } from '@react-native-community/blur';
|
|
142
180
|
|
|
143
|
-
|
|
181
|
+
<BlurView
|
|
182
|
+
style={styles.absolute}
|
|
183
|
+
blurType="light" // Limited to iOS blur types only
|
|
184
|
+
blurAmount={10} // Max 32 on Android (clamped)
|
|
185
|
+
reducedTransparencyFallbackColor="white"
|
|
186
|
+
/>
|
|
187
|
+
|
|
188
|
+
// After - Full platform support + liquid glass
|
|
144
189
|
import { BlurView } from '@sbaiahmed1/react-native-blur';
|
|
145
190
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
//
|
|
149
|
-
//
|
|
191
|
+
<BlurView
|
|
192
|
+
style={styles.absolute}
|
|
193
|
+
blurType="light" // Same API!
|
|
194
|
+
blurAmount={10} // No Android limitations
|
|
195
|
+
reducedTransparencyFallbackColor="white"
|
|
196
|
+
// NEW: Liquid glass support
|
|
197
|
+
type="liquidGlass" // Enable liquid glass effects
|
|
198
|
+
glassType="regular" // iOS 26+ UIGlassEffect styles
|
|
199
|
+
glassTintColor="#007AFF" // Glass tint color
|
|
200
|
+
glassOpacity={0.8} // Glass opacity (0-1)
|
|
201
|
+
/>
|
|
150
202
|
```
|
|
151
203
|
|
|
152
|
-
|
|
204
|
+
**✨ Migration Benefits:**
|
|
205
|
+
- **🎯 Zero Breaking Changes**: Drop-in replacement with same API
|
|
206
|
+
- **🤖 Real Android Blur**: Instantly get hardware-accelerated blur on Android
|
|
207
|
+
- **💎 Liquid Glass Bonus**: Add cutting-edge liquid glass effects with one prop
|
|
208
|
+
- **⚡ Better Performance**: Hardware acceleration on both platforms
|
|
209
|
+
- **🏗️ Future-Proof**: Built for React Native's new architecture
|
|
210
|
+
|
|
211
|
+
#### 🚀 From expo-blur
|
|
153
212
|
|
|
154
213
|
```tsx
|
|
155
|
-
// Before
|
|
214
|
+
// Before - Expo dependency + limited Android
|
|
156
215
|
import { BlurView } from 'expo-blur';
|
|
157
216
|
|
|
158
|
-
|
|
217
|
+
<BlurView
|
|
218
|
+
intensity={50} // 0-100 intensity scale
|
|
219
|
+
tint="light" // light, dark, default, system materials
|
|
220
|
+
experimentalBlurMethod="dimezisBlurView" // Android experimental blur
|
|
221
|
+
style={styles.absolute}
|
|
222
|
+
>
|
|
223
|
+
<Text>Content</Text>
|
|
224
|
+
</BlurView>
|
|
225
|
+
|
|
226
|
+
// After - No dependencies + real Android blur
|
|
159
227
|
import { BlurView } from '@sbaiahmed1/react-native-blur';
|
|
160
228
|
|
|
161
|
-
|
|
162
|
-
//
|
|
163
|
-
//
|
|
164
|
-
|
|
229
|
+
<BlurView
|
|
230
|
+
blurAmount={50} // intensity → blurAmount (same scale)
|
|
231
|
+
blurType="light" // tint → blurType (same options + more)
|
|
232
|
+
style={styles.absolute}
|
|
233
|
+
// NEW: Advanced features
|
|
234
|
+
type="liquidGlass" // Liquid glass effects
|
|
235
|
+
glassType="regular" // iOS 26+ materials
|
|
236
|
+
glassTintColor="#007AFF" // Glass tint color
|
|
237
|
+
glassOpacity={0.8} // Glass opacity (0-1)
|
|
238
|
+
isInteractive={true} // Touch interaction support
|
|
239
|
+
// No experimental props needed - real blur by default
|
|
240
|
+
>
|
|
241
|
+
<Text>Content</Text>
|
|
242
|
+
</BlurView>
|
|
165
243
|
```
|
|
166
244
|
|
|
245
|
+
**✨ Migration Benefits:**
|
|
246
|
+
- **🔓 No Vendor Lock-in**: Remove Expo dependency completely
|
|
247
|
+
- **🎯 Real Android Blur**: Get actual blur effects, not fake transparency
|
|
248
|
+
- **💎 Liquid Glass Effects**: Access to cutting-edge iOS 26+ materials
|
|
249
|
+
- **🚀 Deployment Freedom**: Use any build system or deployment method
|
|
250
|
+
- **🎨 More Customization**: 15+ blur types vs basic intensity control
|
|
251
|
+
|
|
252
|
+
#### 🛠️ Quick Migration Checklist
|
|
253
|
+
|
|
254
|
+
1. **Install the library:**
|
|
255
|
+
```bash
|
|
256
|
+
npm uninstall @react-native-community/blur expo-blur
|
|
257
|
+
npm install @sbaiahmed1/react-native-blur
|
|
258
|
+
```
|
|
259
|
+
|
|
260
|
+
2. **Update imports:**
|
|
261
|
+
```tsx
|
|
262
|
+
// Replace old imports
|
|
263
|
+
import { BlurView } from '@sbaiahmed1/react-native-blur';
|
|
264
|
+
```
|
|
265
|
+
|
|
266
|
+
3. **Optional: Add liquid glass effects:**
|
|
267
|
+
```tsx
|
|
268
|
+
<BlurView
|
|
269
|
+
type="liquidGlass"
|
|
270
|
+
glassType="regular"
|
|
271
|
+
glassTintColor="#007AFF"
|
|
272
|
+
glassOpacity={0.8}
|
|
273
|
+
/>
|
|
274
|
+
```
|
|
275
|
+
|
|
276
|
+
4. **Test on Android:** Experience real blur effects for the first time! 🎉
|
|
277
|
+
|
|
167
278
|
### Recommendation
|
|
168
279
|
|
|
169
280
|
**Choose @sbaiahmed1/react-native-blur if:**
|
|
170
|
-
- You
|
|
171
|
-
- You
|
|
172
|
-
- You
|
|
173
|
-
- You
|
|
174
|
-
- You
|
|
281
|
+
- You need **real blur effects on Android** (not experimental/fallback methods)
|
|
282
|
+
- You want **liquid glass effects** for modern iOS apps (iOS 26+)
|
|
283
|
+
- You're building with **React Native's new architecture** (Fabric/Turbo Modules)
|
|
284
|
+
- You need **maximum performance** on both platforms
|
|
285
|
+
- You want **comprehensive TypeScript support** with IntelliSense
|
|
286
|
+
- You prefer **modern API design** with intuitive prop names
|
|
287
|
+
- You need **unlimited blur intensity** on Android (no 32-unit clamp)
|
|
175
288
|
|
|
176
289
|
**Choose @react-native-community/blur if:**
|
|
177
|
-
- You
|
|
178
|
-
-
|
|
179
|
-
-
|
|
290
|
+
- You're working with **legacy React Native projects** (< 0.68)
|
|
291
|
+
- You need **battle-tested stability** over cutting-edge features
|
|
292
|
+
- Your app **primarily targets iOS** (where it performs excellently)
|
|
293
|
+
- You can accept **limited Android blur quality** (overlay-based)
|
|
294
|
+
- You prefer **community-driven** open source projects
|
|
180
295
|
|
|
181
296
|
**Choose expo-blur if:**
|
|
182
|
-
- You're already committed to the Expo ecosystem
|
|
183
|
-
- You
|
|
184
|
-
- You
|
|
297
|
+
- You're already **committed to the Expo ecosystem**
|
|
298
|
+
- You're building **simple apps** with basic blur needs
|
|
299
|
+
- You want **zero native configuration** (Expo managed workflow)
|
|
300
|
+
- **Bundle size** is your primary concern
|
|
301
|
+
- You can accept **experimental Android blur** with potential fallbacks
|
|
302
|
+
|
|
303
|
+
## Version Compatibility
|
|
304
|
+
|
|
305
|
+
### Xcode Requirements
|
|
185
306
|
|
|
186
|
-
|
|
307
|
+
| Library Version | Minimum Xcode Version | iOS Features Available |
|
|
308
|
+
|-----------------|----------------------|----------------------|
|
|
309
|
+
| **3.0.0+** (Current) | **Xcode 26.0** | ✅ Full liquid glass effects with UIGlassEffect API<br/>✅ Enhanced SwiftUI implementation<br/>✅ All blur types and system materials |
|
|
310
|
+
| **2.1.0** | Xcode 16.0+ | ✅ Standard blur effects<br/>✅ System materials (iOS 13+)<br/>❌ No liquid glass effects |
|
|
187
311
|
|
|
188
|
-
|
|
312
|
+
### Xcode 26.0+ Compatibility Table
|
|
189
313
|
|
|
190
|
-
|
|
191
|
-
|
|
314
|
+
| Xcode Version | Library Compatibility | Features Available | Notes |
|
|
315
|
+
|---------------|----------------------|-------------------|-------|
|
|
316
|
+
| **Xcode 26.0+** | ✅ **Fully Supported** | ✅ All features including liquid glass effects<br/>✅ UIGlassEffect API<br/>✅ SwiftUI implementation<br/>✅ All blur types and system materials | **Recommended for current version** |
|
|
317
|
+
| **Xcode 16.x and below** | ❌ **Not Supported** | ❌ Liquid glass effects<br/>❌ UIGlassEffect API<br/>⚠️ Basic blur effects may work with limitations | Use library version 2.1.0 instead |
|
|
192
318
|
|
|
193
|
-
|
|
319
|
+
> ⚠️ **Critical Requirement**: The current version (3.0.0+) requires **Xcode 26.0 or higher** and will not work with older Xcode versions. This is a hard requirement due to the UIGlassEffect API and SwiftUI enhancements introduced in Xcode 26.0.
|
|
320
|
+
|
|
321
|
+
> 💡 **Migration Tip**: If you're unable to upgrade to Xcode 26.0, please use version **2.1.0** of this library which supports Xcode 16.0 and provides standard blur effects without liquid glass capabilities.
|
|
322
|
+
|
|
323
|
+
### Installation by Xcode Version
|
|
324
|
+
|
|
325
|
+
**For Xcode 26.0+:**
|
|
194
326
|
|
|
195
327
|
## Installation
|
|
196
328
|
|
|
@@ -337,12 +469,13 @@ All props are optional and have sensible defaults.
|
|
|
337
469
|
|
|
338
470
|
| Prop | Type | Default | Description |
|
|
339
471
|
|------|------|---------|-------------|
|
|
340
|
-
| `type` | `'blur' \| 'liquidGlass'` | `'blur'` | The type of effect to apply |
|
|
472
|
+
| `type` | `'blur' \| 'liquidGlass'` | `'blur'` | The type of effect to apply. **Note**: `'liquidGlass'` is iOS 26+ only, falls back to enhanced blur on Android |
|
|
341
473
|
| `blurType` | `BlurType` | `'xlight'` | The type of blur effect to apply |
|
|
342
474
|
| `blurAmount` | `number` | `10.0` | The intensity of the blur effect (0-100) |
|
|
343
475
|
| `glassType` | `GlassType` | `'clear'` | The type of glass effect |
|
|
344
476
|
| `glassTintColor` | `string` | `'clear'` | The tint color for glass effect |
|
|
345
477
|
| `glassOpacity` | `number` | `1.0` | The opacity of glass effect (0-1) |
|
|
478
|
+
| `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+. |
|
|
346
479
|
| `reducedTransparencyFallbackColor` | `string` | `'#FFFFFF'` | Fallback color when reduced transparency is enabled |
|
|
347
480
|
| `style` | `ViewStyle` | `undefined` | Style object for the blur view |
|
|
348
481
|
| `children` | `ReactNode` | `undefined` | Child components to render inside the blur view |
|
|
@@ -379,7 +512,9 @@ On iOS, this component has been completely rewritten using **SwiftUI** for moder
|
|
|
379
512
|
- **SwiftUI Integration**: Leverages SwiftUI's declarative UI for better performance and maintainability
|
|
380
513
|
|
|
381
514
|
### Android
|
|
382
|
-
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.
|
|
515
|
+
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.
|
|
516
|
+
|
|
517
|
+
**⚠️ 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.
|
|
383
518
|
|
|
384
519
|
## Accessibility
|
|
385
520
|
|
|
@@ -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
|
+
}
|
|
@@ -17,7 +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<
|
|
20
|
+
registry->add(concreteComponentDescriptorProvider<ReactNativeGlassEffectContainerComponentDescriptor>());
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
} // namespace facebook::react
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
namespace facebook::react {
|
|
18
18
|
|
|
19
19
|
using ReactNativeBlurViewComponentDescriptor = ConcreteComponentDescriptor<ReactNativeBlurViewShadowNode>;
|
|
20
|
-
using
|
|
20
|
+
using ReactNativeGlassEffectContainerComponentDescriptor = ConcreteComponentDescriptor<ReactNativeGlassEffectContainerShadowNode>;
|
|
21
21
|
|
|
22
22
|
void ReactNativeBlurViewSpec_registerComponentDescriptorsFromCodegen(
|
|
23
23
|
std::shared_ptr<const ComponentDescriptorProviderRegistry> registry);
|
|
@@ -20,7 +20,7 @@ class ReactNativeBlurViewEventEmitter : public ViewEventEmitter {
|
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
};
|
|
23
|
-
class
|
|
23
|
+
class ReactNativeGlassEffectContainerEventEmitter : public ViewEventEmitter {
|
|
24
24
|
public:
|
|
25
25
|
using ViewEventEmitter::ViewEventEmitter;
|
|
26
26
|
|
|
@@ -19,18 +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}))
|
|
25
30
|
{}
|
|
26
|
-
|
|
31
|
+
ReactNativeGlassEffectContainerProps::ReactNativeGlassEffectContainerProps(
|
|
27
32
|
const PropsParserContext &context,
|
|
28
|
-
const
|
|
33
|
+
const ReactNativeGlassEffectContainerProps &sourceProps,
|
|
29
34
|
const RawProps &rawProps): ViewProps(context, sourceProps, rawProps),
|
|
30
35
|
|
|
31
|
-
glassType(convertRawProp(context, rawProps, "glassType", sourceProps.glassType, {
|
|
32
|
-
|
|
33
|
-
|
|
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"}))
|
|
34
44
|
{}
|
|
35
45
|
|
|
36
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,37 +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};
|
|
61
96
|
};
|
|
62
97
|
|
|
63
|
-
enum class
|
|
98
|
+
enum class ReactNativeGlassEffectContainerGlassType { Clear, Regular };
|
|
64
99
|
|
|
65
|
-
static inline void fromRawValue(const PropsParserContext& context, const RawValue &value,
|
|
100
|
+
static inline void fromRawValue(const PropsParserContext& context, const RawValue &value, ReactNativeGlassEffectContainerGlassType &result) {
|
|
66
101
|
auto string = (std::string)value;
|
|
67
|
-
if (string == "clear") { result =
|
|
68
|
-
if (string == "
|
|
102
|
+
if (string == "clear") { result = ReactNativeGlassEffectContainerGlassType::Clear; return; }
|
|
103
|
+
if (string == "regular") { result = ReactNativeGlassEffectContainerGlassType::Regular; return; }
|
|
69
104
|
abort();
|
|
70
105
|
}
|
|
71
106
|
|
|
72
|
-
static inline std::string toString(const
|
|
107
|
+
static inline std::string toString(const ReactNativeGlassEffectContainerGlassType &value) {
|
|
73
108
|
switch (value) {
|
|
74
|
-
case
|
|
75
|
-
case
|
|
109
|
+
case ReactNativeGlassEffectContainerGlassType::Clear: return "clear";
|
|
110
|
+
case ReactNativeGlassEffectContainerGlassType::Regular: return "regular";
|
|
76
111
|
}
|
|
77
112
|
}
|
|
78
113
|
|
|
79
|
-
class
|
|
114
|
+
class ReactNativeGlassEffectContainerProps final : public ViewProps {
|
|
80
115
|
public:
|
|
81
|
-
|
|
82
|
-
|
|
116
|
+
ReactNativeGlassEffectContainerProps() = default;
|
|
117
|
+
ReactNativeGlassEffectContainerProps(const PropsParserContext& context, const ReactNativeGlassEffectContainerProps &sourceProps, const RawProps &rawProps);
|
|
83
118
|
|
|
84
119
|
#pragma mark - Props
|
|
85
120
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
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"};
|
|
89
129
|
};
|
|
90
130
|
|
|
91
131
|
} // namespace facebook::react
|
|
@@ -13,6 +13,6 @@
|
|
|
13
13
|
namespace facebook::react {
|
|
14
14
|
|
|
15
15
|
extern const char ReactNativeBlurViewComponentName[] = "ReactNativeBlurView";
|
|
16
|
-
extern const char
|
|
16
|
+
extern const char ReactNativeGlassEffectContainerComponentName[] = "ReactNativeGlassEffectContainer";
|
|
17
17
|
|
|
18
18
|
} // namespace facebook::react
|
|
@@ -29,15 +29,15 @@ using ReactNativeBlurViewShadowNode = ConcreteViewShadowNode<
|
|
|
29
29
|
ReactNativeBlurViewEventEmitter,
|
|
30
30
|
ReactNativeBlurViewState>;
|
|
31
31
|
|
|
32
|
-
JSI_EXPORT extern const char
|
|
32
|
+
JSI_EXPORT extern const char ReactNativeGlassEffectContainerComponentName[];
|
|
33
33
|
|
|
34
34
|
/*
|
|
35
|
-
* `ShadowNode` for <
|
|
35
|
+
* `ShadowNode` for <ReactNativeGlassEffectContainer> component.
|
|
36
36
|
*/
|
|
37
|
-
using
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
37
|
+
using ReactNativeGlassEffectContainerShadowNode = ConcreteViewShadowNode<
|
|
38
|
+
ReactNativeGlassEffectContainerComponentName,
|
|
39
|
+
ReactNativeGlassEffectContainerProps,
|
|
40
|
+
ReactNativeGlassEffectContainerEventEmitter,
|
|
41
|
+
ReactNativeGlassEffectContainerState>;
|
|
42
42
|
|
|
43
43
|
} // namespace facebook::react
|
|
@@ -26,12 +26,12 @@ public:
|
|
|
26
26
|
#endif
|
|
27
27
|
};
|
|
28
28
|
|
|
29
|
-
class
|
|
29
|
+
class ReactNativeGlassEffectContainerState {
|
|
30
30
|
public:
|
|
31
|
-
|
|
31
|
+
ReactNativeGlassEffectContainerState() = default;
|
|
32
32
|
|
|
33
33
|
#ifdef ANDROID
|
|
34
|
-
|
|
34
|
+
ReactNativeGlassEffectContainerState(ReactNativeGlassEffectContainerState const &previousState, folly::dynamic data){};
|
|
35
35
|
folly::dynamic getDynamic() const {
|
|
36
36
|
return {};
|
|
37
37
|
};
|
|
@@ -433,6 +433,14 @@ class ReactNativeBlurView : BlurView {
|
|
|
433
433
|
logDebug("setType: $type")
|
|
434
434
|
updateViewType()
|
|
435
435
|
}
|
|
436
|
+
|
|
437
|
+
/**
|
|
438
|
+
* Set the view type (blur or liquidGlass).
|
|
439
|
+
* @param type The view type string
|
|
440
|
+
*/
|
|
441
|
+
fun setIsInteractive(isInteractive: Boolean) {
|
|
442
|
+
logDebug("setType: $isInteractive")
|
|
443
|
+
}
|
|
436
444
|
|
|
437
445
|
/**
|
|
438
446
|
* Set the glass type for liquid glass effect.
|
|
@@ -63,6 +63,11 @@ class ReactNativeBlurViewManager : ViewGroupManager<ReactNativeBlurView>(),
|
|
|
63
63
|
override fun setGlassType(view: ReactNativeBlurView?, glassType: String?) {
|
|
64
64
|
view?.setGlassType(glassType ?: "clear")
|
|
65
65
|
}
|
|
66
|
+
|
|
67
|
+
@ReactProp(name = "isInteractive")
|
|
68
|
+
override fun setIsInteractive(view: ReactNativeBlurView?, isInteractive: Boolean) {
|
|
69
|
+
view?.setIsInteractive(isInteractive)
|
|
70
|
+
}
|
|
66
71
|
|
|
67
72
|
companion object {
|
|
68
73
|
const val NAME = "ReactNativeBlurView"
|
|
@@ -149,6 +149,9 @@ using namespace facebook::react;
|
|
|
149
149
|
[ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withBlurType:blurTypeString];
|
|
150
150
|
}
|
|
151
151
|
|
|
152
|
+
// Set initial isInteractive from default props
|
|
153
|
+
[ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withIsInteractive:bvProps.isInteractive];
|
|
154
|
+
|
|
152
155
|
// Set initial glassType from default props
|
|
153
156
|
if (bvProps.glassType != facebook::react::ReactNativeBlurViewGlassType::Clear) {
|
|
154
157
|
NSString *glassTypeString = [[NSString alloc] initWithUTF8String:toString(bvProps.glassType).c_str()];
|
|
@@ -217,6 +220,11 @@ using namespace facebook::react;
|
|
|
217
220
|
[ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withType:blurTypeString];
|
|
218
221
|
}
|
|
219
222
|
|
|
223
|
+
// Update isInteractive if it has changed
|
|
224
|
+
if (oldViewProps.isInteractive != newViewProps.isInteractive) {
|
|
225
|
+
[ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withIsInteractive:newViewProps.isInteractive];
|
|
226
|
+
}
|
|
227
|
+
|
|
220
228
|
// Update reducedTransparencyFallbackColor if it has changed
|
|
221
229
|
if (oldViewProps.reducedTransparencyFallbackColor != newViewProps.reducedTransparencyFallbackColor) {
|
|
222
230
|
if (!newViewProps.reducedTransparencyFallbackColor.empty()) {
|
|
@@ -130,6 +130,7 @@ private struct BasicColoredView: View {
|
|
|
130
130
|
var type: String
|
|
131
131
|
var glassType: String
|
|
132
132
|
var reducedTransparencyFallbackColor: UIColor
|
|
133
|
+
var isInteractive: Bool
|
|
133
134
|
|
|
134
135
|
var body: some View {
|
|
135
136
|
let blurIntensity = mapBlurAmountToIntensity(blurAmount)
|
|
@@ -150,7 +151,7 @@ private struct BasicColoredView: View {
|
|
|
150
151
|
baseGlassEffect
|
|
151
152
|
.tint(Color(glassTintColor)
|
|
152
153
|
.opacity(glassOpacity))
|
|
153
|
-
.interactive(
|
|
154
|
+
.interactive(isInteractive)
|
|
154
155
|
, in: .rect)
|
|
155
156
|
|
|
156
157
|
} else {
|
|
@@ -221,6 +222,12 @@ private struct BasicColoredView: View {
|
|
|
221
222
|
}
|
|
222
223
|
}
|
|
223
224
|
|
|
225
|
+
@objc public var isInteractive: Bool = true {
|
|
226
|
+
didSet {
|
|
227
|
+
updateView()
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
|
|
224
231
|
public override init(frame: CGRect) {
|
|
225
232
|
super.init(frame: frame)
|
|
226
233
|
setupHostingController()
|
|
@@ -233,7 +240,7 @@ private struct BasicColoredView: View {
|
|
|
233
240
|
|
|
234
241
|
private func setupHostingController() {
|
|
235
242
|
let blurStyle = blurStyleFromString(blurTypeString)
|
|
236
|
-
let swiftUIView = BasicColoredView(glassTintColor: glassTintColor, glassOpacity: glassOpacity, blurAmount: blurAmount, blurStyle: blurStyle, type: type, glassType: glassType, reducedTransparencyFallbackColor: reducedTransparencyFallbackColor)
|
|
243
|
+
let swiftUIView = BasicColoredView(glassTintColor: glassTintColor, glassOpacity: glassOpacity, blurAmount: blurAmount, blurStyle: blurStyle, type: type, glassType: glassType, reducedTransparencyFallbackColor: reducedTransparencyFallbackColor, isInteractive: isInteractive)
|
|
237
244
|
let hosting = UIHostingController(rootView: swiftUIView)
|
|
238
245
|
|
|
239
246
|
hosting.view.backgroundColor = .clear
|
|
@@ -252,7 +259,7 @@ private struct BasicColoredView: View {
|
|
|
252
259
|
|
|
253
260
|
private func updateView() {
|
|
254
261
|
let blurStyle = blurStyleFromString(blurTypeString)
|
|
255
|
-
let newSwiftUIView = BasicColoredView(glassTintColor: glassTintColor, glassOpacity: glassOpacity, blurAmount: blurAmount, blurStyle: blurStyle, type:type, glassType: glassType, reducedTransparencyFallbackColor: reducedTransparencyFallbackColor)
|
|
262
|
+
let newSwiftUIView = BasicColoredView(glassTintColor: glassTintColor, glassOpacity: glassOpacity, blurAmount: blurAmount, blurStyle: blurStyle, type:type, glassType: glassType, reducedTransparencyFallbackColor: reducedTransparencyFallbackColor, isInteractive: isInteractive)
|
|
256
263
|
hostingController?.rootView = newSwiftUIView
|
|
257
264
|
}
|
|
258
265
|
}
|
|
@@ -296,6 +303,11 @@ private struct BasicColoredView: View {
|
|
|
296
303
|
blurView.type = type
|
|
297
304
|
}
|
|
298
305
|
|
|
306
|
+
/// Updates the blur view with a new blur style.
|
|
307
|
+
@objc public static func updateBlurView(_ blurView: AdvancedBlurView, withIsInteractive isInteractive: Bool) {
|
|
308
|
+
blurView.isInteractive = isInteractive
|
|
309
|
+
}
|
|
310
|
+
|
|
299
311
|
/// Updates the blur view with a new reduced transparency fallback color.
|
|
300
312
|
@objc public static func updateBlurView(_ blurView: AdvancedBlurView, withReducedTransparencyFallbackColor fallbackColor: UIColor) {
|
|
301
313
|
blurView.reducedTransparencyFallbackColor = fallbackColor
|
|
@@ -56,6 +56,12 @@ RCT_CUSTOM_VIEW_PROPERTY(type, NSString, AdvancedBlurView)
|
|
|
56
56
|
[ReactNativeBlurViewHelper updateBlurView:view withType:type];
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
+
RCT_CUSTOM_VIEW_PROPERTY(isInteractive, NSNumber, AdvancedBlurView)
|
|
60
|
+
{
|
|
61
|
+
BOOL isInteractive = json ? [RCTConvert BOOL:json] : YES;
|
|
62
|
+
[ReactNativeBlurViewHelper updateBlurView:view withIsInteractive:isInteractive];
|
|
63
|
+
}
|
|
64
|
+
|
|
59
65
|
RCT_CUSTOM_VIEW_PROPERTY(reducedTransparencyFallbackColor, NSString, AdvancedBlurView)
|
|
60
66
|
{
|
|
61
67
|
NSString *colorString = json ? [RCTConvert NSString:json] : @"#FFFFFF";
|
package/lib/module/BlurView.js
CHANGED
|
@@ -36,6 +36,7 @@ export const BlurView = ({
|
|
|
36
36
|
glassType = 'clear',
|
|
37
37
|
glassTintColor = 'clear',
|
|
38
38
|
glassOpacity = 1.0,
|
|
39
|
+
isInteractive = true,
|
|
39
40
|
...props
|
|
40
41
|
}) => {
|
|
41
42
|
// If no children, render the blur view directly (for background use)
|
|
@@ -49,6 +50,7 @@ export const BlurView = ({
|
|
|
49
50
|
type: type,
|
|
50
51
|
reducedTransparencyFallbackColor: reducedTransparencyFallbackColor,
|
|
51
52
|
style: style,
|
|
53
|
+
isInteractive: isInteractive,
|
|
52
54
|
...props
|
|
53
55
|
});
|
|
54
56
|
}
|
|
@@ -66,6 +68,7 @@ export const BlurView = ({
|
|
|
66
68
|
glassTintColor: glassTintColor,
|
|
67
69
|
glassOpacity: glassOpacity,
|
|
68
70
|
type: type,
|
|
71
|
+
isInteractive: isInteractive,
|
|
69
72
|
reducedTransparencyFallbackColor: reducedTransparencyFallbackColor,
|
|
70
73
|
style: {
|
|
71
74
|
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","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","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;AAwE9C;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;EACpB,GAAGC;AACL,CAAC,KAAK;EACJ;EACA,IAAIlB,KAAK,CAACmB,QAAQ,CAACC,KAAK,CAACR,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;MAAA,GACzBC;IAAK,CACV,CAAC;EAEN;;EAEA;EACA,oBACEZ,KAAA,CAACL,IAAI;IAACU,KAAK,EAAE,CAAC;MAAEU,QAAQ,EAAE,UAAU;MAAEC,QAAQ,EAAE;IAAS,CAAC,EAAEX,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;MAC7BP,gCAAgC,EAAEA,gCAAiC;MACnEC,KAAK,EAAE;QACLU,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,eAEFd,IAAA,CAACH,IAAI;MAACU,KAAK,EAAE;QAAEU,QAAQ,EAAE,UAAU;QAAEM,MAAM,EAAE;MAAE,CAAE;MAAAf,QAAA,EAAEA;IAAQ,CAAO,CAAC;EAAA,CAC/D,CAAC;AAEX,CAAC;AAED,eAAeL,QAAQ","ignoreList":[]}
|
|
@@ -28,6 +28,7 @@ interface NativeProps extends ViewProps {
|
|
|
28
28
|
blurType?: WithDefault<BlurType, 'xlight'>;
|
|
29
29
|
glassType?: WithDefault<GlassType, 'clear'>;
|
|
30
30
|
reducedTransparencyFallbackColor?: WithDefault<string, '#FFFFFF'>;
|
|
31
|
+
isInteractive?: WithDefault<boolean, true>;
|
|
31
32
|
}
|
|
32
33
|
|
|
33
34
|
export default codegenNativeComponent<NativeProps>('ReactNativeBlurView');
|
|
@@ -54,6 +54,12 @@ export interface BlurViewProps {
|
|
|
54
54
|
* @default 'blur'
|
|
55
55
|
*/
|
|
56
56
|
type?: 'blur' | 'liquidGlass';
|
|
57
|
+
/**
|
|
58
|
+
* Platform: iOS only
|
|
59
|
+
* Whether the blur view should be interactive
|
|
60
|
+
* @default true
|
|
61
|
+
*/
|
|
62
|
+
isInteractive?: boolean;
|
|
57
63
|
}
|
|
58
64
|
/**
|
|
59
65
|
* 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;
|
|
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;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAyD5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -10,6 +10,7 @@ interface NativeProps extends ViewProps {
|
|
|
10
10
|
blurType?: WithDefault<BlurType, 'xlight'>;
|
|
11
11
|
glassType?: WithDefault<GlassType, 'clear'>;
|
|
12
12
|
reducedTransparencyFallbackColor?: WithDefault<string, '#FFFFFF'>;
|
|
13
|
+
isInteractive?: WithDefault<boolean, true>;
|
|
13
14
|
}
|
|
14
15
|
declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
|
|
15
16
|
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;
|
|
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;CAC5C;;AAED,wBAA0E"}
|
package/package.json
CHANGED
package/src/BlurView.tsx
CHANGED
|
@@ -66,6 +66,13 @@ export interface BlurViewProps {
|
|
|
66
66
|
* @default 'blur'
|
|
67
67
|
*/
|
|
68
68
|
type?: 'blur' | 'liquidGlass';
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* Platform: iOS only
|
|
72
|
+
* Whether the blur view should be interactive
|
|
73
|
+
* @default true
|
|
74
|
+
*/
|
|
75
|
+
isInteractive?: boolean;
|
|
69
76
|
}
|
|
70
77
|
|
|
71
78
|
/**
|
|
@@ -100,6 +107,7 @@ export const BlurView: React.FC<BlurViewProps> = ({
|
|
|
100
107
|
glassType = 'clear',
|
|
101
108
|
glassTintColor = 'clear',
|
|
102
109
|
glassOpacity = 1.0,
|
|
110
|
+
isInteractive = true,
|
|
103
111
|
...props
|
|
104
112
|
}) => {
|
|
105
113
|
// If no children, render the blur view directly (for background use)
|
|
@@ -114,6 +122,7 @@ export const BlurView: React.FC<BlurViewProps> = ({
|
|
|
114
122
|
type={type}
|
|
115
123
|
reducedTransparencyFallbackColor={reducedTransparencyFallbackColor}
|
|
116
124
|
style={style}
|
|
125
|
+
isInteractive={isInteractive}
|
|
117
126
|
{...props}
|
|
118
127
|
/>
|
|
119
128
|
);
|
|
@@ -130,6 +139,7 @@ export const BlurView: React.FC<BlurViewProps> = ({
|
|
|
130
139
|
glassTintColor={glassTintColor}
|
|
131
140
|
glassOpacity={glassOpacity}
|
|
132
141
|
type={type}
|
|
142
|
+
isInteractive={isInteractive}
|
|
133
143
|
reducedTransparencyFallbackColor={reducedTransparencyFallbackColor}
|
|
134
144
|
style={{
|
|
135
145
|
position: 'absolute',
|
|
@@ -28,6 +28,7 @@ interface NativeProps extends ViewProps {
|
|
|
28
28
|
blurType?: WithDefault<BlurType, 'xlight'>;
|
|
29
29
|
glassType?: WithDefault<GlassType, 'clear'>;
|
|
30
30
|
reducedTransparencyFallbackColor?: WithDefault<string, '#FFFFFF'>;
|
|
31
|
+
isInteractive?: WithDefault<boolean, true>;
|
|
31
32
|
}
|
|
32
33
|
|
|
33
34
|
export default codegenNativeComponent<NativeProps>('ReactNativeBlurView');
|