Android v13 breaks victory-native

[mordechaim]

A recent fix to retain the icons while transitioning on Android broke victory-native.
Updating props will freeze the entire UI.

I did mention in the PR a better fix to the issue
#1542 (comment)

Reproduction: https://github.com/mordechaim/SvgVictoryTest

There are 2 branches

• svg@12+patch uses the patch I posted up here and works flawlessly
• svg@13 uses the latest version without the patch, the UI locks up after 3 button presses

Originally posted by @mordechaim in #1542 (comment)

[Minishlink]

I can confirm this problem that can appear when you have a component that render an icon or the other depending on a condition. A temporary workaround if you don't want to downgrade is adding a key prop. (but if you use third party libraries like victory it becomes a bit cumbersome)

export const PlayPauseIcon: FunctionComponent<Props> = ({
  isPaused,
  size = DEFAULT_SIZE,
  color,
}) => {
  const { colors } = useTheme();

  if (!isPaused) {
    return (
      <Svg key="play" width={size} height={size} viewBox="0 0 48 48" fill="none">
        <Rect width="48" height="48" fill={color || colors.white} fillOpacity="0.01" />
        <Path
          d="M16 12V36"
          stroke={color || colors.white}
          strokeWidth="8"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <Path
          d="M32 12V36"
          stroke={color || colors.white}
          strokeWidth="8"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </Svg>
    );
  }

  return (
    <Svg key="paused" width={size} height={size} viewBox="0 0 48 48" fill="none">
      <Rect width="48" height="48" fill={color || colors.white} fillOpacity="0.01" />
      <Path
        d="M15 24V11.8756L25.5 17.9378L36 24L25.5 30.0622L15 36.1244V24Z"
        fill={color || colors.white}
        stroke={color || colors.white}
        strokeWidth="8"
        strokeLinejoin="round"
      />
    </Svg>
  );
};

[mordechaim]

Using a key is unacceptable. This will unmount and remount the entire component for each prop change, and for victory this is a huge overhead to an already heavy render logic

[WoLewicki]

@mordechaim @Minishlink can you check if applying #1864 fixes your issues?

[mordechaim]

I can confirm that #1864 solves this issue.

[WoLewicki]

I will close this issue then. Feel free to comment here if something is wrong and we can always reopen it then.

[LucasHimelfarb]

My implementation of Victory is getting random crashes like it:

Tried doing react-native-svg overrides, doing downgrades but nothing works.

It is a different error than the one posted, but it is the same library that fails