@sbaiahmed1/react-native-blur 0.2.0 → 0.3.0-beta.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 (38) hide show
  1. package/README.md +271 -16
  2. package/ReactNativeBlur.podspec +2 -1
  3. package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNativeBlurViewManagerDelegate.java +38 -0
  4. package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNativeBlurViewManagerInterface.java +20 -0
  5. package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNativeGlassViewManagerDelegate.java +38 -0
  6. package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNativeGlassViewManagerInterface.java +20 -0
  7. package/android/app/build/generated/source/codegen/jni/CMakeLists.txt +36 -0
  8. package/android/app/build/generated/source/codegen/jni/ReactNativeBlurViewSpec-generated.cpp +22 -0
  9. package/android/app/build/generated/source/codegen/jni/ReactNativeBlurViewSpec.h +24 -0
  10. package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ComponentDescriptors.cpp +23 -0
  11. package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ComponentDescriptors.h +25 -0
  12. package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/EventEmitters.cpp +17 -0
  13. package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/EventEmitters.h +30 -0
  14. package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/Props.cpp +36 -0
  15. package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/Props.h +91 -0
  16. package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ReactNativeBlurViewSpecJSI-generated.cpp +17 -0
  17. package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ReactNativeBlurViewSpecJSI.h +19 -0
  18. package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ShadowNodes.cpp +18 -0
  19. package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ShadowNodes.h +43 -0
  20. package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/States.cpp +16 -0
  21. package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/States.h +41 -0
  22. package/android/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeBlurView.kt +164 -39
  23. package/android/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeBlurViewManager.kt +20 -0
  24. package/ios/ReactNativeBlurView.mm +190 -238
  25. package/ios/ReactNativeBlurView.swift +309 -0
  26. package/ios/ReactNativeBlurViewManager.h +5 -0
  27. package/ios/ReactNativeBlurViewManager.m +165 -0
  28. package/lib/module/BlurView.js +14 -2
  29. package/lib/module/BlurView.js.map +1 -1
  30. package/lib/module/ReactNativeBlurViewNativeComponent.ts +9 -3
  31. package/lib/typescript/src/BlurView.d.ts +30 -1
  32. package/lib/typescript/src/BlurView.d.ts.map +1 -1
  33. package/lib/typescript/src/ReactNativeBlurViewNativeComponent.d.ts +8 -3
  34. package/lib/typescript/src/ReactNativeBlurViewNativeComponent.d.ts.map +1 -1
  35. package/package.json +2 -2
  36. package/src/BlurView.tsx +48 -3
  37. package/src/ReactNativeBlurViewNativeComponent.ts +9 -3
  38. package/ios/ReactNativeBlurViewManager.mm +0 -23
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @sbaiahmed1/react-native-blur
2
2
 
3
- A modern React Native blur view component that provides native blur 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 both iOS and Android platforms.
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" />
@@ -11,28 +11,177 @@ A modern React Native blur view component that provides native blur effects for
11
11
 
12
12
  <p>
13
13
  <img src="https://img.shields.io/badge/New%20Architecture-Ready-purple?style=for-the-badge" alt="New Architecture" />
14
+ <img src="https://img.shields.io/badge/iOS%2026+-Liquid%20Glass-blue?style=for-the-badge" alt="Liquid Glass" />
15
+ <img src="https://img.shields.io/badge/SwiftUI-Powered-orange?style=for-the-badge" alt="SwiftUI" />
14
16
  </p>
15
17
  </div>
16
- ## Demo
18
+
19
+ ## Liquid Glass Demo
20
+
21
+ <div align="center">
22
+ <img src="liquidGlass.gif" alt="Liquid Glass Demo" width="300" />
23
+ <br>
24
+ <em>Liquid Glass effect in action</em>
25
+ </div>
26
+
27
+ ## Blur Demo
17
28
 
18
29
  <div align="center">
19
30
  <img src="iOS-demo.gif" alt="iOS Demo" width="300" />
20
31
  <img src="android-demo.gif" alt="Android Demo" width="300" />
32
+
21
33
  <br>
