Unsupported vendor-prefixed style property webkitTransform

[tafelito]

Hi, I'm getting this warning error when loading the list on web

Warning: Unsupported vendor-prefixed style property webkitTransform. Did you mean WebkitTransform?

Check the render method of `ViewRenderer`.

The issue seems to be in this line https://github.com/Flipkart/ReactEssentials/blob/8e7df4a56f14e9dfb6584e9b0a397f81df5e43aa/src/recyclerlistview/viewrenderer/web/ViewRenderer.js#L64

[naqvitalha]

webkitTransform is the right name https://stackoverflow.com/questions/708895/how-to-set-the-style-webkit-transform-dynamically-using-javascript
Which browser are you trying this on? I don't see the warning on chrome.

[tafelito]

yes, I'm using chrome as well. Not sure why it gives that error on mine then. Just commenting that line it works, but not sure what the implications are.

Also I have another issue when I build my project, it complains about not having react-native dependency, where I'm using it on the web. Even if I set the process.env it stills warns at building time. I'm using it within a meteor app. Any ideas?

[naqvitalha]

webKit transform is there to support browsers like UC. They don't understand transform property. Removing this warning will require a browser UA check which I don't to be inside the library. Maybe we can accept it as a prop. Regarding the process.env, does it just warns or the build actually fails. In case it does work are you able to get it to render everything fine? Share relevant part of webpack config if possible. Ideally webpack should've taken care of it.
Btw if you're using it on web you might want to check out perfUpgrade branch. We're working on improving things in case of non deterministic rendering.

[twistedfork88]

Please refer the link https://titobouzout.github.io/react/tips/inline-styles.html used for inline styles used in react. I think the property for inline style should be WebkitTransform (with a uppercase W).

[tafelito]

Thanks @twistedfork88 that'd solve the issue.

@naqvitalha regarding the env variable, I'm not using webpack to bundle my project, so I don't have a config file. Even with the warning at build time, the project still runs, but it's a little annoying having that issue if I can prevent it somehow. I know other libraries like styled-components handle the separation btw native and web, or event rnw, where you can then create an alias for it depending where you are using it.

[naqvitalha]

thanks @twistedfork88, didn't know about this convention.

@tafelito the idea with process.env was to keep the import location constant. The easiest solution that I can think of is to have something like import { RecyclerListView } from "recyclerlistivew/web" that should do it. That's how styled-compoments does it. With aliases there is a chance that this might happen to someone again since not all builders support aliases.

Will try to get this out in next release.

[tafelito]

that'd great @naqvitalha thanks!

[naqvitalha]

@tafelito try version 0.0.2 . It's a beta. See if it fixes all of your issues.

[tafelito]

@naqvitalha 0.0.2 looks good! importing form /web did the job!

Thanks!

[naqvitalha]

Great! It'll get release within a few days.

[naqvitalha]

Issue fixed in release 1.1.5 (https://github.com/Flipkart/ReactEssentials/releases/tag/1.1.5). Closing.