IllegalArgumentException Unknown String Value: soft-light

[ponikar]

Description

Hello,

I am not sure whether its duplicate issue or not but some SVGs were crashing in our app. When we checked the logs it seems like the react-native-svg doesn't support soft-light as BlendMode. It crashes.

If soft-light doesn't have support yet, I think its best if we provide fallback for it instead of crashing the app.

If anyone already sorted this issue out, please let me know your solution in the comment box.

As always react-native-svg is the awesome library, thanks for making this happen.

com.horcrux.svg.FilterProperties$FeBlendMode in getEnum at line 93
com.horcrux.svg.FeBlendView in setMode at line 37
com.horcrux.svg.RenderableViewManager$FeBlendManager in setMode at line 1614
com.horcrux.svg.RenderableViewManager$FeBlendManager in setMode at line 1593
com.facebook.react.viewmanagers.RNSVGFeBlendManagerDelegate in setProperty at line 47
com.facebook.react.uimanager.ViewManagerPropertyUpdater in updateProps at line 46
com.facebook.react.uimanager.ViewManager in updateProperties at line 85
com.facebook.react.uimanager.ViewManager in createViewInstance at line 189
com.facebook.react.uimanager.ViewManager in createView at line 116
com.facebook.react.uimanager.NativeViewHierarchyManager in createView at line 277
com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation in execute at line 160
com.facebook.react.uimanager.UIViewOperationQueue$1 in run at line 845
com.facebook.react.uimanager.UIViewOperationQueue in flushPendingBatches at line 964
com.facebook.react.uimanager.UIViewOperationQueue in -$$Nest$mflushPendingBatches
com.facebook.react.uimanager.UIViewOperationQueue$2 in runGuarded at line 920
com.facebook.react.bridge.GuardedRunnable in run at line 29
android.os.Handler in handleCallback at line 959
android.os.Handler in dispatchMessage at line 100

Steps to reproduce

1. render SVG which has blendMode as soft-light.
2. run your app in either android or ios. (preferably physical device)

Snack or a link to a repository

I think for now this crash doesn't need repo example, I would submit later if required

SVG version

^15.7.1

React Native version

0.75.4

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Paper (Old Architecture)

Build type

Release app & production bundle

Device

Real device

Device model

iPhone 16 pro

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[jakex7]

Hi @ponikar
react-native-svg currently aims to support the SVG 1.1 standard, which defines the following blend modes for FeBlend:normal | multiply | screen | darken | lighten. You can find more details here: https://www.w3.org/TR/SVG11/filters.html#feBlendModeAttribute

We might consider adding support for additional modes in the future, but it's not a current priority. That said, contributions are always welcome!

[ponikar]

While that would be great if team can add additional support but I think the app shouldn't crash in this situation. Our app reported serval crashes last week. giving a warning message should work for now.

Thanks for the instant reply.