22
34
  <em>iOS (left) and Android (right) blur effects in action</em>
23
35
  </div>
24
36
 
37
+
38
+
25
39
  ## Features
26
40
 
41
+ - 🌊 **Liquid Glass Effects**: Revolutionary glass effects using iOS 26+ UIGlassEffect API
27
42
  - 🎨 **Multiple Blur Types**: Support for various blur styles including system materials on iOS
28
43
  - 📱 **Cross-Platform**: Works on both iOS and Android
29
44
  - ♿ **Accessibility**: Automatic fallback for reduced transparency settings
30
45
  - 🔧 **TypeScript**: Full TypeScript support with proper type definitions
31
46
  - 🚀 **Turbo Module**: Built with React Native's new architecture (Fabric)
32
- - 🎯 **Customizable**: Adjustable blur intensity and fallback colors
47
+ - 🎯 **Customizable**: Adjustable blur intensity, glass tint colors, and opacity
33
48
  - 💡 **Performance Optimized**: Uses hardware acceleration for smooth rendering
34
49
  - 🛠️ **Easy to Use**: Simple API for quick integration into your React Native projects
35
- - 📦 **Modern**: Uses Kotlin for Android implementation and *will* use Swift for iOS, ensuring modern development practices
50
+ - 📦 **Modern**: Uses SwiftUI for iOS and Kotlin for Android, ensuring cutting-edge development practices
51
+ - 🔄 **Smart Fallbacks**: Graceful degradation from liquid glass to blur on older iOS versions
52
+
53
+ ## 📊 Library Comparison
54
+
55
+ This section provides a detailed comparison between `@sbaiahmed1/react-native-blur` and other popular blur libraries in the React Native ecosystem.
56
+
57
+ ### vs. [@react-native-community/blur](https://www.npmjs.com/package/@react-native-community/blur)
58
+
59
+ | Feature | @sbaiahmed1/react-native-blur | @react-native-community/blur |
60
+ |------------------------------|-------------------------------------|---------------------------------------|
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
80
+
81
+ **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
85
+
86
+ ### vs. [expo-blur](https://www.npmjs.com/package/expo-blur)
87
+
88
+ | Feature | @sbaiahmed1/react-native-blur | expo-blur |
89
+ |---------|------------------------------|----------|
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
108
+
109
+ **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
114
+
115
+ ### Performance Comparison
116
+
117
+ | Metric | @sbaiahmed1/react-native-blur | @react-native-community/blur | expo-blur |
118
+ |--------|------------------------------|------------------------------|----------|
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 |
124
+
125
+ ### Community & Support
126
+
127
+ | Aspect | @sbaiahmed1/react-native-blur | @react-native-community/blur | expo-blur |
128
+ |--------|------------------------------|------------------------------|----------|
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 |
134
+
135
+ ### Migration Guide
136
+
137
+ #### From @react-native-community/blur
138
+
139
+ ```tsx
140
+ // Before
141
+ import { BlurView } from '@react-native-community/blur';
142
+
143
+ // After
144
+ import { BlurView } from '@sbaiahmed1/react-native-blur';
145
+
146
+ // API is largely compatible, main differences:
147
+ // - Better Android blur quality
148
+ // - Additional iOS system material types
149
+ // - Improved TypeScript support
150
+ ```
151
+
152
+ #### From expo-blur
153
+
154
+ ```tsx
155
+ // Before
156
+ import { BlurView } from 'expo-blur';
157
+
158
+ // After
159
+ import { BlurView } from '@sbaiahmed1/react-native-blur';
160
+
161
+ // Key differences:
162
+ // - More blur type options available
163
+ // - Real Android blur instead of transparency
164
+ // - No Expo dependency required
165
+ ```
166
+
167
+ ### Recommendation
168
+
169
+ **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
175
+
176
+ **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
180
+
181
+ **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
36
185
 
37
186
  ## Architecture Compatibility
38
187
 
@@ -84,6 +233,26 @@ The Android implementation leverages the BlurView library to provide real blur e
84
233
  - **Fallback Handling:** Gracefully handles devices with limited graphics capabilities
