Compatibility issues with react-native-svg

9
open
matthieunelmes
matthieunelmes
Posted 4 months ago

Compatibility issues with react-native-svg #56

RN: "0.64.2" react-native-color-matrix-image-filters: "^5.2.10"

Amazing work here! I've been searching all over for a way to implement colormatrix filters in react-native.

However, react-native-svg <Image/> components do not render within <ColorMatrix/> components. To be honest, I suspect this is more due to how their Image components are structured:

<Image width="100" height="100" preserveAspectRatio="none" href={{ uri: vehicleDiagram.image }} />

Compared to default RN Image components:

<Image style={styles.tinyLogo} source={require('@expo/snack-static/react-native-logo.png')} />

iyegoroff
iyegoroff
Created 4 months ago

Thanks for the feedback!

Yes, you cannot wrap 'Image' component from react-native-svg because it has different structure on the native side.

matthieunelmes
matthieunelmes
Created 4 months ago

Thank you for replying. I did attempt to start delving into the src to determine if this could be handled with a simple tweak. If you think it's possible, could you point me in the rough direction and I'm happy to attempt a PR. If you look at the react-native-svg repo, there is a huge demand for filters.

iyegoroff
iyegoroff
Created 4 months ago

To apply filtering this library searches for an image component inside filter component's children. https://github.com/iyegoroff/react-native-color-matrix-image-filters/blob/c62f3b229d90fbf481292f046f7dc6378556d758/ios/CMIFColorMatrixImageFilter.m#L48-L69 https://github.com/iyegoroff/react-native-color-matrix-image-filters/blob/c62f3b229d90fbf481292f046f7dc6378556d758/android/src/main/java/iyegoroff/RNColorMatrixImageFilters/ColorMatrixImageFilter.java#L37-L48 I guess it is possible to wrap a top 'Svg' component because it is backed by native image as far as I know. But this may not work out of the box.

Wimmind
Wimmind
Created 1 month ago

Did you manage to apply filters for svg? if so, can you show an example?

matthieunelmes
matthieunelmes
Created 1 month ago

No, I had to park this and move onto other things. SVG filters are a widely requested feature especially on react-native-svg.

Wimmind
Wimmind
Created 1 month ago

No, I had to park this and move onto other things. SVG filters are a widely requested feature especially on react-native-svg.

That is, at the moment there is no way to impose, for example, a black and white filter on the svg component from react-native-svg ?

matthieunelmes
matthieunelmes
Created 1 month ago

Not that I am aware. A lot of people have been searching for this feature.

https://github.com/react-native-svg/react-native-svg/issues/150

chunghn
chunghn
Created 1 week ago

Hi. Did you find any workaround, either designing/coding aspects?

matthieunelmes
matthieunelmes
Created 1 week ago

Not yet, I had to pause but I had a few ideas I wanted to test. Firstly was making use of the react-native-svg Use component to try importing a standard Image component with the filters applied.