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.

Changing color prop on svg element doesn't trigger rerender

See original GitHub issue

Bug

changing color prop on SVG element doesn’t trigger a change to inherited colors.

Environment info

React native info output:

React Native Environment Info:
    System:
      OS: macOS 10.14.2
      CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
      Memory: 129.69 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.15.0 - ~/.nvm/versions/node/v10.15.0/bin/node
      Yarn: 1.13.0 - /usr/local/bin/yarn
      npm: 6.4.1 - ~/.nvm/versions/node/v10.15.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
    IDEs:
      Android Studio: 3.3 AI-182.5107.16.33.5314842
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3
      react-native: 0.59.8 => 0.59.8
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Library version: 9.5.1

Steps To Reproduce

Create SVG component with color prop Have a child in svg using currentColor Change the color prop

Describe what you expected to happen:

The child color to be updated to the new color

Reproducible sample code

https://snack.expo.io/r1yWWPAA4

Issue Analytics

State:
Created 4 years ago
Comments:9

Top GitHub Comments

9reactions

slorbercommented, Jul 15, 2019

Can confirm this issue. Not that I really need the feature but it drove me crazy not understanding why my storybook color knob didn’t work 😃

Simple workaround is key={color} to remount the SVG

1reaction

njdancercommented, Jul 17, 2019

@slorber This works great until expo update their dependency on react-native-svg. Thanks.

Top Results From Across the Web

Changing color prop on svg element doesn't trigger rerender

Bug changing color prop on SVG element doesn't trigger a change to inherited colors. Environment info React native info output: React Native ...

React SVG not rerendering on attribute update - Stack Overflow

1 Answer 1 ... It doesn't trigger SVG primitive to remount. The point is we need to trigger a browser to reapply styles...

React.Component

An update can be caused by changes to props or state. These methods are called in the following order when a component is...

Motion components | Framer for Developers

Motion components are DOM primitives optimised for 60fps animation and gestures. There's a motion component for every HTML and SVG element, for instance...

Building SVG Components with React.js and d3.js - pganalyze

SVG can be styled with CSS just like HTML, but note that many of the actual styles themselves are different: fill instead of...