Comments (7)
I managed to put the blur inside of an AnimatedView, and change the opacity of that. However that caused some issues with the blur rendering on top of a few items on Android
from react-native-blur.
I managed to put the blur inside of an AnimatedView, and change the opacity of that. However that caused some issues with the blur rendering on top of a few items on Android
I have the same problem on Android. When i interpolate the opacity based on toast position the background is strange. It has the correct color only when opacity reach value 1.
from react-native-blur.
It is not strictly related to this, but I tried to use reanimated 3 to interpolate the width and other values for a header that needs to change with scrolling. It works perfectly fine on iOS but on Android it creates a noticeable lag in the scroll and it is not smooth at all. Anyone else has experiences this? Is it just a limitation for Android?
from react-native-blur.
It is not strictly related to this, but I tried to use reanimated 3 to interpolate the width and other values for a header that needs to change with scrolling. It works perfectly fine on iOS but on Android it creates a noticeable lag in the scroll and it is not smooth at all. Anyone else has experiences this? Is it just a limitation for Android?
It has to do with Android Blur implementation. Android use bitmap to draw canvas to create this blur effect which is costly in performance. If you notice for example Instagram is using Blur effect only in image preview for Android, simple case, messenger doesn't use at all blur effect on header in comparison with iOS. So they decide to use it in a way that will not depict performance. So i would suggest to do the same. It doesnt mean because you are developing a hybrid app should be the same in both platforms. If you want to use it because you like it, try to avoid complicate calculations like interpolations or similar, at least on Android. In iOS blur effect is support performant, because iOS is using blur in a lot of places in the OS. They have the patent :P Cheers!
from react-native-blur.
It is not strictly related to this, but I tried to use reanimated 3 to interpolate the width and other values for a header that needs to change with scrolling. It works perfectly fine on iOS but on Android it creates a noticeable lag in the scroll and it is not smooth at all. Anyone else has experiences this? Is it just a limitation for Android?
It has to do with Android Blur implementation. Android use bitmap to draw canvas to create this blur effect which is costly in performance. If you notice for example Instagram is using Blur effect only in image preview for Android, simple case, messenger doesn't use at all blur effect on header in comparison with iOS. So they decide to use it in a way that will not depict performance. So i would suggest to do the same. It doesnt mean because you are developing a hybrid app should be the same in both platforms. If you want to use it because you like it, try to avoid complicate calculations like interpolations or similar, at least on Android. In iOS blur effect is support performant, because iOS is using blur in a lot of places in the OS. They have the patent :P Cheers!
Thank you so much for the quick response! That's what I figured and told my employer, but I was curios on the deeper logic behind. We went with some opacity (which is not the same but good enough for now) and ti works fine!
from react-native-blur.
It is not strictly related to this, but I tried to use reanimated 3 to interpolate the width and other values for a header that needs to change with scrolling. It works perfectly fine on iOS but on Android it creates a noticeable lag in the scroll and it is not smooth at all. Anyone else has experiences this? Is it just a limitation for Android?
It has to do with Android Blur implementation. Android use bitmap to draw canvas to create this blur effect which is costly in performance. If you notice for example Instagram is using Blur effect only in image preview for Android, simple case, messenger doesn't use at all blur effect on header in comparison with iOS. So they decide to use it in a way that will not depict performance. So i would suggest to do the same. It doesnt mean because you are developing a hybrid app should be the same in both platforms. If you want to use it because you like it, try to avoid complicate calculations like interpolations or similar, at least on Android. In iOS blur effect is support performant, because iOS is using blur in a lot of places in the OS. They have the patent :P Cheers!
Thank you so much for the quick response! That's what I figured and told my employer, but I was curios on the deeper logic behind. We went with some opacity (which is not the same but good enough for now) and ti works fine!
Only experienced developers notice these details
from react-native-blur.
It is not strictly related to this, but I tried to use reanimated 3 to interpolate the width and other values for a header that needs to change with scrolling. It works perfectly fine on iOS but on Android it creates a noticeable lag in the scroll and it is not smooth at all. Anyone else has experiences this? Is it just a limitation for Android?
It has to do with Android Blur implementation. Android use bitmap to draw canvas to create this blur effect which is costly in performance. If you notice for example Instagram is using Blur effect only in image preview for Android, simple case, messenger doesn't use at all blur effect on header in comparison with iOS. So they decide to use it in a way that will not depict performance. So i would suggest to do the same. It doesnt mean because you are developing a hybrid app should be the same in both platforms. If you want to use it because you like it, try to avoid complicate calculations like interpolations or similar, at least on Android. In iOS blur effect is support performant, because iOS is using blur in a lot of places in the OS. They have the patent :P Cheers!
Thank you so much for the quick response! That's what I figured and told my employer, but I was curios on the deeper logic behind. We went with some opacity (which is not the same but good enough for now) and ti works fine!
Only experienced developers notice these details
Thanks! 🙏
from react-native-blur.
Related Issues (20)
- can use in macos and windows os? HOT 1
- Android build app crashed in version ^4.3.2 HOT 1
- Add support for Clear/Transparent Blur background HOT 8
- BlurRadius prop not working on IOS platform.
- Error using BlurView inside of TouchableWithoutFeedback tag HOT 1
- The build fail on iOS in react-native 0.73.2 with Fabric enabled HOT 2
- On Android devices, returning from another page results in a white screen HOT 2
- Ripple effect on buttons not working when using blurView event in other component
- [Android] Unable to find /../../../node_modules/react-native/android
- how to give border radius
- Exception thrown while executing UI block: -[BlurView setOnClick:]: unrecognized selector sent to instance 0x11898b1c0 HOT 2
- Item has shadow over blurView on Android HOT 3
- screen cover with white color background issue HOT 3
- When using frosted glass stack to jump in Android mode, ReactNavigation will experience lag and frosted glass will reset HOT 2
- Android - RN .73.6 - BlurView overlapping whole screen HOT 2
- Pressable becomes full screen when inside BlurView on Android HOT 1
- gradient effect is blackish in ios but not showing same view in android HOT 1
- Navigation issue with blurView HOT 10
- i used this to display image in modal not work
- Can't build on Android - cannot find symbol Activity HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-blur.