Question 34453 in React native Question posted in
The official React Native documentation can be found here.

How to use nativewind for react native expo with react navigation

I’ve been trying to integrate tailwindcss to my react native expo project and it was working fine when i applied the tailwind classNames in the App.js , but as soon as I added react navigation to it and tried using the styles in Homscreen.js component the styles did not show and nothing happened . It was just bare text.

This is my tailwindcss.config.js file

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

this is my babel.config.js file

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

this is my App.js file

import { StatusBar } from 'expo-status-bar';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Homescreen from './screen/Homescreen';

export default function App() {

 const Stack=createNativeStackNavigator();

  return (
    <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name='Home' component={Homescreen}/>
    </Stack.Navigator>
    </NavigationContainer>
   
  );
}

this is my Homescreen component Homescreen.js file

import { View, Text } from 'react-native'
import React from 'react'

const Homescreen = () => {

  return (
   <View className="flex-1 justify-center text-center">
    <Text className="text-green-700">
      HOme screen styles test
    </Text>
   </View>
  )
}

export default Homescreen

The code images and results
tailwindcss.config.js and babel.config.js

App.js
homescreen and results

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    I found the solution

    Create a custom directory for your screens or the other components then add that directory to your tailwind.config.css

    In my case the custom directory i created is "screens"

    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
   
    "./App.{js,jsx,ts,tsx}", 
    "./screens/**/*.{js,jsx,ts,tsx}",
    "./<custom directory>/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}


  2. 0

    Customizing your "tailwind.config.js" file for new directories in your react native expo app with react navigation is necessary but if your nativewind styling still won’t work properly, then stopping the expo server and instead of starting it like this expo start, do this expo start -c to wipe the cache that nativewind adds to restart the server clean.

    Source: https://www.nativewind.dev/guides/troubleshooting

    When customizing your "tailwind.config.js" file, after creating your custom "screens" directory or any other component directory, then add that directory path "./screens/**/*.{js,jsx,ts,tsx}" to the "content:" property in your "tailwind.config.js". You don’t have to but should delete "./<custom directory>/**/*.{js,jsx,ts,tsx}"], That will keep your code clean and is really just for instructional purposes, see below:

    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./App.{js,jsx,ts,tsx}", "./screens/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
    Login or Signup to reply.
  3. 0

    Customizing my "tailwind.config.js" file and using expo start -c worked for me

    Login or Signup to reply.
  4. 0 
    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
   
    "./App.{js,jsx,ts,tsx}", 
    "./Components/**/*.{js,jsx,ts,tsx}"], // Make sure there should not be any <custom directory>, else it will not work
  theme: {
    extend: {},
  },
  plugins: [],
}

    Edit the tailwind.config.js like this and move HomeScreen.js to the Components folder. No one can stop it from working!!!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search