@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.
- package/README.md +271 -16
- package/ReactNativeBlur.podspec +2 -1
- package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNativeBlurViewManagerDelegate.java +38 -0
- package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNativeBlurViewManagerInterface.java +20 -0
- package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNativeGlassViewManagerDelegate.java +38 -0
- package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNativeGlassViewManagerInterface.java +20 -0
- package/android/app/build/generated/source/codegen/jni/CMakeLists.txt +36 -0
- package/android/app/build/generated/source/codegen/jni/ReactNativeBlurViewSpec-generated.cpp +22 -0
- package/android/app/build/generated/source/codegen/jni/ReactNativeBlurViewSpec.h +24 -0
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ComponentDescriptors.cpp +23 -0
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ComponentDescriptors.h +25 -0
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/EventEmitters.cpp +17 -0
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/EventEmitters.h +30 -0
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/Props.cpp +36 -0
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/Props.h +91 -0
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ReactNativeBlurViewSpecJSI-generated.cpp +17 -0
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ReactNativeBlurViewSpecJSI.h +19 -0
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ShadowNodes.cpp +18 -0
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ShadowNodes.h +43 -0
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/States.cpp +16 -0
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/States.h +41 -0
- package/android/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeBlurView.kt +164 -39
- package/android/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeBlurViewManager.kt +20 -0
- package/ios/ReactNativeBlurView.mm +190 -238
- package/ios/ReactNativeBlurView.swift +309 -0
- package/ios/ReactNativeBlurViewManager.h +5 -0
- package/ios/ReactNativeBlurViewManager.m +165 -0
- package/lib/module/BlurView.js +14 -2
- package/lib/module/BlurView.js.map +1 -1
- package/lib/module/ReactNativeBlurViewNativeComponent.ts +9 -3
- package/lib/typescript/src/BlurView.d.ts +30 -1
- package/lib/typescript/src/BlurView.d.ts.map +1 -1
- package/lib/typescript/src/ReactNativeBlurViewNativeComponent.d.ts +8 -3
- package/lib/typescript/src/ReactNativeBlurViewNativeComponent.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/BlurView.tsx +48 -3
- package/src/ReactNativeBlurViewNativeComponent.ts +9 -3
- 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
|
-
|
|
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
|
|
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
|
|
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
|
-
| `
|
|
146
|
-
| `
|
|
147
|
-
| `
|
|
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
|
|
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
|
|
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
|
-
|
|
433
|
+
yarn install
|
|
210
434
|
# For iOS
|
|
211
|
-
|
|
435
|
+
yarn ios
|
|
212
436
|
# For Android
|
|
213
|
-
|
|
437
|
+
yarn android
|
|
214
438
|
```
|
|
215
439
|
|
|
216
440
|
## Performance Considerations
|
|
217
441
|
|
|
218
|
-
- **iOS**:
|
|
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
|
|
package/ReactNativeBlur.podspec
CHANGED
|
@@ -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 ¶ms) {
|
|
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 ¶ms);
|
|
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
|