Support for Nativewind v4 Alpha

[DannyCare]

Hi! I came across a dependency issue in my project whilst installing gluestack-ui for nativewind. Your package supports "nativewind": "^2.0.0" but the latest version is nativewind": "4.0.36.

[lanc33llis]

This is easy to implement on your own, though native support would be great for v4. I'm not sure how third party components integrate now with nativewind.

import { Motion } from "@legendapp/motion";
import { remapProps } from "nativewind";

export const View = remapProps(Motion.View, { className: "style" });
export const Pressable = remapProps(Motion.Pressable, { className: "style" });
// ... motion components

[jmeistrich]

I would definitely like to support nativewind v4. We've been using it in our apps with v2 for a while but I think we should upgrade it to v4.

I haven't had a chance to dig into the API changes yet, but it looks like we just need to change styled to remapProps ? See the existing implementation: https://github.com/LegendApp/legend-motion/blob/main/src/styled.ts

[jmeistrich]

I just released version 2.4.0 which changes the peerDependency to * so it should work for nativewind v4. A major difference in v4 is that nativewind doesn't have styled anymore, and the configuration isn't necessary anymore, and it shouldn't even need remapProps.

So it probably doesn't affect you if you're using gluestack, but if you're using legend-motion with nativewind v4 directly, you don't need to import from "@legendapp/motion/styled". I'll update the docs about that soon.