Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(iOS): transparent blur type #513

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
+12 −1
Open

feat(iOS): transparent blur type #513

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
aa7e1a5
New "transparent" blurType that turns every blurEffectView subview ba…
kirgudkov Nov 30, 2022
6a0a9a9
Add "transparent" blur type to README.md, BlurView.ios.tsx and BlurVi…
kirgudkov Nov 30, 2022
1a7ffd8
Fix blurType in VibrancyViewNativeComponent.ts
kirgudkov Nov 30, 2022
d133b15
feat(iOS): transparent blur type
kirgudkov Nov 30, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ cd ios && pod install
| `extraDark` | extra dark blur type (tvOS only)
| `regular` | regular blur type (iOS 10+ and tvOS only)
| `prominent` | prominent blur type (iOS 10+ and tvOS only)
| `transparent` | transparent blur type (iOS 10+ and tvOS only)

#### blurType (iOS 13 only)

Expand Down
2 changes: 1 addition & 1 deletion example/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import {

const blurTypeValues =
Platform.OS === 'ios'
? ['xlight', 'light', 'dark', 'regular', 'prominent']
? ['xlight', 'light', 'dark', 'regular', 'prominent', 'transparent']
: ['xlight', 'light', 'dark'];

const Blurs = () => {
Expand Down
7 changes: 7 additions & 0 deletions ios/BlurView.mm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@ - (void)setReducedTransparencyFallbackColor:(nullable UIColor *)reducedTranspare

- (UIBlurEffectStyle)blurEffectStyle
{
if ([self.blurType isEqual: @"transparent"]) return UIBlurEffectStyleDark;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for your good contribution on important issues.
I also want this feature with white background, so I used your changed code and just fixed this line as
if ([self.blurType isEqual: @"transparent"]) return UIBlurEffectStyleLight;.
However it shows dark background and not working.. Do you have any idea about this problem?

Copy link
Author

@kirgudkov kirgudkov Mar 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm. I've just tested both cases (dark and light backgrounds) and everything seems to be working great. No changes in the native code 🤔

1 2
1 2

Code is just like this. It doesn't depend on theme or whatever:

<BlurView
  blurAmount={7} 
  blurType={"transparent"} 
/>

Please make sure you're using it right. If the problem still exists, could you elaborate a bit? What kind of effect are you trying to achieve? The image will do

if ([self.blurType isEqual: @"xlight"]) return UIBlurEffectStyleExtraLight;
if ([self.blurType isEqual: @"light"]) return UIBlurEffectStyleLight;
if ([self.blurType isEqual: @"dark"]) return UIBlurEffectStyleDark;
Expand Down Expand Up @@ -183,6 +184,12 @@ - (void)updateBlurEffect
UIBlurEffectStyle style = [self blurEffectStyle];
self.blurEffect = [BlurEffectWithAmount effectWithStyle:style andBlurAmount:self.blurAmount];
self.blurEffectView.effect = self.blurEffect;

if ([self.blurType isEqual: @"transparent"]) {
for (UIView *subview in self.blurEffectView.subviews) {
subview.backgroundColor = [UIColor clearColor];
}
}
}

- (void)updateFallbackView
Expand Down
1 change: 1 addition & 0 deletions src/components/BlurView.ios.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ type BlurType =
| 'dark'
| 'light'
| 'xlight'
| 'transparent'
| 'prominent'
| 'regular'
| 'extraDark'
Expand Down
1 change: 1 addition & 0 deletions src/fabric/BlurViewNativeComponent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ interface NativeProps extends ViewProps {
| 'dark'
| 'light'
| 'xlight'
| 'transparent'
| 'prominent'
| 'regular'
| 'extraDark'
Expand Down
1 change: 1 addition & 0 deletions src/fabric/VibrancyViewNativeComponent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ interface NativeProps extends ViewProps {
| 'light'
| 'xlight'
| 'prominent'
| 'transparent'
| 'regular'
| 'extraDark'
| 'chromeMaterial'
Expand Down