@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.
Files changed (28) hide show
  1. package/README.md +232 -97
  2. package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNativeBlurViewManagerDelegate.java +18 -3
  3. package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNativeBlurViewManagerInterface.java +6 -1
  4. package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNativeGlassEffectContainerManagerDelegate.java +53 -0
  5. package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNativeGlassEffectContainerManagerInterface.java +25 -0
  6. package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ComponentDescriptors.cpp +1 -1
  7. package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ComponentDescriptors.h +1 -1
  8. package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/EventEmitters.h +1 -1
  9. package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/Props.cpp +17 -7
  10. package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/Props.h +55 -15
  11. package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ShadowNodes.cpp +1 -1
  12. package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ShadowNodes.h +7 -7
  13. package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/States.h +3 -3
  14. package/android/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeBlurView.kt +8 -0
  15. package/android/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeBlurViewManager.kt +5 -0
  16. package/ios/ReactNativeBlurView.mm +8 -0
  17. package/ios/ReactNativeBlurView.swift +15 -3
  18. package/ios/ReactNativeBlurViewManager.m +6 -0
  19. package/lib/module/BlurView.js +3 -0
  20. package/lib/module/BlurView.js.map +1 -1
  21. package/lib/module/ReactNativeBlurViewNativeComponent.ts +1 -0
  22. package/lib/typescript/src/BlurView.d.ts +6 -0
  23. package/lib/typescript/src/BlurView.d.ts.map +1 -1
  24. package/lib/typescript/src/ReactNativeBlurViewNativeComponent.d.ts +1 -0
  25. package/lib/typescript/src/ReactNativeBlurViewNativeComponent.d.ts.map +1 -1
  26. package/package.json +1 -1
  27. package/src/BlurView.tsx +10 -0
  28. 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 both iOS and Android platforms.
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/dm/@sbaiahmed1/react-native-blur?style=for-the-badge&color=green" alt="downloads" />
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="iOS-demo.gif" alt="iOS Demo" width="300" />
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
- | **New Architecture Support** | ✅ Full Fabric/Turbo Module support | ❌ Limited support (crashes on android |
62
- | **Android Real Blur** | ✅ Hardware-accelerated real blur (including liquid glass) | Hardware-accelerated real blur |
63
- | **iOS Blur Quality** | ✅ Native UIVisualEffectView | ✅ Native UIVisualEffectView |
64
- | **Liquid Glass Effects** | ✅ Full support (iOS 26+ UIGlassEffect & Android) | ❌ Not supported |
65
- | **TypeScript Support** | ✅ Full TypeScript definitions | ⚠️ Basic TypeScript support |
66
- | **Maintenance Status** | ✅ Actively maintained | ⚠️ Community-maintained |
67
- | **Bundle Size** | 🟡 Moderate (includes BlurView lib) | 🟡 Moderate (includes BlurView lib) |
68
- | **API Complexity** | ✅ Simple, intuitive API | Simple API |
69
- | **Performance** | ✅ Hardware-accelerated | 🟡 iOS: Good, Android: Limited |
70
- | **Accessibility** | ✅ Full reduced transparency support | ✅ Reduced transparency support |
71
- | **Documentation** | ✅ Comprehensive with examples | 🟡 Basic documentation |
72
-
73
- **Advantages of @sbaiahmed1/react-native-blur:**
74
- - **True Android Blur**: Unlike the community version which only provides semi-transparent overlays on Android, our library delivers real hardware-accelerated blur effects on both platforms, including liquid glass effects.
75
- - **Future-Ready**: Built from the ground up with React Native's new architecture (Fabric) in mind
76
- - **Modern Codebase**: Uses the latest development practices with Kotlin for Android
77
- - ** Uses Swift**: Use of Swift for iOS, ensuring modern and efficient native code
78
- - **Better Performance**: Hardware acceleration on both platforms ensures smooth rendering
79
- - **Active Development**: Regular updates and feature additions
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
- - If you need a battle-tested library with extensive community usage
83
- - If bundle size is a critical concern
84
- - If you're working with older React Native versions
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://www.npmjs.com/package/expo-blur)
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
- | **Expo Dependency** | ✅ No Expo required | ❌ Requires Expo SDK |
91
- | **Bare React Native** | ✅ Works with any RN project | ⚠️ Requires Expo configuration |
92
- | **Android Support** | ✅ Real blur effects | Semi-transparent view only |
93
- | **iOS Support** | ✅ Full native blur support | ✅ Full native blur support |
94
- | **Liquid Glass Effects** | ✅ Full support (iOS 26+ UIGlassEffect & Android) | ❌ Not supported |
95
- | **Bundle Size** | 🟡 Moderate | ✅ Lightweight (when using Expo) |
96
- | **Setup Complexity** | ✅ Simple npm install | 🟡 Requires Expo setup |
97
- | **Customization** | ✅ Extensive blur type options | 🟡 Limited blur types |
98
- | **New Architecture** | ✅ Full Fabric support | ✅ Expo handles compatibility |
99
- | **Development Experience** | ✅ Standard RN development | ✅ Excellent with Expo tools |
100
- | **Production Flexibility** | ✅ Any deployment method | 🟡 Expo-specific deployment |
101
-
102
- **Advantages of @sbaiahmed1/react-native-blur:**
103
- - **No Vendor Lock-in**: Works with any React Native project without requiring Expo ecosystem
104
- - **Real Android Blur**: Provides actual blur effects on Android, not just transparency, including liquid glass effects.
105
- - **Flexibility**: Can be used in brownfield apps, custom native modules, and any deployment scenario
106
- - **More Blur Types**: Extensive support for iOS system materials and custom blur types
107
- - **Direct Control**: Full control over native implementation without abstraction layers
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
- - If you're already using Expo and want ecosystem consistency
111
- - If you prefer Expo's managed workflow and tooling
112
- - If you only need basic blur effects and iOS-focused functionality
113
- - If you want the simplicity of Expo's managed dependencies
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
- | **iOS Rendering** | Hardware-accelerated | Hardware-accelerated | Hardware-accelerated |
120
- | **Android Rendering** | Hardware-accelerated real blur | Software overlay | Software overlay |
121
- | **Memory Usage** | Optimized with BlurView | Low | Low |
122
- | **CPU Impact** | Low (GPU-based) | iOS: Low, Android: Minimal | iOS: Low, Android: Minimal |
123
- | **Frame Rate Impact** | Minimal on both platforms | iOS: Minimal, Android: None | iOS: Minimal, Android: None |
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
- | **GitHub Stars** | 🆕 Growing | 🌟 Established (3.8k+) | 🌟 Part of Expo ecosystem |
130
- | **Issue Response** | ✅ Active maintainer | 🟡 Community-driven | ✅ Expo team support |
131
- | **Documentation Quality** | ✅ Comprehensive | 🟡 Basic | ✅ Excellent (Expo docs) |
132
- | **Update Frequency** | ✅ Regular updates | 🟡 Sporadic | ✅ Regular (with Expo releases) |
133
- | **Breaking Changes** | ✅ Semantic versioning | ⚠️ Occasional | ✅ Managed by Expo |
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
- // After
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
- // API is largely compatible, main differences:
147
- // - Better Android blur quality
148
- // - Additional iOS system material types
149
- // - Improved TypeScript support
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
- #### From expo-blur
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
- // After
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
- // Key differences:
162
- // - More blur type options available
163
- // - Real Android blur instead of transparency
164
- // - No Expo dependency required
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 want real blur effects on Android, including liquid glass effects.
171
- - You're building for the new React Native architecture
172
- - You need maximum flexibility and don't want vendor lock-in
173
- - You want the latest performance optimizations
174
- - You're starting a new project or can afford migration time
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 have an existing project that works well with it
178
- - Bundle size is critical and Android blur quality is not important
179
- - You need maximum stability and community testing
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 only need iOS blur effects
184
- - You prefer managed dependencies and simplified setup
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
- ## Architecture Compatibility
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
- This library is fully compatible with both React Native architectures:
312
+ ### Xcode 26.0+ Compatibility Table
189
313
 
190
- - **New Architecture (Fabric)**: Full support with Turbo Modules
191
- - ✅ **Old Architecture (Paper)**: Backward compatibility maintained
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
- Both architectures have been tested and work perfectly without any additional configuration required.
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. Liquid glass effects fall back to enhanced blur with tint overlay.
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 "blurType":
26
- mViewManager.setBlurType(view, (String) value);
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 ? null : (String) value);
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 setBlurType(T view, @Nullable String value);
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<ReactNativeGlassViewComponentDescriptor>());
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 ReactNativeGlassViewComponentDescriptor = ConcreteComponentDescriptor<ReactNativeGlassViewShadowNode>;
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 ReactNativeGlassViewEventEmitter : public ViewEventEmitter {
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
- blurType(convertRawProp(context, rawProps, "blurType", sourceProps.blurType, {ReactNativeBlurViewBlurType::Light})),
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
- reducedTransparencyFallbackColor(convertRawProp(context, rawProps, "reducedTransparencyFallbackColor", sourceProps.reducedTransparencyFallbackColor, {}))
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
- ReactNativeGlassViewProps::ReactNativeGlassViewProps(
31
+ ReactNativeGlassEffectContainerProps::ReactNativeGlassEffectContainerProps(
27
32
  const PropsParserContext &context,
28
- const ReactNativeGlassViewProps &sourceProps,
33
+ const ReactNativeGlassEffectContainerProps &sourceProps,
29
34
  const RawProps &rawProps): ViewProps(context, sourceProps, rawProps),
30
35
 
31
- glassType(convertRawProp(context, rawProps, "glassType", sourceProps.glassType, {ReactNativeGlassViewGlassType::Default})),
32
- glassAmount(convertRawProp(context, rawProps, "glassAmount", sourceProps.glassAmount, {50.0})),
33
- reducedTransparencyFallbackColor(convertRawProp(context, rawProps, "reducedTransparencyFallbackColor", sourceProps.reducedTransparencyFallbackColor, {}))
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
- ReactNativeBlurViewBlurType blurType{ReactNativeBlurViewBlurType::Light};
88
+ std::string glassTintColor{"clear"};
89
+ double glassOpacity{1.0};
59
90
  double blurAmount{10.0};
60
- std::string reducedTransparencyFallbackColor{};
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 ReactNativeGlassViewGlassType { Clear, Default };
98
+ enum class ReactNativeGlassEffectContainerGlassType { Clear, Regular };
64
99
 
65
- static inline void fromRawValue(const PropsParserContext& context, const RawValue &value, ReactNativeGlassViewGlassType &result) {
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 = ReactNativeGlassViewGlassType::Clear; return; }
68
- if (string == "default") { result = ReactNativeGlassViewGlassType::Default; return; }
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 ReactNativeGlassViewGlassType &value) {
107
+ static inline std::string toString(const ReactNativeGlassEffectContainerGlassType &value) {
73
108
  switch (value) {
74
- case ReactNativeGlassViewGlassType::Clear: return "clear";
75
- case ReactNativeGlassViewGlassType::Default: return "default";
109
+ case ReactNativeGlassEffectContainerGlassType::Clear: return "clear";
110
+ case ReactNativeGlassEffectContainerGlassType::Regular: return "regular";
76
111
  }
77
112
  }
78
113
 
79
- class ReactNativeGlassViewProps final : public ViewProps {
114
+ class ReactNativeGlassEffectContainerProps final : public ViewProps {
80
115
  public:
81
- ReactNativeGlassViewProps() = default;
82
- ReactNativeGlassViewProps(const PropsParserContext& context, const ReactNativeGlassViewProps &sourceProps, const RawProps &rawProps);
116
+ ReactNativeGlassEffectContainerProps() = default;
117
+ ReactNativeGlassEffectContainerProps(const PropsParserContext& context, const ReactNativeGlassEffectContainerProps &sourceProps, const RawProps &rawProps);
83
118
 
84
119
  #pragma mark - Props
85
120
 
86
- ReactNativeGlassViewGlassType glassType{ReactNativeGlassViewGlassType::Default};
87
- double glassAmount{50.0};
88
- std::string reducedTransparencyFallbackColor{};
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 ReactNativeGlassViewComponentName[] = "ReactNativeGlassView";
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 ReactNativeGlassViewComponentName[];
32
+ JSI_EXPORT extern const char ReactNativeGlassEffectContainerComponentName[];
33
33
 
34
34
  /*
35
- * `ShadowNode` for <ReactNativeGlassView> component.
35
+ * `ShadowNode` for <ReactNativeGlassEffectContainer> component.
36
36
  */
37
- using ReactNativeGlassViewShadowNode = ConcreteViewShadowNode<
38
- ReactNativeGlassViewComponentName,
39
- ReactNativeGlassViewProps,
40
- ReactNativeGlassViewEventEmitter,
41
- ReactNativeGlassViewState>;
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 ReactNativeGlassViewState {
29
+ class ReactNativeGlassEffectContainerState {
30
30
  public:
31
- ReactNativeGlassViewState() = default;
31
+ ReactNativeGlassEffectContainerState() = default;
32
32
 
33
33
  #ifdef ANDROID
34
- ReactNativeGlassViewState(ReactNativeGlassViewState const &previousState, folly::dynamic data){};
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(true)
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";
@@ -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;AAiE9C;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;EAClB,GAAGC;AACL,CAAC,KAAK;EACJ;EACA,IAAIjB,KAAK,CAACkB,QAAQ,CAACC,KAAK,CAACP,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;MAAA,GACTM;IAAK,CACV,CAAC;EAEN;;EAEA;EACA,oBACEX,KAAA,CAACL,IAAI;IAACU,KAAK,EAAE,CAAC;MAAES,QAAQ,EAAE,UAAU;MAAEC,QAAQ,EAAE;IAAS,CAAC,EAAEV,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;MACXH,gCAAgC,EAAEA,gCAAiC;MACnEC,KAAK,EAAE;QACLS,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,eAEFb,IAAA,CAACH,IAAI;MAACU,KAAK,EAAE;QAAES,QAAQ,EAAE,UAAU;QAAEM,MAAM,EAAE;MAAE,CAAE;MAAAd,QAAA,EAAEA;IAAQ,CAAO,CAAC;EAAA,CAC/D,CAAC;AAEX,CAAC;AAED,eAAeL,QAAQ","ignoreList":[]}
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;CAC/B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAsD5C,CAAC;AAEF,eAAe,QAAQ,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;CACnE;;AAED,wBAA0E"}
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sbaiahmed1/react-native-blur",
3
- "version": "0.3.0-beta.0",
3
+ "version": "0.3.0",
4
4
  "description": "React native modern blur view",
5
5
  "main": "./lib/module/index.js",
6
6
  "types": "./lib/typescript/src/index.d.ts",
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');