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

🐛 Bug Report

To Reproduce

Steps to reproduce the behavior: Following code image triggers error image Its something related to tintColor

Expected behavior

Link to runnable example or repository (highly encouraged)

UI Kitten and Eva version

Package Version
@eva-design/eva 2.1.1
@ui-kitten/components 5.1.2

Environment information

  System:
    OS: macOS 12.2
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 18.11.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.2 - /opt/homebrew/bin/npm
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
  IDEs:
    Android Studio: 2021.1 AI-211.7628.21.2111.8193401
    Xcode: 13.4/13F17a - /usr/bin/xcodebuild
  npmPackages:
    react: 18.2.0 => 18.2.0 
    react-native: 0.70.5 => 0.70.5 


About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 9
  • Comments: 18 (3 by maintainers)

Most upvoted comments

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.