Error thrown in React Native when using Hugeicons components in the Tabs navigation

[skyapps-co]

ERROR: A props object containing a "key" prop is being spread into JSX (...)

This error happens when running the React Native apps when using Hugeicons components inside the navigation components, such as the Tabs (the error might happen in other parts of React Native as well). The key prop is special in React and should not be passed via props spreading into JSX elements. If key is included in the props and the component spreads those props into a JSX element, React will issue a warning.

All icon files (ex: AbacusIcon.js) exhibit a "key" property as part of the svg "path" object. That key is not needed and causes problems with some parts of React Native. For instance when using the Hugeicon icon components in the bottoms tab navigation, under the "tabBarIcon:" setting.

VERY SIMPLE SOLUTION: remove or rename that "key" prop inside each (icon).js file containing the SVG paths. There's a few of them in each (icon).js file. I did a batch rename from key: to xKey: and it solves this problem. The key property is a special prop used by React Native and shouldn't be part of the SVG path objects.

Let me know if more information is needed.

[yeana-dev]

+1

 ERROR  Warning: A props object containing a "key" prop is being spread into JSX:
  let props = {key: someKey, d: ..., fill: ...};
  <Path {...props} />
React keys must be passed directly to JSX without using spread:
  let props = {d: ..., fill: ...};
  <Path key={someKey} {...props} />
    in DashboardSquare01IconIcon (created by TabBarIcon)
    in RCTView (created by View)

[Rezrazi]

Experiencing the same issue

@xtawfik could you please check this issue if there's anything that could fix this warning

[Lazler]

Same issue. Any solutions?

[hugeicons]

Please our new react native package: https://www.npmjs.com/package/@hugeicons/react-native