App crashes when adding mask prop to Circle

Question

I'm trying to 'copy' this https://codepen.io/dannyb9737/pen/jQJZWO

I tried also to reproduce it in the sandbox - https://snack.expo.io/Bk-s-2MyN but seems like the Component Mask is undefined :(

to work into react-native, but the app keep crashing only after I'm adding the mask prop in the Circle component, here is my code (mixing it with styled-component).

the idea behind all of it is to create a component that will get a number and it will fill the exact number of ticks as the arg.

const circleSize = 200;

const Container = styled.View`
  margin: 50px auto;
  position: relative;
  width: ${circleSize}px;
  height: ${circleSize}px;
  border-radius: ${circleSize/2}px;
  background-color: #f6b800;
  overflow: hidden;
`;

const ModifiedCircle = styled(Circle).attrs({
  strokeWidth: "10",
  strokeLinecap: "butt",
  fill: "transparent",
  strokeDasharray: "2.236 3",
  cx: "50",
  cy: "50",
  r: "50"
})``;

const ClockWithTicks = () => (
  <Container>
    <Svg height={circleSize} width={circleSize} viewBox="0 0 100 100">
      <Defs>
        <Mask id="mask">
          <ModifiedCircle
            strokeDashoffset="30"
            strokeDasharray="314.15 314.15"
            stroke="#000"
            transform="rotate(-90.5 50 50)"
          />
        </Mask>
      </Defs>
      <ModifiedCircle stroke="#fff" />
      <ModifiedCircle stroke="#000" mask="url(#mask)" />
    </Svg>
  </Container>
);

I'm working with android emulator, "react": "16.5.0", "react-native": "0.57.2", "react-native-svg": "^8.0.8",

thanks!

Answer 1

Here's a Github issue where a User gets the same error.

As someone has suggested, you may not be providing the correct props to <Mask />

Looking at the source code, it expects:

• name
• x,
• y
• height

You can see the props here. The other props that are used but not listed above have fallbacks.

<Mask name="mask" x={0} y={0} height={100}>...</Mask>