ScrollView isn't picking up className styles

[94726]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

The ScrollView component is always the vanilla react-native one, even when importing it from react-native-css/components.
It seems that the dist/module/components/index.cjs (package.json exports point to the index.cjs for module too) is missing the export for ScrollView and simply exports the RN one.

When patching that manually, it works but breaks implementations like FlatList when using the import transform. Not sure why :/

Library version

3.0.0

Environment info

System:
  OS: macOS 15.6.1
  CPU: (8) arm64 Apple M2
  Memory: 139.78 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.18.0
    path: /private/var/folders/r7/vl8lb8550r50d8d9m0sml0fm0000gn/T/xfs-95a31d2e/node
  Yarn:
    version: 4.10.3
    path: /private/var/folders/r7/vl8lb8550r50d8d9m0sml0fm0000gn/T/xfs-95a31d2e/yarn
  npm:
    version: 10.9.3
    path: ~/.local/state/fnm_multishells/86982_1758839663366/bin/npm
  Watchman:
    version: 2025.07.28.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/maikkowol/.rvm/rubies/ruby-3.3.9/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.0
      - iOS 26.0
      - macOS 26.0
      - tvOS 26.0
      - visionOS 26.0
      - watchOS 26.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2025.1 AI-251.26094.121.2513.14007798
  Xcode:
    version: 26.0/17A324
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.16
    path: /usr/bin/javac
  Ruby:
    version: 3.3.9
    path: /Users/maikkowol/.rvm/rubies/ruby-3.3.9/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.2
    wanted: ^20.0.2
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.81.4
    wanted: 0.81.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Steps to reproduce

import { ScrollView, Text } from "react-native";

import { StatusBar } from "expo-status-bar";

import "../global.css";

export default function App() {
  return (
    <ScrollView
      contentContainerClassName="flex flex-1 flex-col gap-4 bg-red-800 items-center justify-center"
      contentInsetAdjustmentBehavior="automatic"
    >
      <Text className="bg-yellow-500">Missing</Text>
      <Text className="bg-yellow-900">Styles :(</Text>
      <StatusBar style="auto" />
    </ScrollView>
  );
}

Reproducible example repository

https://github.com/94726/react-native-css/tree/scrollview-broken

[94726]

Update: the problem with the FlatList is fixed when editing the resolver to not change the imports of @react-native/... or rather @react-native/virtualized-lists/Lists/VirtualizedList.js. So if that sounds about right I'd be happy to make a PR for it.

But I'm wondering: does it even make sense to transform inside node_modules? Wouldn't it be enough to only transform application code? Libraries probably should not rely on the transform in the firstplace and rather import the react-native-css/components directly instead – or use a buildtime-transform before publishing – if they rely on these components.

Not sure what would happen in monorepos or other node_module links then though.

[marklawlor]

Fixed in #201 and #202

I'm not sure that this addresses your issues with FlatList

We transform node_modules so it also works with 3rd party components. If a library prop spreads, then it can include the className and then they benefit, even if they didn't design their component to use react-native-css.