ColumnWrapperStyle not supported for single column lists

[oliviercperrier]

Describe the bug Since i upgraded my storybook, i get the following error only when running my react native storybook on web.

AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:1123 Uncaught Invariant Violation: columnWrapperStyle not supported for single column lists
    at invariant (http://localhost:8081/node_modules/expo/AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:1123:17)
    at FlatList._checkProps (http://localhost:8081/node_modules/expo/AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:43245:34)
    at new FlatList (http://localhost:8081/node_modules/expo/AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:43089:13)
    at constructClassInstance (http://localhost:8081/node_modules/expo/AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:24370:24)
    at updateClassComponent (http://localhost:8081/node_modules/expo/AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:28981:11)
    at beginWork (http://localhost:8081/node_modules/expo/AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:30616:22)
    at beginWork$1 (http://localhost:8081/node_modules/expo/AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:35556:20)
    at performUnitOfWork (http://localhost:8081/node_modules/expo/AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:34826:18)
    at workLoopSync (http://localhost:8081/node_modules/expo/AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:34749:11)
    at renderRootSync (http://localhost:8081/node_modules/expo/AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:34722:13)

To Reproduce

i created my project with: npx create-expo-app --template expo-template-storybook AwesomeStorybook

And here is my updated package.json:

{
  "name": "awesomestorybook",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "license": "MIT",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android -c",
    "ios": "expo start --ios -c",
    "web": "expo start --web -c",
    "eject": "expo eject",
    "storybook:web": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "storybook-generate": "sb-rn-get-stories --config-path .ondevice",
    "storybook-watch": "sb-rn-watcher --config-path .ondevice",
    "storybook": "sb-rn-get-stories --config-path .ondevice && cross-env STORYBOOK_ENABLED='true' expo start",
    "storybook:ios": "sb-rn-get-stories --config-path .ondevice && cross-env STORYBOOK_ENABLED='true' expo start --ios",
    "storybook:android": "sb-rn-get-stories --config-path .ondevice && cross-env STORYBOOK_ENABLED='true' expo start --android"
  },
  "dependencies": {
    "@expo/metro-runtime": "^3.1.1",
    "@react-native-async-storage/async-storage": "1.21.0",
    "@react-native-community/datetimepicker": "7.6.1",
    "@react-native-community/slider": "4.4.2",
    "expo": "^50.0.2",
    "expo-constants": "~15.4.5",
    "expo-status-bar": "~1.11.1",
    "nativewind": "^4.0.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "^0.72.6",
    "react-native-reanimated": "^3.6.1",
    "react-native-safe-area-context": "4.8.2",
    "react-native-web": "~0.19.6",
    "tailwindcss": "^3.4.1"
  },
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@storybook/addon-actions": "^6.5.16",
    "@storybook/addon-controls": "^6.5.16",
    "@storybook/addon-essentials": "^6.5.16",
    "@storybook/addon-links": "^6.5.16",
    "@storybook/addon-ondevice-actions": "^6.5.6",
    "@storybook/addon-ondevice-backgrounds": "^6.5.6",
    "@storybook/addon-ondevice-controls": "^6.5.6",
    "@storybook/addon-ondevice-notes": "^6.5.6",
    "@storybook/addon-react-native-web": "^0.0.21",
    "@storybook/addon-styling-webpack": "^0.0.6",
    "@storybook/builder-webpack5": "^6.5.16",
    "@storybook/manager-webpack5": "^6.5.16",
    "@storybook/react": "^6.5.16",
    "@storybook/react-native": "^6.5.7",
    "@types/react": "~18.2.14",
    "babel-loader": "^8.2.3",
    "babel-plugin-react-docgen-typescript": "^1.5.1",
    "babel-plugin-react-native-web": "^0.18.10",
    "cross-env": "^7.0.3",
    "css-loader": "^6.9.1",
    "postcss": "^8.4.32",
    "postcss-loader": "^7.3.4",
    "style-loader": "^3.3.4",
    "typescript": "^5.1.3"
  },
  "resolutions": {
    "react-docgen-typescript": "2.2.2",
    "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.cd77847.0"
  },
  "overrides": {
    "react-docgen-typescript": "2.2.2",
    "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.cd77847.0"
  },
  "pnpm": {
    "overrides": {
      "react-docgen-typescript": "2.2.2",
      "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.cd77847.0"
    }
  },
  "private": true
}

I saw that for some reason, columnWrapperStyle is set with an empty array by default. same for other props, but i set none of these props with any value:

Here is my component:

export const MyList = ({ onPress, text }: MyButtonProps) => {
  return (
    <FlatList
      data={[
        {
          title: "allo",
        },
        {
          title: "allo",
        },
      ]}
      horizontal
      renderItem={(item) => <>{item.item.title}</>}
    />
  );
};

Expected behavior No error

Screenshots

System: Please paste the results of npx -p @storybook/cli@next sb info here.

  System:
    OS: macOS 14.0
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.16.0/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm <----- active
  Browsers:
    Chrome: 120.0.6099.234
    Safari: 17.0
  npmPackages:
    @storybook/addon-actions: ^6.5.16 => 6.5.16 
    @storybook/addon-controls: ^6.5.16 => 6.5.16 
    @storybook/addon-essentials: ^6.5.16 => 6.5.16 
    @storybook/addon-links: ^6.5.16 => 6.5.16 
    @storybook/addon-ondevice-actions: ^6.5.6 => 6.5.7 
    @storybook/addon-ondevice-backgrounds: ^6.5.6 => 6.5.7 
    @storybook/addon-ondevice-controls: ^6.5.6 => 6.5.7 
    @storybook/addon-ondevice-notes: ^6.5.6 => 6.5.7 
    @storybook/addon-react-native-web: ^0.0.21 => 0.0.21 
    @storybook/addon-styling-webpack: ^0.0.6 => 0.0.6 
    @storybook/builder-webpack5: ^6.5.16 => 6.5.16 
    @storybook/manager-webpack5: ^6.5.16 => 6.5.16 
    @storybook/react: ^6.5.16 => 6.5.16 
    @storybook/react-native: ^6.5.7 => 6.5.7 

[dannyhw]

This seems like a react-native-web issue with flatlist. Try updating to rnw 0.19.10

Also the native storybook doesn't work as well on web so thats why we have the storybook:web script to run addon-react-native-web.

[dannyhw]

By the way you need to wrap text in the Text component

[oliviercperrier]

@dannyhw Thanks for the reply, i tried react-native-web latest but no luck. Yup i prefer the output with storybook:web but my problem is that nativewind css classes are removed for some reasons when running that storybook script.

[dannyhw]

What version of nativewind?

[oliviercperrier]

@dannyhw I use @4.0.1

[dannyhw]

try adding this babel plugin to your @storybook/addon-react-native-web addon config like in this comment:

https://github.com/storybookjs/addon-react-native-web/pull/81#issuecomment-1890289454

          [
            '@babel/plugin-transform-react-jsx',
            {
              runtime: 'automatic',
              importSource: 'nativewind',
            },
          ], 

[kimchouard]

try adding this babel plugin to your @storybook/addon-react-native-web addon config

@oliviercperrier did this solved your issue?

[dannyhw]

Fixed on nativewinds side in the latest v4 version