Icon is not rendering properly in 6.3.1

this code below worked well on 5.4.2, but it does not render correctly on 6.3.1

import { G } from 'react-native-svg';

type GProps = {
  transform?: string,
  children: React.Node,
};

const SVGGroup = ({ transform, children, ...otherProps }: GProps) => {
  // Bailout earlier if no transforms were passed
  if (!transform) {
    return <G {...otherProps}>{children}</G>;
  }

  // expect transform to be in the format transformation(args)
  // Don't make any assumptions about format validity, we expect it to always be correct.
  const transforms = transform
    .trim()
    .split(') ')
    .map(item => (item.indexOf(')') !== -1 ? item : item + ')'));
  const regex = /(\w+)\((.*)\)/;

  let result = children;
  let i = transforms.length;

  // build component tree going from children to parent
  while (--i >= 0) {
    const matches = regex.exec(transforms[i]);
    // apply passed prop only to the root parent
    const props = i === 0 ? otherProps : {};
    result = (
      <G
        transform={{
          [matches[1]]: matches[2],
        }}
        {...props}
      >
        {result}
      </G>
    );
  }

  return result;
};

export default SVGGroup;

import G from '../common/SVGGroup';

const FilterIcon = ({ color, size, stroke }: PropsIconRender) => (
  <Svg width={size} height={size} viewBox="0 0 50 50">
    <Defs>
      <Rect id="a" x={0} y="3.55271368e-15" width={50} height={50} rx={25} />
      <Circle id="b" cx={3} cy={12} r={3} />
      <Circle id="c" cx={3} cy={12} r={3} />
      <Circle id="d" cx={3} cy={12} r={3} />
    </Defs>
    <G stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
      <G transform="translate(-305.000000, -597.000000)">
        <G transform="translate(305.000000, 597.000000)">
          <G id="Group-12">
            <G id="Rectangle">
              <Use fill={color} fillRule="evenodd" href="#a" />
              <Rect stroke={stroke} strokeWidth={2} x={1} y={1} width={48} height={48} rx={24} />
            </G>
            <G id="Group-8" transform="translate(15.000000, 16.500000)">
              <G transform="translate(7.000000, 0.000000)">
                <Path
                  d="M3.73 16.248a.75.75 0 0 1-.75.752.753.753 0 0 1-.75-.752V.752A.75.75 0 0 1 2.98 0c.415 0 .75.34.75.752v15.496z"
                  fill={stroke}
                />
                <G transform="translate(3.000000, 12.000000) rotate(-180.000000) translate(-3.000000, -12.000000) ">
                  <Use fill={color} fillRule="evenodd" href="#b" />
                  <Circle stroke={stroke} strokeWidth={1.5} cx={3} cy={12} r="2.25" />
                </G>
              </G>
              <G transform="translate(3.000000, 8.500000) rotate(-180.000000) translate(-3.000000, -8.500000) ">
                <Path
                  d="M3.73 16.248a.75.75 0 0 1-.75.752.753.753 0 0 1-.75-.752V.752A.75.75 0 0 1 2.98 0c.415 0 .75.34.75.752v15.496z"
                  fill={stroke}
                />
                <G transform="translate(3.000000, 12.000000) rotate(-180.000000) translate(-3.000000, -12.000000) ">
                  <Use fill={color} fillRule="evenodd" href="#c" />
                  <Circle stroke={stroke} strokeWidth={1.5} cx={3} cy={12} r="2.25" />
                </G>
              </G>
              <G transform="translate(17.000000, 8.500000) rotate(-180.000000) translate(-17.000000, -8.500000) translate(14.000000, 0.000000)">
                <Path
                  d="M3.73 16.248a.75.75 0 0 1-.75.752.753.753 0 0 1-.75-.752V.752A.75.75 0 0 1 2.98 0c.415 0 .75.34.75.752v15.496z"
                  fill={stroke}
                />
                <G transform="translate(3.000000, 12.000000) rotate(-180.000000) translate(-3.000000, -12.000000) ">
                  <Use fill={color} fillRule="evenodd" href="#d" />
                  <Circle stroke={stroke} strokeWidth={1.5} cx={3} cy={12} r="2.25" />
                </G>
              </G>
            </G>
          </G>
        </G>
      </G>
    </G>
  </Svg>
);

const FilterIconButton = styled.TouchableOpacity`
  position: absolute;
  bottom: ${Layout.defaultSpacing * 0.6};
  right: ${Layout.defaultSpacing};
`;

const FilterIconAnimatedWrapper = styled(Animated.View)`
  transform: scale(0.5); 
`;

getStylesForFilterIconAnimation() {
    return {
      transform: [
        {
          scale: this.animatedValueFilterIconGrowing.interpolate({
            inputRange: [0, 1],
            outputRange: [0.5, 1],
          }),
        },
      ],
    };
  }


<FilterIconButton onPress={this.toggleFilterPressModal}>
            <FilterIconAnimatedWrapper style={this.getStylesForFilterIconAnimation()}>
              <SVGIcon icon={SVG_ICON.CLOSE} color="white" size="50" stroke="black" />
            </FilterIconAnimatedWrapper>
          </FilterIconButton>

[msand]

Also, the rotate transform supports optional origin now as in: rotate(angle, x, y) so you can simplify those and remove the two translations per rotation if you feel like 😉

[sibelius]

tks for the explanation

and tks for the great work on this package