react-native-ui-kitten: Icon triggers error with tintColor

Just got this too, started happening after upgrading from expo 46 to 47, downgrading react-native-svg to 13.2.0 fixed it for me, although expo says it’s not compatible with current version.

It is solved when upgrading “react-native-svg” to “13.6.0”. But another error appeared: Invariant Violation: requireNativeComponent: "RNSVGSvgViewAndroid" was not found in the UIManager.

My package versions: “react-native”: “0.70.5”, “react-native-svg”: “13.6.0”, “@eva-design/eva”: “^2.1.1”, “@ui-kitten/components”: “^5.1.2”, “@ui-kitten/eva-icons”: “^5.1.2”, “expo”: “~47.0.8”, “react”: “18.1.0”,

I am also experiencing this issue right now.

@ekokotov

Hello there!

Due investigation i found that tintColor became null value on react-native-svg side

So there are two fixes for it right now:

Fix 1 (add <View> tag inside all UI Kitten icon tags):

<TopNavigationAction
    icon={(
        <View>    // <-- Crash fix
            <YourCustomIconWrapper
                 height={24}
                 width={24}
                 icon="chevronLeft"
             />
        </View>    // <-- Crash fix
    )}
/>

Fix 2 (setting the icon color prop to a value of a color):

<YourCustomIconSvgImport 
    height={32} 
    width={32} 
    style={style}
    color="red" // <-- Crash fix
/>;

Thanks to adrihegg

I’m afraid this is still an issue and with Expo 48 becomes even more complicated, as iOS won’t build under EAS with react-native-svg @ 13.2.0. Using 13.5.0+ will build, but won’t help Expo Go. So either Expo needs to update to 13.5.0+ or Kitten UI needs to be updated to work.

@Ackerize you are making it sound as if this issue is solved. It’s not solved, but it’s a good temp solution until akveo updates ui-kitten with react-native-svg latest versions or whatever.