question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Compatibility issues with react-native-svg

See original GitHub issue

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')} />

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:1
  • Comments:9 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
matthieunelmescommented, Nov 23, 2021

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.

1reaction
matthieunelmescommented, Oct 6, 2021

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

react-native-svg - npm
react -native-svg provides SVG support to React Native on iOS, Android, macOS, Windows, and a compatibility layer for the web.
Read more >
How to import SVG files in React Native using react-native-svg
Open up the project in your favorite editor and start by importing the Svg and Circle components from react-native-svg, as shown below. import...
Read more >
Getting Started with Victory Native
In this guide, we'll show you how to get started with Victory Native and the React Native SVG dependency running in your React...
Read more >
Can't compile react-native-svg on react-native-windows
I'm working on a react-native-windows UWP application and trying to install ... I already opened an issue on react-native-svg repo: ...
Read more >
React v18.0 – React Blog
Note for React Native users: React 18 will ship in React Native with the ... some time for libraries to upgrade to be...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found