Android crash after upgrading from 13.2.0

Bug

After upgrading from 13.2.0 to 13.3.0 (also present in 13.4.0), our Android app is crashing with the following exception:

java.lang.NullPointerException: Attempt to invoke virtual method 'int java.lang.Integer.intValue()' on a null object reference
        at com.horcrux.svg.SvgView.setTintColor(SvgView.java:190)
        at com.horcrux.svg.SvgViewManager.setTintColor(SvgViewManager.java:97)
        at com.horcrux.svg.SvgViewManager.setTintColor(SvgViewManager.java:31)
        at com.facebook.react.viewmanagers.RNSVGSvgViewManagerDelegate.setProperty(RNSVGSvgViewManagerDelegate.java:62)

Upon further investigation it seems to be caused by https://github.com/software-mansion/react-native-svg/commit/b3d2b76496961bf6468a1ec33fe501fffce26340 as reverting that specifc change, fixes the issue.

Under specific circumstances, the setTintColor of SvgView.java is passed a null value, resulting in the exception, as the setTintColor method is passed an Integer but stores the value in a simple int type variable.

I’ve struggled to reproduce the issue in a clean project and I’m not able to share the project that we are experiencing this in, so I’m hoping that the issue will ring a bell for someone familiar with the codebase of the lib. If not, please let me know and I will try digging some more. Alternatively, let me know if there’s something specific that you want me to try.

Environment info

React native info output:

System:
    OS: macOS 12.6.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 3.61 GB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.18.0
    Yarn: 3.2.4
    npm: 8.19.2
    Watchman: 2022.10.17.00
  Managers:
    CocoaPods: 1.11.3
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
    Xcode: 14.0.1/14A400
  Languages:
    Java: 11.0.12
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.1.0 => 18.1.0 
    react-native: 0.70.4 => 0.70.4 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 13.3.0

Steps To Reproduce

As mentioned earlier I’ve struggled to reproduce the issue in a clean project, but our use of the component is quite simple:

<SvgCss
  xml="some xml svg string"
/>

We aren’t setting the color nor the tintColor prop at any point. I sanity checked this as well, by logging https://github.com/software-mansion/react-native-svg/blob/6a5242f00b38441dc29d947ffde852315e90d4fd/src/elements/Svg.tsx#L178 which always comes back as undefined.

[Simon-TechForm]

@WoLewicki I’m confident that https://github.com/software-mansion/react-native-svg/commit/b3d2b76496961bf6468a1ec33fe501fffce26340 is the change that caused the issue to start appearing and also that null isn’t passed at any point. 😃

I’ve managed to track down what’s causing it in our project.

If tintColor is present in the style prop of <Svg>, RNSVGSvgViewManagerDelegate’s setProperty is triggered with a null value for tintColor if tintColor is also present as a key in the root of the props without a value (undefined). There’s an actual difference between having the tintColor key set with undefined vs having it omitted entirely, which is why https://github.com/software-mansion/react-native-svg/commit/b3d2b76496961bf6468a1ec33fe501fffce26340 makes a difference here. Prior to that change, the tintColor key was omitted entirely if no value was specified.

Reproducible sample code:

import React from 'react';
import {SvgXml} from 'react-native-svg';

const xml = `
  <svg width="32" height="32" viewBox="0 0 32 32">
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      fill="url(#gradient)"
      d="M4 0C1.79086 0 0 1.79086 0 4V28C0 30.2091 1.79086 32 4 32H28C30.2091 32 32 30.2091 32 28V4C32 1.79086 30.2091 0 28 0H4ZM17 6C17 5.44772 17.4477 5 18 5H20C20.5523 5 21 5.44772 21 6V25C21 25.5523 20.5523 26 20 26H18C17.4477 26 17 25.5523 17 25V6ZM12 11C11.4477 11 11 11.4477 11 12V25C11 25.5523 11.4477 26 12 26H14C14.5523 26 15 25.5523 15 25V12C15 11.4477 14.5523 11 14 11H12ZM6 18C5.44772 18 5 18.4477 5 19V25C5 25.5523 5.44772 26 6 26H8C8.55228 26 9 25.5523 9 25V19C9 18.4477 8.55228 18 8 18H6ZM24 14C23.4477 14 23 14.4477 23 15V25C23 25.5523 23.4477 26 24 26H26C26.5523 26 27 25.5523 27 25V15C27 14.4477 26.5523 14 26 14H24Z"
    />
    <defs>
      <linearGradient
        id="gradient"
        x1="0"
        y1="0"
        x2="8.46631"
        y2="37.3364"
        gradient-units="userSpaceOnUse">
        <stop offset="0" stop-color="#FEA267" />
        <stop offset="1" stop-color="#E75A4C" />
      </linearGradient>
    </defs>
  </svg>
`;

export default function App() {
  return (
    <SvgXml
      style={{tintColor: '#000000'}}
      xml={xml}
      width="100%"
      height="100%"
    />
  );
}

I haven’t looked into it further than this and I’m not really sure what’s going on exactly, nor am I sure why you would want to have tintColor in your style prop (in our case it’s done by https://github.com/akveo/react-native-ui-kitten).

Anyway, 13.5.0 fixes the crash 👍

[WoLewicki]

@findhumane you can read more about what you can do e.g. here: https://docs.expo.dev/development/introduction/