react-nativetailwind-cssnativewindgluestack

ClassName stylings are not getting applied in react native using gluestack and native wind

I'm trying to implement gluestack in my bare react-native project, I followed the gluestack and nativewind documentation throughly but somehow classname stylings are not getting applied in components

babel.config tailwind.config.ts

global.d.ts metro.configs global.css

This is tsconfig.json

    "types": [
      "nativewind"
    ],
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  },
  "include": [
    "App.tsx",
    "global.d.ts",
    "src",
    "nativewind-env.d.ts"
  ],

This is how I'm using classname:

<View>
  <Text className='text-red-500'>dev landing</Text>
</View>

I'm not getting any error, just stylings are not getting applied. What am I missing that stylings are not getting applied?

Solution

  • I found out that According to the public documentation. NativeWind is not yet supported by dynatrace npmjs.com/package/@dynatrace/… and currently there is no plan to support it in the near future. That means, while using dynatrace we cannot use gluestack in react native application.

    Dynatrace is having conflict with tailwind and nativewind