85
234
  - **No Extra Permissions:** Does not require additional Android permissions
86
235
 
236
+ ### Android Version Compatibility
237
+
238
+ This library automatically handles Android version compatibility to prevent `NoClassDefFoundError` issues:
239
+
240
+ - **Android 12+ (API 31+):** Uses `RenderEffectBlur` for optimal performance and modern blur effects
241
+ - **Android 10-11 (API 29-30):** Automatically falls back to `RenderScriptBlur` for compatibility
242
+ - **Older Android versions:** Graceful fallback to semi-transparent overlay when blur is not supported
243
+
244
+ **Note:** The library includes automatic API level detection and will choose the appropriate blur algorithm based on the device's Android version. This ensures compatibility across all supported Android versions without requiring any additional configuration.
245
+
246
+ #### Troubleshooting Android Issues
247
+
248
+ If you encounter `java.lang.NoClassDefFoundError: Failed resolution of: Landroid/graphics/RenderEffect;` on Android 10 or 11:
249
+
250
+ 1. **This is automatically handled** - The library now includes fallback mechanisms
251
+ 2. **Update to latest version** - Ensure you're using the latest version of this library
252
+ 3. **Clean and rebuild** - Run `cd android && ./gradlew clean` then rebuild your project
253
+
254
+ The error occurs because `RenderEffect` was introduced in Android 12 (API 31), but the library now automatically detects the API level and uses compatible alternatives on older versions.
255
+
87
256
  ## Usage
88
257
 
89
258
  ### Basic Usage
@@ -138,16 +307,48 @@ function MyComponent() {
138
307
  }
139
308
  ```
140
309
 
310
+ ### Liquid Glass Usage (iOS 26+)
311
+
312
+ ```tsx
313
+ import React from 'react';
314
+ import { BlurView } from '@sbaiahmed1/react-native-blur';
315
+
316
+ function LiquidGlassComponent() {
317
+ return (
318
+ <BlurView
319
+ type="liquidGlass"
320
+ glassType="regular"
321
+ glassTintColor="#007AFF"
322
+ glassOpacity={0.8}
323
+ style={{
324
+ padding: 20,
325
+ borderRadius: 20,
326
+ }}
327
+ >
328
+ <Text>Beautiful liquid glass effect</Text>
329
+ </BlurView>
330
+ );
331
+ }
332
+ ```
333
+
141
334
  ## Props
142
335
 
336
+ All props are optional and have sensible defaults.
337
+
143
338
  | Prop | Type | Default | Description |
144
339
  |------|------|---------|-------------|
145
- | `blurType` | `BlurType` | `'light'` | The type of blur effect to apply |
146
- | `blurAmount` | `number` | `10` | The intensity of the blur effect (0-100) |
147
- | `reducedTransparencyFallbackColor` | `string` | `undefined` | Fallback color when reduced transparency is enabled |
340
+ | `type` | `'blur' \| 'liquidGlass'` | `'blur'` | The type of effect to apply |
341
+ | `blurType` | `BlurType` | `'xlight'` | The type of blur effect to apply |
342
+ | `blurAmount` | `number` | `10.0` | The intensity of the blur effect (0-100) |
343
+ | `glassType` | `GlassType` | `'clear'` | The type of glass effect |
344
+ | `glassTintColor` | `string` | `'clear'` | The tint color for glass effect |
345
+ | `glassOpacity` | `number` | `1.0` | The opacity of glass effect (0-1) |
346
+ | `reducedTransparencyFallbackColor` | `string` | `'#FFFFFF'` | Fallback color when reduced transparency is enabled |
148
347
  | `style` | `ViewStyle` | `undefined` | Style object for the blur view |
149
348
  | `children` | `ReactNode` | `undefined` | Child components to render inside the blur view |
150
349
 
350
+ > **Note**: The `BlurType` and `GlassType` are exported types from the library. See [Blur Types](#blur-types) section below for all available values.
351
+
151
352
  ## Blur Types
152
353
 
153
354
  The following blur types are supported:
@@ -170,10 +371,15 @@ The following blur types are supported:
170
371
  ## Platform Differences
171
372
 
172
373
  ### iOS
173
- On iOS, this component uses `UIVisualEffectView` to provide true blur effects. All blur types are supported with their native implementations.
374
+ On iOS, this component has been completely rewritten using **SwiftUI** for modern performance and features:
375
+
376
+ - **iOS 26+**: Uses native `UIGlassEffect` API for true liquid glass effects with customizable tint colors and opacity
377
+ - **iOS 13-25**: Uses enhanced `UIVisualEffectView` with precise blur intensity control
378
+ - **Older iOS**: Graceful fallback to standard blur effects
379
+ - **SwiftUI Integration**: Leverages SwiftUI's declarative UI for better performance and maintainability
174
380
 
175
381
  ### Android
176
- 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.
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.
177
383
 
178
384
  ## Accessibility
179
385
 
@@ -189,36 +395,85 @@ You can customize the fallback color using the `reducedTransparencyFallbackColor
189
395
  This package includes full TypeScript definitions:
