Passing "{...props}" to an Icon in Button causes error on Android - Expo framework

[Ferraah]

🐛 Bug Report

Passing "{...props}" to an Icon used as an accessoryLeft/accessoryRight in a Button causes this error only on android devices:

To Reproduce

Steps to reproduce the behavior:

    const FacebookIcon = (props) => (
        <Icon name='facebook' {...props} />
      );

  const LoginButton = () => (
    <Button accessoryLeft={FacebookIcon}>Login with Facebook</Button>
    );

Expected behavior

Link to runnable example or repository (highly encouraged)

This repo contains a minimal example of a fresh expo project to emulate the bug: https://github.com/Ferraah/iconBug

UI Kitten and Eva version

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

Environment information

[Ferraah]

This is the only way I could find to get it working. props.style.tintColor has to be deleted. Instead, I use "fill":

<Icon name='facebook' {...workAround(props)} />

function workAround(props){
  let newObj = Object.assign({}, props);
  newObj.fill = newObj['style']['tintColor'];
  delete newObj.style.tintColor
  return newObj;
}

[Mushyn]

Got exactly the same issue with Icon component from Kitten UI. Used another component from Expo instead of Kitten UI Icon component.

I changed my code as is : import FontAwesome5 from "react-native-vector-icons/FontAwesome5";

const homeIcon = (props) => ( <FontAwesome5 style={{ marginVertical: props.style.marginVertical }} color={props.style.tintColor} size={props.style.height} name="home" /> );

used those icons as usual with kitten ui components.

Working fine on both Android and iOS

[flexbox]

I had the same problem

it is related to react-native-svg

fixed with

--  "react-native-svg": "13.4.0",
++  "react-native-svg": "13.8.0",

@Ferraah If your problem is solved can you please close the issue? It sparks joy for maintainers ✨

[ricardopacheco]

This proposed solutions not working following offical docs with expo SDK 48.

[Mushyn]

This proposed solutions not working following offical docs with expo SDK 48.

I got a similar issue. Since then, I avoid using icon due to this SVG issue with Android.

[ricardopacheco]

@Mushyn i have to leave ui kitten and use another tool because of this =/

[flexbox]

Sooo I spend the entire day on this. I tested on another android version 12+. It was crashing again (but not on android 8 😖)

Invariant Violation: requireNativeComponent: "RNSVGSvgViewAndroid" was not found in the UIManager.

Here is what I have done

1. downgrade react-native-svg with npx expo install --fix

   --    "react-native-svg": "^13.8.0",
   ++    "react-native-svg": "13.4.0",

2. Remove all imports of ui-kitten Icons

// 💣 crash android apps
import type { IconProps } from "@ui-kitten/components";
import { Icon } from "@ui-kitten/components";

export const BackIcon = (props: IconProps) => (
  <Icon {...props} name="arrow-back" />
);  

// ✅ this is working
import { Ionicons } from "@expo/vector-icons";

export const BackIcon = () => (
  <Ionicons
    name={"arrow-back" as IoniconsList}
    color={theme.colors["color-basic-900"]}
    size={theme.icon.l}
  />
);

3. drop icon props and use accessoryRight

    <TopNavigationAction
--      icon={QuestionIcon}
++      accessoryRight={QuestionIcon}
      onPress={toggleModal}
      testID="question-icon"
    />

[Codelica]

For anyone using EvaIconsPack which does not sanitize tintColor from the style passed, you can use the following replacement for EvaIconsPack to get around the react-native-svg@13.4.0 issue for now. https://github.com/expo/expo/issues/20396#issuecomment-1474157748