feat: update Android blur implementation to use QmBlurView library and improve performance#36
Conversation
…d improve performance
|
@DanielAraldi Hey Daniel can you test this? so much better and same API so no need for BlurTarget and hacks |
Reviewer's GuideMigrates Android blur implementation from the Dimezis BlurView to QmBlurView, streamlines initialization and setter logic by removing legacy setup/teardown code, updates dependencies, build scripts, and documentation, and switches the view manager to SimpleViewManager. Class diagram for updated ReactNativeBlurView (Android)classDiagram
class ReactNativeBlurView {
- currentBlurRadius: Float
- currentOverlayColor: Int
- currentCornerRadius: Float
- originalBackgroundColor: Int?
- hasExplicitBackground: Boolean
- glassTintColor: Int
+ setBlurAmount(amount: Float)
+ setBlurType(type: String)
+ setReducedTransparencyFallbackColor(color: String?)
+ setGlassTintColor(color: String?)
+ setIsInteractive(isInteractive: Boolean)
+ cleanup()
- initializeBlur()
- updateGlassEffect()
- updateViewType()
- mapBlurAmountToRadius(amount: Float): Float
- logDebug(message: String)
- logError(message: String, e: Exception)
- setBackgroundColor(color: Int)
- onDetachedFromWindow()
}
class BlurView
ReactNativeBlurView --|> BlurView
BlurView <.. QmBlurViewLibrary
class QmBlurViewLibrary
QmBlurViewLibrary : <<library>>
Class diagram for updated ReactNativeBlurViewManager (Android)classDiagram
class ReactNativeBlurViewManager {
- mDelegate: ViewManagerDelegate<ReactNativeBlurView>
+ getName(): String
+ createViewInstance(context: ThemedReactContext): ReactNativeBlurView
+ setBlurAmount(view: ReactNativeBlurView, amount: Float)
+ setBlurType(view: ReactNativeBlurView, type: String)
+ setReducedTransparencyFallbackColor(view: ReactNativeBlurView, color: String?)
+ setGlassTintColor(view: ReactNativeBlurView, color: String?)
+ setIsInteractive(view: ReactNativeBlurView, isInteractive: Boolean)
}
class SimpleViewManager
ReactNativeBlurViewManager --|> SimpleViewManager
ReactNativeBlurViewManager ..> ReactNativeBlurView
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 and they look great!
Prompt for AI Agents
Please address the comments from this code review:
## Individual Comments
### Comment 1
<location> `android/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeBlurView.kt:133` </location>
<code_context>
originalBackgroundColor = null
- pendingStyleUpdate = false
- // Clear any pending runnables to prevent memory leaks
removeCallbacks(null)
- logDebug("View detached, reset state")
- }
</code_context>
<issue_to_address>
**issue (bug_risk):** removeCallbacks(null) may not clear all pending runnables as intended.
According to Android documentation, removeCallbacks(null) only removes callbacks with a null Runnable. To clear all pending runnables, you should track and remove them individually.
</issue_to_address>
### Comment 2
<location> `android/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeBlurView.kt:142` </location>
<code_context>
fun setBlurAmount(amount: Float) {
- blurRadius = mapBlurAmountToRadius(amount)
- logDebug("setBlurAmount: $amount -> $blurRadius (mapped from 0-100 to 0-25 range, isSetup: $isSetup)")
+ currentBlurRadius = mapBlurAmountToRadius(amount)
+ logDebug("setBlurAmount: $amount -> $currentBlurRadius (mapped from 0-100 to 0-25 range)")
</code_context>
<issue_to_address>
**suggestion (bug_risk):** No validation for blur amount input range.
Please add input validation to ensure the blur amount is within 0-100 to avoid unexpected behavior.
Suggested implementation:
```
/**
* @param amount The blur amount value (0-100), will be mapped to Android's 0-25 radius range
*/
fun setBlurAmount(amount: Float) {
var validatedAmount = amount
if (amount < 0f || amount > 100f) {
logDebug("Warning: blur amount $amount is out of range (0-100). Clamping to valid range.")
validatedAmount = amount.coerceIn(0f, 100f)
}
```
```
currentBlurRadius = mapBlurAmountToRadius(validatedAmount)
logDebug("setBlurAmount: $validatedAmount -> $currentBlurRadius (mapped from 0-100 to 0-25 range)")
```
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
|
Hello @sbaiahmed1, I gave a star to the library this Thursday. I'll go test your implementation as soon as possible! |
OMGGGGGG this is called fucking blur |
NICE, wonderful, do you testing the new implementation in SDK <= 31? |
I couldnt test on android SDK 31, simulator wont launch |
|
OMG, very beautiful, I'll test for you |
- Added AppNavigator for managing navigation between Home, Examples, and Settings screens. - Created BlurTabBar for custom tab navigation with blur effects. - Developed ExamplesScreen to showcase different blur types and intensities. - Implemented HomeScreen with blur cards demonstrating features of the blur library. - Created SettingsScreen to provide information about the library and its features. - Updated package.json to include necessary dependencies for navigation.
…ted BlurTabBar styles
DanielAraldi
added
documentation
|
Hey @sbaiahmed1, I'm looking forward to testing this implementation, I was planning to change to it in the future. This library has ProgressiveBlur, soon we can add it, I'm excited about this! |
|
Thank you @DanielAraldi, I'm waiting for your test then I will merge this one :D I will also close the MR for BlurTarget (phew) |
That's great! I'll test your PR later today, around 8 PM here in Brazil. I'll be following these ProgressiveBlur MRs. So far I haven't seen any library that implements it natively. This library would be the first and would greatly help the community 🤝🎉 |
|
Hey @sbaiahmed1, I am starting the tests here! |
Perfect!! Quick as usual 🙏 |
|
Hey @sbaiahmed1, I noticed a small issue with the first render of the BlurView when changing tabs. Current tab in first rendering makes white: I tested in the SDK 31, Android 12, Pixel 6. In SDK 36, Android LTS, Pixel 9 the same problem. 
video_3IJKzjD4.mp4 |
|
Hey @sbaiahmed1, Just so you know, I've added some settings to make our development easier in Xcode and Android Studio, if necessary. |
|
Good morning @DanielAraldi , the thing is for android i dont recommend putting these manually, I want it to inherit directly the project config if possible. Do you agree ? it would make it less painful for us |
|
as for the SDK 31, I think the package QM has an apk in their repo so we can test |
|
take a look at this |
Hello @sbaiahmed1, my bad brother, I'll go to revert these changes |
Good idea! |
Interesting, I'm thinking, could it be my computer? Maybe it's just too slow, LOL. We test with the APK of the QM, which will help us. |
|
@DanielAraldi The phones in picture are sdk 35 35 and 31 so i dont know really what to do 🥹 |
I'll test the Qm APK on my physical device as soon as possible, and also on my other machine. I want to see if the behavior will be the same. |
|
Keep me updated if all is good for you |
Hey @sbaiahmed1, I tested the Qm APK on my device and didn't have the same problem as with the emulators, I'm a little confused. Maybe the problem I described occurred because of my machine itself, that's the only thing I can think of right now, haha 😂 |
|
Hahahahaha I will merge the branch then and let the community test it ? |
Yep, let's go! |
|
Good👍 |
Thank you for the amazing library 🙏 really appreciate it man |
Hey friend, I have migrated from implementation 'com.qmdeve:QmBlurView:1.0.4.3'💗 |
|
Will update it |
3 participants
Changed library to keep the same usages and methods (avoid blurTarget)
Summary by Sourcery
Migrate Android blur to QmBlurView to improve performance and simplify setup, update build configurations and documentation.
New Features:
Enhancements:
Build:
Documentation: