nativewind / nativewind

React Native utility-first universal design system - powered by Tailwind CSS
https://nativewind.dev
MIT License
4.5k stars 241 forks source link

Flex row not working in v4 in expo. #936

Closed Mohamed3on closed 3 weeks ago

Mohamed3on commented 3 weeks ago

To Reproduce Steps to reproduce the behavior: For some reason, this code does not produce a row UI for me in expo:

 <View className="flex flex-1 flex-row gap-4">
        <Text>1</Text>
        <Text>2</Text>
      </View>

I'm using the native View component. These are my packages:

 "tailwindcss": "^3.3.5",
 "nativewind": "4.0.23",

And this is what I see:

image

Expected behavior

  <View
        style={{
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "center",
          gap: 4,
        }}
      >
        <Text>1</Text>
        <Text>2</Text>
      </View>

using the native style prop, I get the correct behaviour:

image

I tried clearing the expo cache, but to no avail. What am I doing wrong?

t1gu1 commented 3 weeks ago

I test your example and got no problem on my side.

"nativewind": "^4.0.1", "tailwindcss": "^3.4.4"

All my packages version:

{
"dependencies": {
    "@expo/vector-icons": "^14.0.0",
    "@react-navigation/native": "^6.0.2",
    "expo": "~51.0.10",
    "expo-constants": "~16.0.2",
    "expo-font": "~12.0.6",
    "expo-linking": "~6.3.1",
    "expo-router": "~3.5.15",
    "expo-splash-screen": "~0.27.4",
    "expo-status-bar": "~1.12.1",
    "expo-system-ui": "~3.0.5",
    "expo-web-browser": "~13.0.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.74.1",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-reanimated": "~3.10.1",
    "react-native-safe-area-context": "4.10.1",
    "react-native-screens": "3.31.1",
    "react-native-web": "~0.19.10",
    "nativewind": "^4.0.1",
    "tailwindcss": "^3.4.4"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/jest": "^29.5.12",
    "@types/react": "~18.2.45",
    "@types/react-test-renderer": "^18.0.7",
    "jest": "^29.2.1",
    "jest-expo": "~51.0.1",
    "react-test-renderer": "18.2.0",
    "typescript": "~5.3.3"
  },
}
Mohamed3on commented 3 weeks ago

My bad! my issue was the wrong file paths in the content property in tailwind.config.js. Thank you!