190
396
 
191
397
  ```tsx
192
- import { BlurView, BlurType, BlurViewProps } from '@sbaiahmed1/react-native-blur';
398
+ import { BlurView, BlurType, GlassType, BlurViewProps } from '@sbaiahmed1/react-native-blur';
193
399
 
194
400
  // BlurType is exported for type checking
195
401
  const blurType: BlurType = 'systemMaterial';
196
402
 
403
+ // GlassType for liquid glass effects
404
+ const glassType: GlassType = 'regular';
405
+
197
406
  // BlurViewProps for component props
198
407
  interface MyComponentProps {
199
408
  blurProps: BlurViewProps;
200
409
  }
410
+
411
+ // Example with all liquid glass properties
412
+ const liquidGlassProps: BlurViewProps = {
413
+ type: 'liquidGlass',
414
+ glassType: 'regular',
415
+ glassTintColor: '#007AFF',
416
+ glassOpacity: 0.8,
417
+ };
201
418
  ```
202
419
 
203
420
  ## Example App
204
421
 
205
- The package includes a comprehensive example app that demonstrates all blur types and features. To run the example:
422
+ The package includes a comprehensive example app that demonstrates all blur types, liquid glass effects, and practical use cases. The example app features:
423
+
424
+ - **Main Demo**: Interactive blur type selector with live preview
425
+ - **Liquid Glass Examples**: Showcase of iOS 26+ glass effects with customizable properties
426
+ - **Practical Use Cases**: Real-world examples like cards, modals, and overlays
427
+ - **Comparison Views**: Side-by-side comparisons of different effects
428
+
429
+ To run the example:
206
430
 
207
431
  ```bash
208
432
  cd example
209
- npm install
433
+ yarn install
210
434
  # For iOS
211
- npx react-native run-ios
435
+ yarn ios
212
436
  # For Android
213
- npx react-native run-android
437
+ yarn android
214
438
  ```
215
439
 
216
440
  ## Performance Considerations
217
441
 
218
- - **iOS**: Native blur effects are hardware-accelerated and performant
442
+ - **iOS**:
443
+ - **SwiftUI Implementation**: Enhanced performance with declarative UI updates
444
+ - **Liquid Glass (iOS 26+)**: Hardware-accelerated glass effects with minimal performance impact
445
+ - **Blur Effects**: Native blur effects are hardware-accelerated and performant
446
+ - **Smart Fallbacks**: Automatic degradation ensures smooth performance on older devices
219
447
  - **Android**: Real blur effects are hardware-accelerated with fallback to lightweight overlay when needed
220
- - Avoid using too many blur views simultaneously on lower-end devices
448
+ - Avoid using too many blur/glass views simultaneously on lower-end devices
221
449
  - Consider using `reducedTransparencyFallbackColor` for better accessibility
