How to paint a whole SVG except for the insides of a shape.

[hirejohnsalcedo]

I've tried the Mask element for it. But, I'm not sure if I'm going the right path. Couldn't seem to figure out how to accomplish it. From what I understand, I'm trying to accomplish the reverse of a ClipPath. Basically paint everything outside but protect the inside of a shape.

[msand]

You can use either one, but clipping will likely be more efficient, e.g. clipPath with clipRule set to evenodd and geometry something like this will probably be the easiest:

import React from 'react';
import { View } from 'react-native';
import Svg, { Defs, ClipPath, Circle, Rect } from 'react-native-svg';

export default class App extends React.Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          alignContent: 'center',
          justifyContent: 'center',
          backgroundColor: '#ecf0f1',
        }}
      >
        <Svg width="100%" height="100%" viewBox="0 0 100 100">
          <Defs>
            <ClipPath id="clip_out" clipRule="evenodd">
              <Rect width={100} height={100}/>
              <Circle cx={50} cy={50} r={25}/>
            </ClipPath>
          </Defs>
          <Rect width={100} height={100} fill="green" clipPath="url(#clip_out)" />
        </Svg>
      </View>
    );
  }
}

Alternatively you can use clipRule="nonzero" and draw path segments in opposite directions such that they cancel out in the parts you want to exclude:
https://www.w3.org/TR/SVG11/masking.html#ClipRuleProperty
https://www.w3.org/TR/SVG11/painting.html#FillRuleProperty
Something a bit like this:

        <Svg width="100%" height="100%" viewBox="0 0 200 200">
          <Defs>
            <ClipPath id="clip" clipRule="nonzero">
              <Path d="
              M50 50 h100 v100 H50z
              m25 25 v50  h50  V75z" />
            </ClipPath>
          </Defs>
          <Circle cx={100} cy={100} r={55} clipPath="url(#clip)" />
        </Svg>

[annebancroftsghost]

I've tried your solution but TS is telling me that clipRule is not a property of ClipPath, and sure enough when I inspect the module, it only has optional id. Did this implementation change recently?