V4: Fast Refresh is inconsistent

[ShaneKeney]

Describe the bug Adding new utility classes during development does not consistently reflect changes. Reloading does not correct it either. I have to kill the development server and reopen the app.

Is there a configuration option to address this? Is this supposed to be the behavior?

Occurs on both Expo Go & Expo custom development client.

The correct styling is reflected after closing the development server and restarting the server via npx expo start -c and reopening the dev client.

Expected behavior Adding utility classes in the classNames field of a component should "Fast Refresh" and reflect the changes without requiring the developer to close the

Screenshots e.g. of usage:

<View className={'flex max-w-screen-lg flex-1 items-center justify-center gap-3'}>
     ...
</View>

Screen shown when dev client first started and running:

Changing gap-3 to gap-5 while development server is running:

You can see the gap class utility is completely ignored now. Stopping the development server. Re-run npx expo start -c --dev-client

gap-5 is now accurately reflected.

Conclusion?

There seems to be an issue with the Live Reloading feature when it comes to the tailwind class utilities. This may just be a configuration issue on my part but reading through the docs I can't find anything specifically that would indicate why that would be.

[GustavoBonfimS]

Related to #643 and #653 . It is a bug in Metro cache and will be fixed in a future release of Expo

[ShaneKeney]

Is there any rough ETA on when this will occur?

[marklawlor]

This might be fixed in 4.0.14. If you'd like an ETA can you please provide a production, as it maybe a configuration issue or something else. Screenshots provide very minimal value when troubleshooting code

[ShaneKeney]

@marklawlor I'll try upgrading to 4.0.14 first. If I am still having issues I'll create a public project with the symptoms. I would have done that sooner but I am in a project I can't share publicly. But I'll remove the pieces I can't share and create a reproducible example if I continue to run into issues.

[ShaneKeney]

@marklawlor Here is a templated project I have created that shows the above issue after upgrading to 4.0.14. It occurs both in Expo Go and Custom Development Client.

You can see this by going to app/(auth)/index.tsx and changing the following:

        <Text className={'text-6xl font-bold text-lightTextTheme dark:text-darkTextTheme'}>
          Examples:
        </Text>

to

        <Text className={'text-6xl font-bold bg-red-500'}>
          Examples:
        </Text>

Change is not reflected even though the client shows the app has "Refreshing..."

[garygcchiu]

I'm running into a related issue where if I change my theme's colours (located in a colors.js that is imported into tailwind.config.js), I have to restart the metro bundler + restart the app to see the changed color. However, the colour in the autocomplete would still show the old colour, and I'm not sure how to get the autocomplete to "refresh" with my updated theme colour.

Not too big of a deal because I'm not changing my theme's colours often, and the autocomplete isn't very helpful for colours anyways, but if there's a solution to fix it, that would be great!

[ShaneKeney]

@marklawlor Here is a templated project I have created that shows the above issue after upgrading to 4.0.14. It occurs both in Expo Go and Custom Development Client.

You can see this by going to app/(auth)/index.tsx and changing the following:

        <Text className={'text-6xl font-bold text-lightTextTheme dark:text-darkTextTheme'}>
          Examples:
        </Text>

to

        <Text className={'text-6xl font-bold bg-red-500'}>
          Examples:
        </Text>

Change is not reflected even though the client shows the app has "Refreshing..."

@marklawlor Just realizing that I didn't ever link the actual repo that I created as a template: https://github.com/rally2/exporouter-nativewind .

I am specifically on WSL2.

Happy Holidays!

[pencilcheck]

I hope this is fixed soon. I also experience this issue with EAS and on Expo SDK 48 and using nativewind v4

[josetr]

It's even worse using react-native-windows. Even tho the generated css file in the cache folder is updated correctly always, the change is not reflected 99% of the time. A full metro server restart is required.

Steps to reproduce

npx react-native init myproject
npx react-native-windows-init --overwrite
# install NativeWind v4
npx react-native run-windows

Then try to create a component using bg-red-400 for example, which won't work, until you re-save global.css, and restart the metro server.

The experience is terrible.

[Mondmarmelade]

I have to agree with @josetr. A fix is really necessary.

[Fynn]

Any updates on this? It's a really bad DX

[minhnc]

It seems to be fixed with latest nativewind 4.0.23.

[Fynn]

@minhnc For me its still not working in version 4.0.23

[Mondmarmelade]

Version 4.0.23 didn't fixed it for me either.

[minhnc]

Working fine for me. Im with MacOS btw. Would you mind sharing a sample project?

[ShaneKeney]

@minhnc Sample project linked above in my comment. When I add !bg-red-500 as an override, there is no refresh to reflect the changes. Updated to Expo 50 and Nativewind 4.0.23 not too long ago. Verified with npm list nativewind to ensure it installed the right version.

[minhnc]

@ShaneKeney hope this demo helps:

Run with your sample project and nativewind 4:

[ShaneKeney]

@minhnc Thanks. I took a look and noticed your running this on MacOS. I think this is an issue isolated to when leveraging WSL2. I have my Macbook where this issue does not happen but on my PC running WSL2 it does.

[marklawlor]

Please try 4.0.26. The dev server was reworked to hook into the existing FastRefresh HTTP server.

[ShaneKeney]

@marklawlor Thank you! It is looking like the issue has resolve itself with the update to 4.0.26. I'll continue to test it out but the initial example using !bg-red-500 that was not working is now fixed which is a sign in the right direction. Thanks for all the hard work!

[marklawlor]

Closing issue, if your still experiencing this issue please open a new ticket