search

jaredh159 / tailwind-react-native-classnames

simple, expressive API for tailwindcss + react-native
2.08k stars 84 forks source link

useAppColorScheme incorrect behaviour when used more than once #281

Closed crjc closed 8 months ago

crjc commented 8 months ago

Just noticed that even since #266 and #271, the useAppColorScheme hook appears to misbehave.

If you're using the hook in two different parts of your app, and use toggleColorScheme in one part, it doesn't update globally.

I think the solution might be to remove useState from the hook?

jaredh159 commented 8 months ago

thanks for the report. just to double-check, are you sure it's not a memoization issue?

crjc commented 8 months ago

See this quick repro example I just threw together.

The hook inside the <AssetExample/> component does not change when you change the colour scheme using the pressable component at the bottom of App.js

jaredh159 commented 8 months ago

Really appreciate the repro, thanks. I turned that into a unit test and have what seems like a straightforward fix in https://github.com/jaredh159/tailwind-react-native-classnames/pull/283. I need useState to make sure i trigger re-renders when someone changes the color scheme, but I think my mistake was tracking the colorscheme in state instead of using the canonical tw.getColorScheme and just using some dummy state to force re-renders.

jaredh159 commented 8 months ago

released in v4.0.2. (i checked that it fixed your repro snack as well, so i think you should be good)

Serchinastico commented 1 month ago

I just wanted to add that if you set your color scheme from a callback by calling setColorScheme (from the useAppColorScheme hook), do not forget adding setColorScheme to your list of dependencies for it to work correctly 😅.

I'm aware this is not a bug in the library but wanted to leave the message for others in case they faced the same issue.