CODEWITHSUNDEEP
react-nativeexpotailwind-cssclassnamenativewind
Niharika Gupta
Niharika Gupta

Reputation: 1

Nativewind styles are not being applied in react native and expo application

I am building a react native application with expo. I am trying to style it using Nativewind. But when I am trying to apply the styles to the components, they are not being applied.

No error is showing up, just the styling is not being implemented.

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['nativewind/babel']
  };
};

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,jsx,ts,tsx}", 
    "./components/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

tsconfig.json

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "paths": {
      "@/*": [
        "./*"
      ]
    },
    "types": ["nativewind/types"]
  },
  "include": [
    "**/*.ts",
    "**/*.tsx",
    ".expo/types/**/*.ts",
    "expo-env.d.ts",
    "nativewind-env.d.ts",
    "app/_layout.jsx", 
    "app/index.jsx"  ]
}

index.jsx

import { Text, View } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Link } from 'expo-router';
// import { tw } from 'nativewind';
// import "../app"
import 'nativewind';
import { NativeWindStyleSheet } from "nativewind";

NativeWindStyleSheet.setOutput({
  default: "native",
  web: "css"
});


export default function App() {
  return (
    <View style={'flex-1 items-center justify-center bg-white'}>
      <Text style={'text-3xl font-bold'}>Hello mate!!</Text>
      <StatusBar style='auto'/>
      <Link href="/profile" style={{color: 'blue'}}>Go to profile</Link>
    </View>
  );
}

layout.jsx

import { Text, View } from 'react-native';
import { Slot, Stack } from 'expo-router';
import React from 'react';
import { NativeWindStyleSheet } from "nativewind";

NativeWindStyleSheet.setOutput({
  default: "native",
  web: "css"
});

// Prevent the splash screen from auto-hiding before asset loading is complete.
// SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name='index' options={{headerShown: false}}/>
    </Stack>
  );
}

Nativewind version: ^2.0.11 Tailwind version: ^3.3.2

What can I do to apply the styles from the className property of nativewind?

Upvotes: 0

Views: 229

Answers (1)

Sophos
Sophos

Reputation: 1

I encountered the same problem, I installed nativewind version 2.0.0, and the problem was solved

Good luck

Upvotes: 0

Related Questions