V4: Nativewind breaking useRef - refs not working

[GustavoBonfimS]

Describe the bug When install nativewind V4 the useRef stop working and ref.current is always null

To Reproduce Steps to reproduce the behavior:

1. create a new repo
2. make some logic with any ref component (FlatList scroll, TextINput focus = for exmaple)
3. test this and you see all working
4. isntall nativewind following v4 docs
5. test same code and its not working anymore

Expected behavior refs with useRef hook working properly

Additional context I created a repository to exemplify the bug (https://github.com/GustavoBonfimS/nativewid-broken-ref). In the master branch everything works, in the nativewind branch the references stop working. You can compare the two to see that the only change was installing nativewind following the documentation.

PS: I will create a snack soon to make reproduction easier.

[PierreAndreis]

blocking upgrade for me

[GustavoBonfimS]

@PierreAndreis this workaround maybe help you until a fix. I used patch-package to make it

diff --git a/node_modules/react-native-css-interop/dist/runtime/components/rendering.native.js b/node_modules/react-native-css-interop/dist/runtime/components/rendering.native.js
index f3e4da9..62b175c 100644
--- a/node_modules/react-native-css-interop/dist/runtime/components/rendering.native.js
+++ b/node_modules/react-native-css-interop/dist/runtime/components/rendering.native.js
@@ -11,7 +11,7 @@ function render(jsx, type, props, ...args) {
     if (interop?.check(props)) {
         if (props.ref) {
             props.___ref = props.ref;
-            delete props.ref;
+            // delete props.ref;
         }
         return jsx(interop.type, props, ...args);
     }

[Sietze111]

This also breaks things like the onScroll event for a(n) (Animated)FlatList. Thanks a lot for this fix @GustavoBonfimS