450
+ - Liquid glass effects automatically fall back to enhanced blur on Android and older iOS versions
451
+
452
+ ## What's New in v0.3.0
453
+
454
+ ### 🌊 Liquid Glass Effects (iOS 26+)
455
+ - Revolutionary glass effects using Apple's new UIGlassEffect API
456
+ - Customizable glass types: `clear` and `regular`
457
+ - Adjustable tint colors and opacity for stunning visual effects
458
+ - Automatic fallback to enhanced blur on older iOS versions and Android
459
+
460
+ ### 🔄 SwiftUI Rewrite
461
+ - Complete iOS implementation rewritten using SwiftUI
462
+ - Enhanced performance with declarative UI updates
463
+ - Better integration with React Native's new architecture
464
+ - Improved blur intensity control with precise animation handling
465
+
466
+ ### 📱 Enhanced Example App
467
+ - New liquid glass demonstration section
468
+ - Interactive property controls for real-time customization
469
+ - Practical use case examples (cards, modals, overlays)
470
+ - Comparison views for different effect types
471
+
472
+ ### 🛠️ Developer Experience
473
+ - Full TypeScript support for all new properties
474
+ - Improved component layout handling
475
+ - Better accessibility support with smart fallbacks
476
+ - Enhanced documentation and examples
222
477
 
223
478
  ## Contributing
224
479
 
@@ -13,7 +13,8 @@ Pod::Spec.new do |s|
13
13
  s.platforms = { :ios => min_ios_version_supported }
14
14
  s.source = { :git => "https://github.com/sbaiahmed1/sbaiahmed1-react-native-blur.git", :tag => "#{s.version}" }
15
15
 
16
- s.source_files = "ios/**/*.{h,m,mm,cpp}"
16
+ s.source_files = "ios/**/*.{h,m,mm,cpp,swift}"
17
+ s.swift_version = '5.0'
17
18
  s.private_header_files = "ios/**/*.h"
18
19
 
19
20
  install_modules_dependencies(s)
