React warns of unknown props with useUniwind custom props

[bradleyayers]

What happened?

I used withUniwind to wrap Path from react-native-svg, and added a strokeClassName and fillClassName. On web I get a warning about unknown props passed to the component.

React does not recognize the strokeClassName prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase strokeclassname instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Steps to Reproduce

Use code like this:

const SvgPath = withUniwind(BasePath, {
  fill: {
    fromClassName: `fillClassName`,
    styleProperty: `accentColor`,
  },
  stroke: {
    fromClassName: `strokeClassName`,
    styleProperty: `accentColor`,
  },
});

Then use it:

<SvgPath
  fillClassName="accent-blue"
  strokeClassName="accent-red"
/>

Then run expo web and load the page and you'll get a React warning.

Snack or Repository Link

https://github.com/bradleyayers/uniwind-withuniwind-warning

Uniwind version

1.1.0

React Native Version

0.86.0

Platforms

Web

Expo

Yes

Additional information 〰

• I've searched for similar issues in this repository and found none

For now I'm using this patch that works for my case, but doesn't address the withAutoUniwind code path, nor does it consider whether sometimes it's desirable to not delete the prop (if this is ever the case then perhaps there needs to be another option like preserveProp or something)

diff --git a/dist/module/hoc/withUniwind.js b/dist/module/hoc/withUniwind.js
index 15bc966f9d8c2b1358baffc65b3e5778ceb2035e..c054649fa5c4f0714760ed3190be08f4699654c0 100644
--- a/dist/module/hoc/withUniwind.js
+++ b/dist/module/hoc/withUniwind.js
@@ -57,8 +57,10 @@ const withAutoUniwind = (Component) => (props) => {
 };
 const withManualUniwind = (Component, options) => (props) => {
   const uniwindContext = useUniwindContext();
+  props = {...props};
   const { generatedProps, classNames } = Object.entries(options).reduce((acc, [propName, option]) => {
     const className = props[option.fromClassName];
+    delete props[option.fromClassName];
     if (className === void 0) {
       return acc;
     }

[Brentlok]

Thanks for rising this issue, fix is already merged and will be released soon