Fix low-quality masks on iOS

[simontreny]

Summary

This PR fixes low-quality masks on iOS, as reported in #1098.

This was caused by the bitmap for the mask being created with CGBitmapContextCreate() which does not take into account the device's pixel-density, unlike UIGraphicsBeginImageContextWithOptions().

To fix it, the pixel-density is retrieved using [[UIScreen mainScreen] scale] and it is used as a scale factor for the mask bitmap.

Test Plan

I've tested using this sample:

<Svg width={300} height={180}>
  <Defs>
    <LinearGradient id="redGrad" x1="0" y1="0" x2="1" y2="0">
      <Stop offset="0" stopColor="#FF0000" stopOpacity="0" />
      <Stop offset="1" stopColor="#FF0000" stopOpacity="1" />
    </LinearGradient>
    <LinearGradient id="greenGrad" x1="0" y1="0" x2="1" y2="0">
      <Stop offset="0" stopColor="#00FF00" stopOpacity="0" />
      <Stop offset="1" stopColor="#00FF00" stopOpacity="1" />
    </LinearGradient>
    <LinearGradient id="blueGrad" x1="0" y1="0" x2="1" y2="0">
      <Stop offset="0" stopColor="#0000FF" stopOpacity="0" />
      <Stop offset="1" stopColor="#0000FF" stopOpacity="1" />
    </LinearGradient>
    <Mask
      id="mask"
      x="0"
      y="0"
      width="300"
      height="180"
    >
      <Text
        fill="url(#redGrad)"
        fontSize="40"
        fontWeight="bold"
        x="20"
        y="45"
      >
        TEST MASK
      </Text>
      <Text
        fill="url(#greenGrad)"
        fontSize="40"
        fontWeight="bold"
        x="20"
        y="105"
      >
        TEST MASK
      </Text>
      <Text
        fill="url(#blueGrad)"
        fontSize="40"
        fontWeight="bold"
        x="20"
        y="165"
      >
        TEST MASK
      </Text>
    </Mask>
  </Defs>
  <Rect x="0" y="0" width="300" height="180" fill="red" mask="url(#mask)" />
</Svg>

Results:

Before	After

[bhishaksanyal]

Do you plan a new release soon? I have great hopes that this PR could solve many issues in my app 🙏🏻

[WoLewicki]

Since we want to support macOS, you should not use UIScreen, but rather add the option for both platforms analogous to how it is done e.g. with UIColor, so just add new define #define RNSVGScreen UIScreen here: https://github.com/react-native-svg/react-native-svg/blob/39c8332f4dac8acfe1c60338ad4a8f8231538c91/apple/RNSVGUIKit.h#L12 and #define RNSVGScreen NSScreen here: https://github.com/react-native-svg/react-native-svg/blob/39c8332f4dac8acfe1c60338ad4a8f8231538c91/apple/RNSVGUIKit.h#L20 and then use RNSVGScreen instead of UIScreen in your PR.

[simontreny]

Thanks for the feedback @WoLewicki ! I took it into account but I had to use a different approach as the scale property is called backingScaleFactor on macOS. I was not able to test the changes on macOS though. Please let me know what you think.

[WoLewicki]

LGTM 🎉