@@ -0,0 +1,38 @@
1
+ /**
2
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
3
+ *
4
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
5
+ * once the code is regenerated.
6
+ *
7
+ * @generated by codegen project: GeneratePropsJavaDelegate.js
8
+ */
9
+
10
+ package com.facebook.react.viewmanagers;
11
+
12
+ import android.view.View;
13
+ import androidx.annotation.Nullable;
14
+ import com.facebook.react.uimanager.BaseViewManager;
15
+ import com.facebook.react.uimanager.BaseViewManagerDelegate;
16
+ import com.facebook.react.uimanager.LayoutShadowNode;
17
+
18
+ public class ReactNativeBlurViewManagerDelegate<T extends View, U extends BaseViewManager<T, ? extends LayoutShadowNode> & ReactNativeBlurViewManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
19
+ public ReactNativeBlurViewManagerDelegate(U viewManager) {
20
+ super(viewManager);
21
+ }
22
+ @Override
23
+ public void setProperty(T view, String propName, @Nullable Object value) {
24
+ switch (propName) {
25
+ case "blurType":
26
+ mViewManager.setBlurType(view, (String) value);
27
+ break;
28
+ case "blurAmount":
29
+ mViewManager.setBlurAmount(view, value == null ? 10f : ((Double) value).doubleValue());
30
+ break;
31
+ case "reducedTransparencyFallbackColor":
32
+ mViewManager.setReducedTransparencyFallbackColor(view, value == null ? null : (String) value);
33
+ break;
34
+ default:
35
+ super.setProperty(view, propName, value);
36
+ }
37
+ }
38
+ }
@@ -0,0 +1,20 @@
1
+ /**
2
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
3
+ *
4
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
5
+ * once the code is regenerated.
6
+ *
7
+ * @generated by codegen project: GeneratePropsJavaInterface.js
8
+ */
9
+
10
+ package com.facebook.react.viewmanagers;
11
+
12
+ import android.view.View;
13
+ import androidx.annotation.Nullable;
14
+ import com.facebook.react.uimanager.ViewManagerWithGeneratedInterface;
15
+
16
+ public interface ReactNativeBlurViewManagerInterface<T extends View> extends ViewManagerWithGeneratedInterface {
17
+ void setBlurType(T view, @Nullable String value);
18
+ void setBlurAmount(T view, double value);
19
+ void setReducedTransparencyFallbackColor(T view, @Nullable String value);
20
+ }
@@ -0,0 +1,38 @@
1
+ /**
2
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
3
+ *
4
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
5
+ * once the code is regenerated.
6
+ *
7
+ * @generated by codegen project: GeneratePropsJavaDelegate.js
8
+ */
9
+
10
+ package com.facebook.react.viewmanagers;
11
+
12
+ import android.view.View;
13
+ import androidx.annotation.Nullable;
14
+ import com.facebook.react.uimanager.BaseViewManager;
15
+ import com.facebook.react.uimanager.BaseViewManagerDelegate;
16
+ import com.facebook.react.uimanager.LayoutShadowNode;
17
+
18
+ public class ReactNativeGlassViewManagerDelegate<T extends View, U extends BaseViewManager<T, ? extends LayoutShadowNode> & ReactNativeGlassViewManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
19
+ public ReactNativeGlassViewManagerDelegate(U viewManager) {
20
+ super(viewManager);
21
+ }
22
+ @Override
23
+ public void setProperty(T view, String propName, @Nullable Object value) {
24
+ switch (propName) {
25
+ case "glassType":
26
+ mViewManager.setGlassType(view, (String) value);
27
+ break;
28
+ case "glassAmount":
29
+ mViewManager.setGlassAmount(view, value == null ? 50f : ((Double) value).doubleValue());
30
+ break;
31
+ case "reducedTransparencyFallbackColor":
32
+ mViewManager.setReducedTransparencyFallbackColor(view, value == null ? null : (String) value);
33
+ break;
34
+ default:
35
+ super.setProperty(view, propName, value);
36
+ }
37
+ }
38
+ }
@@ -0,0 +1,20 @@
1
+ /**
2
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
3
+ *
4
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
5
+ * once the code is regenerated.
6
+ *
7
+ * @generated by codegen project: GeneratePropsJavaInterface.js
8
+ */
9
+
10
+ package com.facebook.react.viewmanagers;
11
+
12
+ import android.view.View;
13
+ import androidx.annotation.Nullable;
14
+ import com.facebook.react.uimanager.ViewManagerWithGeneratedInterface;
15
+
16
+ public interface ReactNativeGlassViewManagerInterface<T extends View> extends ViewManagerWithGeneratedInterface {
17
+ void setGlassType(T view, @Nullable String value);
18
+ void setGlassAmount(T view, double value);
19
+ void setReducedTransparencyFallbackColor(T view, @Nullable String value);
20
+ }
@@ -0,0 +1,36 @@
1
+ # Copyright (c) Meta Platforms, Inc. and affiliates.
2
+ #
3
+ # This source code is licensed under the MIT license found in the
4
+ # LICENSE file in the root directory of this source tree.
5
+
6
+ cmake_minimum_required(VERSION 3.13)
7
+ set(CMAKE_VERBOSE_MAKEFILE on)
8
+
9
+ file(GLOB react_codegen_SRCS CONFIGURE_DEPENDS *.cpp react/renderer/components/ReactNativeBlurViewSpec/*.cpp)
10
+
11
+ add_library(
12
+ react_codegen_ReactNativeBlurViewSpec
13
+ OBJECT
14
+ ${react_codegen_SRCS}
15
+ )
16
+
17
+ target_include_directories(react_codegen_ReactNativeBlurViewSpec PUBLIC . react/renderer/components/ReactNativeBlurViewSpec)
18
+
19
+ target_link_libraries(
20
+ react_codegen_ReactNativeBlurViewSpec
21
+ fbjni
22
+ jsi
23
+ # We need to link different libraries based on whether we are building rncore or not, that's necessary
24
+ # because we want to break a circular dependency between react_codegen_rncore and reactnative
25
+ reactnative
26
+ )
27
+
28
+ target_compile_options(
29
+ react_codegen_ReactNativeBlurViewSpec
30
+ PRIVATE
31
+ -DLOG_TAG=\"ReactNative\"
32
+ -fexceptions
33
+ -frtti
34
+ -std=c++20
35
+ -Wall
36
+ )
@@ -0,0 +1,22 @@
1
+
2
+ /**
3
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
4
+ *
5
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
6
+ * once the code is regenerated.
7
+ *
8
+ * @generated by codegen project: GenerateModuleJniCpp.js
9
+ */
10
+
11
+ #include "ReactNativeBlurViewSpec.h"
12
+
13
+ namespace facebook::react {
14
+
15
+
16
+
17
+ std::shared_ptr<TurboModule> ReactNativeBlurViewSpec_ModuleProvider(const std::string &moduleName, const JavaTurboModule::InitParams &params) {
18
+
19
+ return nullptr;
20
+ }
21
+
22
+ } // namespace facebook::react
@@ -0,0 +1,24 @@
1
+
2
+ /**
3
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
4
+ *
5
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
6
+ * once the code is regenerated.
7
+ *
8
+ * @generated by codegen project: GenerateModuleJniH.js
9
+ */
10
+
11
+ #pragma once
12
+
13
+ #include <ReactCommon/JavaTurboModule.h>
14
+ #include <ReactCommon/TurboModule.h>
15
+ #include <jsi/jsi.h>
16
+
17
+ namespace facebook::react {
18
+
19
+
20
+
21
+ JSI_EXPORT
22
+ std::shared_ptr<TurboModule> ReactNativeBlurViewSpec_ModuleProvider(const std::string &moduleName, const JavaTurboModule::InitParams &params);
23
+
24
+ } // namespace facebook::react
@@ -0,0 +1,23 @@
1
+
2
+ /**
3
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
4
+ *
5
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
6
+ * once the code is regenerated.
7
+ *
8
+ * @generated by codegen project: GenerateComponentDescriptorCpp.js
9
+ */
10
+
11
+ #include <react/renderer/components/ReactNativeBlurViewSpec/ComponentDescriptors.h>
12
+ #include <react/renderer/core/ConcreteComponentDescriptor.h>
13
+ #include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
14
+
15
+ namespace facebook::react {
16
+
17
+ void ReactNativeBlurViewSpec_registerComponentDescriptorsFromCodegen(
18
+ std::shared_ptr<const ComponentDescriptorProviderRegistry> registry) {
19
+ registry->add(concreteComponentDescriptorProvider<ReactNativeBlurViewComponentDescriptor>());
20
+ registry->add(concreteComponentDescriptorProvider<ReactNativeGlassViewComponentDescriptor>());
21
+ }
22
+
23
+ } // namespace facebook::react
@@ -0,0 +1,25 @@
1
+
2
+ /**
3
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
4
+ *
5
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
6
+ * once the code is regenerated.
7
+ *
8
+ * @generated by codegen project: GenerateComponentDescriptorH.js
9
+ */
10
+
11
+ #pragma once
12
+
13
+ #include <react/renderer/components/ReactNativeBlurViewSpec/ShadowNodes.h>
14
+ #include <react/renderer/core/ConcreteComponentDescriptor.h>
15
+ #include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
16
+
17
+ namespace facebook::react {
18
+
19
+ using ReactNativeBlurViewComponentDescriptor = ConcreteComponentDescriptor<ReactNativeBlurViewShadowNode>;
20
+ using ReactNativeGlassViewComponentDescriptor = ConcreteComponentDescriptor<ReactNativeGlassViewShadowNode>;
21
+
22
+ void ReactNativeBlurViewSpec_registerComponentDescriptorsFromCodegen(
23
+ std::shared_ptr<const ComponentDescriptorProviderRegistry> registry);
24
+
25
+ } // namespace facebook::react
@@ -0,0 +1,17 @@
1
+
2
+ /**
3
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
4
+ *
5
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
6
+ * once the code is regenerated.
7
+ *
8
+ * @generated by codegen project: GenerateEventEmitterCpp.js
9
+ */
10
+
11
+ #include <react/renderer/components/ReactNativeBlurViewSpec/EventEmitters.h>
12
+
13
+
14
+ namespace facebook::react {
15
+
16
+
17
+ } // namespace facebook::react