teeny tiny gradients in sketch #5

VinSpee · 2018-04-27T18:27:27Z

Hi!

I'm using this plugin on a RN / Sketch / Web project and running into an issue with gradients in Sketch.

Code:

const Bg = ({ type }: { type: string }) => (
  <Svg
    id="grad"
    style={{
      position: 'absolute',
      ...StyleSheet.absoluteFillObject,
      width: '100%',
      height: '100%',
    }}
  >
    <Defs>
      <LinearGradient
        id={`button-sheen-${type}`}
        x1="0"
        x2="0"
        y1="0"
        y2="1"
      >
        <Stop
          offset="0%"
          stopColor={THEME[type.toUpperCase()].BG_COLOR_START}
        />
        <Stop
          offset="100%"
          stopColor={THEME[type.toUpperCase()].BG_COLOR_END}
        />
      </LinearGradient>
    </Defs>
    <Rect
      fill={`url(#button-sheen-${type})`}
      style={{
        position: 'absolute',
        ...StyleSheet.absoluteFillObject,
        width: '100%',
        height: '100%',
      }}
      x="0"
      y="0"
    />
  </Svg>
);