feat: add real blur effect support with TargetView component#34
feat: add real blur effect support with TargetView component#34sbaiahmed1 wants to merge 7 commits into
Conversation
- Implemented a new TargetView component for Android to enable real-time blur effects. - Updated BlurView to support targetId prop for specifying the target view to blur. - Added styles and UI elements for toggling between standard and real blur modes. - Refactored existing components to improve structure and readability. - Updated TypeScript definitions to include new props and components.
Reviewer's GuideThis pull request adopts Dimezis BlurView v3’s target-based blur architecture on Android by introducing a new TargetView component and extending the existing BlurView API with a targetId prop. The native Android code is refactored to remove the overlay-only approach, implement tag-based view discovery, and simplify initialization/cleanup. TypeScript definitions and exports are updated accordingly, and the example app and README are overhauled to demonstrate and document the migration path. Sequence diagram for real blur effect with TargetView and BlurView on AndroidsequenceDiagram
participant App
participant TargetView
participant BlurView
participant AndroidNative
App->>TargetView: Render with id="background"
App->>BlurView: Render with targetId="background"
BlurView->>AndroidNative: Find TargetView by targetId
AndroidNative->>TargetView: Locate and tag as blur target
AndroidNative->>BlurView: Apply real blur to TargetView content
Entity relationship diagram for TargetView and BlurView linkageerDiagram
TARGET_VIEW {
id string PK
}
BLUR_VIEW {
targetId string FK
}
BLUR_VIEW ||--|{ TARGET_VIEW : "targets"
Class diagram for new TargetView and updated BlurView componentsclassDiagram
class BlurView {
+blurType: BlurType
+blurAmount: number
+targetId: string
+glassType: GlassType
+glassTintColor: string
+glassOpacity: number
+isInteractive: boolean
+ignoreSafeArea: boolean
+children: ReactNode
}
class BlurTargetView {
+id: string
+style: StyleProp<ViewStyle>
+children: ReactNode
}
class TargetViewNativeComponent {
+id: string
}
BlurView --> "targetId" BlurTargetView : targets
BlurTargetView --> TargetViewNativeComponent : native implementation
File-Level Changes
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey there - I've reviewed your changes - here's some feedback:
- The PR is very large and touches both UI examples and native Android code—consider splitting it into smaller, focused PRs (e.g. native blur changes vs example updates) to simplify review and testing.
- The version in package.json was downgraded to 3.1.2 despite introducing a breaking change—please bump it properly to the next major/minor version to reflect the new release.
- You removed the branch in BlurView that handled rendering without children; this may break use cases where BlurView is used standalone (no children), so either restore that path or verify those scenarios still work.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The PR is very large and touches both UI examples and native Android code—consider splitting it into smaller, focused PRs (e.g. native blur changes vs example updates) to simplify review and testing.
- The version in package.json was downgraded to 3.1.2 despite introducing a breaking change—please bump it properly to the next major/minor version to reflect the new release.
- You removed the branch in BlurView that handled rendering without children; this may break use cases where BlurView is used standalone (no children), so either restore that path or verify those scenarios still work.
## Individual Comments
### Comment 1
<location> `android/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeBlurView.kt:113-116` </location>
<code_context>
- removeCallbacks(null)
- logDebug("View detached, reset state")
+ private fun setupBlurView() {
+ super.setBackgroundColor(this.overlayColor.color)
+ super.clipChildren = true
+ super.clipToOutline = true
+ super.layoutParams = LayoutParams(
+ LayoutParams.MATCH_PARENT,
+ LayoutParams.MATCH_PARENT
</code_context>
<issue_to_address>
**question:** Setting layoutParams in setupBlurView may override parent constraints.
Using MATCH_PARENT for layoutParams here may unintentionally override parent or React Native constraints, potentially causing layout issues. Please verify if this is necessary for all cases.
</issue_to_address>
### Comment 2
<location> `src/BlurView.tsx:130-124` </location>
<code_context>
return (
- <View style={[{ position: 'relative', overflow: 'hidden' }, style]}>
- {/* Blur effect positioned absolutely behind content */}
+ <View style={[style, { overflow: 'hidden' }]}>
<ReactNativeBlurView
blurType={blurType}
blurAmount={blurAmount}
</code_context>
<issue_to_address>
**suggestion:** Absolute positioning of BlurView may not work as expected if parent style does not specify position.
Consider requiring or documenting that the parent View must have a position style (e.g., 'relative') to ensure BlurView overlays correctly.
</issue_to_address>
### Comment 3
<location> `example/src/components/ComparaisonExample.tsx:70` </location>
<code_context>
+ {useRealBlur ? (
+ <View style={styles.realBlurContainer}>
<BlurView
+ targetId="app-background"
blurType={currentCard.type as BlurType}
blurAmount={selectedIntensity}
</code_context>
<issue_to_address>
**issue (bug_risk):** TargetId 'app-background' must match a TargetView id in the app.
If 'app-background' does not match an existing TargetView id, the blur effect will fail.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
|
@DanielAraldi you can take a look |
DanielAraldi
left a comment
DanielAraldi
left a comment
There was a problem hiding this comment.
LGTM!
Very happy with this feature!!! 🎉👏
|
Wait @sbaiahmed1, do you test your example app with |
|
I didn't test it yet |
Ok 👍 |
|
So @DanielAraldi it is not working unfortunately I think of ditching the library seriously right now |
Exactly, this problem is haunting me a lot, unfortunately we will have to go this way. |
|
Let me give you a solution |
All right, tomorrow night I can test, ok? |
|
Take your time homie! I wont be able to push it today im kinda sick a little |
Great, I'll get back to you as soon as possible, hope your flu gets better! |
- Created NAVIGATION.md to outline app features and navigation structure. - Implemented RootNavigator for managing navigation between screens. - Defined RootStackParamList for type safety in navigation. - Developed HomeScreen with background image cycling and navigation options. - Added BlurDemoScreen for interactive blur type and intensity controls. - Created LiquidGlassScreen showcasing iOS-specific liquid glass effects. - Implemented CardsScreen to demonstrate various blurred card designs. - Developed GalleryScreen featuring an image gallery with blurred overlays. - Updated index.ts to export all screens for easier imports.
|
Hey @sbaiahmed1, this Blur library is interesting: |
It is only jetpack compose :( |
Oh my bad 😅 |
I did try blurring from android but it has performance issues ... |
I am thinking make a fork of the Dimezis repo and trying another alternatives implementation |
|
Hmm that is a good idea |
That's an excellent idea, if it works, please let me know! |
|
Good news @sbaiahmed1! Transactions with bottom tabs work for me! 🤩🚀🥳 happy_cfVX6YJg.mp4 |
|
@DanielAraldi , Good Job!!! |
|
I did a little workaround to get this to work. Basically, I force the |
|
I think it is with the rendering engine or maybe method (internally) I think i will release as is right now |
Hmmm, I’ll go to see your branch and investigate this problem |
|
Hey @sbaiahmed1, warning only, I'll go fix the tiny problem with I created an issue in Dimezis's library also. I ask if this problem is in the own implementation or not (I'm curious 😆): |
|
Do as u please @DanielAraldi |
LMAO, you are amazing, brother @sbaiahmed1! Thank you!!! |
|
Hey @sbaiahmed1! See this comment: |
|
Hey @sbaiahmed1, the Dimezis accepts my issue! It fixed the blur update problem in API 31! We update Dimezis's |
|
Good news!!!!!! 🥳🚀 Dimezis's BlurView library WORKS on version 3.2v in Pixel 6 (SDK 31) pixel-6-happy.movLife is good ✌️ @sbaiahmed1 |
|
Good job bruder! I will update my MR and merge it today! |
|
Great @sbaiahmed1, I'll make a small commit to this PR soon, I just ask that you test it with nested tabs. |
|
Sure ill wait for you go |
Ok! 👍 |
|
Hey @sbaiahmed1, updated for you! For me, it worked correctly, I believe that even with the problem with nested tabs, we can still release it and resolve this in another PR. I thought about messing with your documentation, but it looks so beautiful that I was afraid of ruining it, haha. If you'd like, I'd love for you to include a comparison with my library in your documentation; that would be great, LOL. Finally, it's good to clarify the implementation with bottom tabs in the documentation, I believe this can cause confusion for those who are going to use it at first, as they are used to BlurView 2v. Thank you for your collaboration, if you want to exchange ideas and solutions, count on me, without you this would not have been possible. 🚀👊 |
DanielAraldi
added
documentation
|
Hey @sbaiahmed1, I've found a new issue in Pixel 6 (Android 12 and SDK 31): when zero is provided, the App crashes. Good waiting a bit before releasing the version. |
|
Hi @sbaiahmed1, I added a momentary hack to Android higher than 12. Could you test this fixture please. I believe that can be released this night. |
Thank you @DanielAraldi for all the help and effort you put into fixing the issues in the lib especially with blur Target ( I hate it ) |
will do mate! I will test this tonight, update the readme and release |
Good idea! Yes, we'll do that in the future, it was great working with you! |
|
Closed, dependency library is going to be replaced with newer lib that keeps the same syntax |
2 participants
Thanks to https://github.com/DanielAraldi @DanielAraldi
resloves: Android crash: Failed resolution of: Leightbitlab/com/blurview/RenderEffectBlur #22
Using RNN will crash on Android #19