LogBox UI breaks on React Native 0.86 when using nativewind/babel preset

Summary

After upgrading from React Native 0.81.5 to React Native 0.86.0, the React Native LogBox notification UI becomes visually broken .The application itself works correctly and all NativeWind/Gluestack styles are applied correctly. The issue only affects the development LogBox notification UI. Removing nativewind/babel from presets inbabel.config.js restores the LogBox layout, but it breaks NativeWind/Gluestack styling.

Environment

• React Native: 0.86.0
• NativeWind: 4.2.6
• react-native-css-interop: 0.2.6
• Platform: iOS

babel.config.js

module.exports = {
  presets: ['module:@react-native/babel-preset', 'nativewind/babel'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./'],
        alias: {
          '@': './',
          'tailwind.config': './tailwind.config.js',
        },
      },
    ],
    "react-native-worklets/plugin",
    '@babel/plugin-transform-class-static-block'
  ],
};

Investigation

While debugging, I found the following:

Changes in the following file in React Native 0.86 are causing the issue:

node_modules/react-native/Libraries/LogBox/UI/LogBoxButton.js

Tried replacing this file with the one from React Native 0.81.5, and it worked.

Comparing the implementations shows that React Native 0.86 changed LogBoxButton from using TouchableWithoutFeedback to Pressable with a function-valued style prop.

This appears to expose an incompatibility with the react-native-css-interop.

Reproduction

• Create a react native project with version 0.86
• Integrate Nativewind.
• Execute console.error("test") .
• It will display the LogBox as shown in the screenshot below.

Expected behavior

The React Native LogBox notification should render correctly while nativewind/babel is enabled.

Additional context

• The issue only affects development mode.
• Production builds are unaffected.
• The application UI renders correctly.
• Only the React Native LogBox notification UI is broken.

Root cause investigation

Replacing only the following file from React Native 0.81.5 fixes the issue:

Libraries/LogBox/UI/LogBoxButton.js

The primary implementation change is:

React Native 0.81.5

<TouchableWithoutFeedback>
  <View style={...}>
    {children}
  </View>
</TouchableWithoutFeedback>

React Native 0.86

<Pressable
  style={({ pressed }) => ...}
>
  {children}
</Pressable>

Patch

react-native+0.86.0.patch

-      style={({pressed}) =>
-        StyleSheet.compose(
-          {
-            backgroundColor: pressed
-              ? resolvedBackgroundColor.pressed
-              : resolvedBackgroundColor.default,
-          },
-          focused ? StyleSheet.compose(style, styles.focusRing) : style,
-        )
-      }>
+      style={StyleSheet.compose(
+        {
+          backgroundColor: pressed
+            ? resolvedBackgroundColor.pressed
+            : resolvedBackgroundColor.default,
+        },
+        focused ? StyleSheet.compose(style, styles.focusRing) : style,
+      )}>