changing the fill through a prop only works once

[eyaleizenberg]

Hi, I have an SVG I created and it receives the 'fill' and 'stroke' as props. When I initially render the SVG it works fine. However, once the prop changes, the color doesn't change (even though the component did re-render itself).

This is the component:

'use strict'

React = require('react-native')
{ Svg, G, Path } = require('react-native-svg-elements')

NotificationsIcon = React.createClass
  render: ->
    <Svg style={[{width: @props.scale * 42, height: @props.scale * 46}, @props.style]}>
      <G>
        <Path
          fill={@props.fill}
          fillRule={"evenodd"}
          scale={@props.scale}
          d={"M21.000,45.000 C18.239,45.000 16.000,42.761 16.000,40.000 L26.000,40.000 C26.000,42.761 23.761,45.000 21.000,45.000 Z"} />
        <Path
          stroke={@props.stroke}
          strokeWidth={"2"}
          scale={@props.scale}
          fillRule={"evenodd"}
          d={"M39.500,38.000 L36.000,38.000 L6.000,38.000 L2.500,38.000 C1.948,38.000 1.500,37.552 1.500,37.000 L1.500,34.563 C1.500,34.010 1.948,33.563 2.500,33.563 L3.000,33.563 L3.000,33.427 C3.236,33.509 3.486,33.563 3.750,33.563 C4.993,33.563 6.000,32.569 6.000,31.344 C6.000,31.091 5.948,30.852 5.869,30.625 L6.000,30.625 L6.000,16.000 C6.000,7.716 12.716,1.000 21.000,1.000 C29.284,1.000 36.000,7.716 36.000,16.000 L36.000,30.625 L36.131,30.625 C36.052,30.852 36.000,31.091 36.000,31.344 C36.000,32.569 37.007,33.563 38.250,33.563 C38.514,33.563 38.764,33.509 39.000,33.427 L39.000,33.563 L39.500,33.563 C40.052,33.563 40.500,34.010 40.500,34.563 L40.500,37.000 C40.500,37.552 40.052,38.000 39.500,38.000 Z"} />
      </G>
    </Svg>

module.exports = NotificationsIcon

And I call it like this:

<NotificationsIcon fill={@iconColor()} stroke={@iconColor()} scale={0.5} style={styles.icon} />

iconColor: -> if @props.selected then colors.actionBlue else colors.baseWhite

I am seeing the exact same behaviour with other icons. Any ideas?

Thanks!