Adding example of using native view with Mask

Feature Request

Hi @msand

I just see the new release, Thanks for that. I just wanted to try the new feature, but I didn’t succeed so I should misusing it.

It would be great if you add an example to Mask section in ReadMe.md file.

Why it is needed

It helps users to understand how it should be used, like the other examples.

Code sample

here is what I tried

https://snack.expo.io/@saeedzhiany/using-native-view-with-mask

import React from 'react';
import {View, Image, Text} from 'react-native';
import {
  Svg,
  G,
  Circle,
  Defs,
  LinearGradient,
  Mask,
  Rect,
  Stop,
} from 'react-native-svg';

export default () => {
  return (
    <View style={{flex: 1, justifyContent: 'center'}}>
      <Svg height="50%">
        <Defs>
          <LinearGradient
            id="Gradient"
            gradientUnits="userSpaceOnUse"
            x1="0"
            y1="0"
            x2="800"
            y2="0">
            <Stop offset="0" stopColor="white" stopOpacity="0" />
            <Stop offset="1" stopColor="white" stopOpacity="1" />
          </LinearGradient>
          <Mask
            id="Mask"
            maskUnits="userSpaceOnUse"
            x='0'
            y='0'
            width="800"
            height="300">
            <Rect x="0" y="0" width="800" height="300" fill="url(#Gradient)" />
          </Mask>
        </Defs>
        <G mask="url(#Mask)">
          <Circle x={50} y={70} r={65} />
          <G transform="translate(200, 100)">
            <Text>Some Text</Text>
          </G>
        </G>
      </Svg>
    </View>
  );
};

[SaeedZhiany]

Oh, I wonder what makes that happen, I guess it calls render on the element more than once, or then react-native / the os calls render on it independently of the code here.

What about Android’s result? it seems the nested Text within SVG is disappeared (or even not rendered) however, I’ll test it on my project tomorrow, maybe it because of the library’s version on expo as you said.

Also, Thanks for your guidance.

[msand]

Ah, yeah that’s correct