react-native: [Crash] RCTImageBlurUtils.m BlurRadius Crash
Description
We are having an issue with RCTImageBlurUtils.m causing a Kernel crash for some images.
The images we identified are all pretty minimal (black and white, with a lot of black pixels). Not sure if this is related and the blur algorithm simply doesn’t have enough information to go by, for most other images everything works normal.
I attached some of the images that are causing the crash below. We tried both a blurRadius of 5, as well as 18. Behavior is the same and it always results in a crash:
Thread 3: EXC_BAD_ACCESS (code=1, address=0x13d54c4c8)
Version
0.70.6
Output of npx react-native info
System: OS: macOS 13.1 CPU: (10) arm64 Apple M1 Max Memory: 7.53 GB / 64.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 16.14.0 - /usr/local/bin/node Yarn: 1.22.17 - /usr/local/bin/yarn npm: 8.19.2 - ~/trackstats/node_modules/.bin/npm Watchman: Not Found Managers: CocoaPods: 1.11.3 - /Users/Oskar/.rbenv/shims/pod SDKs: iOS SDK: Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1 Android SDK: Not Found IDEs: Android Studio: 2021.3 AI-213.7172.25.2113.9123335 Xcode: 14.2/14C18 - /usr/bin/xcodebuild Languages: Java: 17.0.3.1 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: ^18.2.0 => 18.2.0 react-native: ^0.70.6 => 0.70.6 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found
Steps to reproduce
<ImageBackground
blurRadius={18}
source={{uri: 'https://i.scdn.co/image/ab67616d0000b2737663b2f75fe4d8fb2cac8c27'}}
/>
<ImageBackground
blurRadius={5}
source={{uri: 'https://i.scdn.co/image/ab67616d0000b273d5a219b270d74a266131df18'}}
/>
Both of those images are crashing the application for us (potentially because they are mostly black?)
Snack, code example, screenshot, or link to a repository
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 5
- Comments: 23 (19 by maintainers)
I can still reproduce the crash, in the simulator even with this fix applied, with this image and
blurRadius: 50Same issue here, started seeing this recently (probably have not seen this before just because it only happens for certain images). RN 0.70.5 / hermes enabled, old arch, production app
Following up here as this is pretty serious and reproducible crash that occurs on our production apps.
@sammy-SC Maybe check if you can reproduce it based on what someone else experienced here: https://github.com/facebook/react-native/issues/35364
https://snack.expo.dev/@saurabhkanswalquizizz/imagebackground-blurradius
@sammy-SC Yes correct, applying a blur-radius on those two images causes an immediate crash because the ARGB method can’t handle the image. First I was under the impression that it was due to greyscaled images being excluded from the previous step of being converted to ARGB, which is why I opened the following PR: https://github.com/facebook/react-native/pull/37508
However, it turned out that they still caused a crash, possibly because of the new UIGraphicsImageRenderer not properly aligning the bitmap data. I opted to reverse back to the older UIGraphicsBeginImageContextWithOptions which works reliably, however might be a bit slower as the API is older: https://github.com/facebook/react-native/pull/37546
There could be a path to use the newer UIGraphicsImageRenderer, however as the new API does not provide a lot of customizability it would involve writing more code and dealing with additional complexity, particularly when dealing with memory management in order to manually ensure that the buffer is properly formatted and aligned.
Are you able to reproduce the crash on your side when blurring the images?
Fix has been merged!
We can also reproduce the issue on production:
RN 0.71.6 / hermes enabled
Good day to everyone. We are also having the same issue on our production app with version RN 0.70.6. any suggestions ?