breakpoints not updated in real time

[Thibault Friedrich]

I am using breakpoints like flex-1 lg:flex-none but the right breakpoint is applied only on the first render of the page. After it is wrong. If I change the screen size on the web or I rotate the device on mobile the wrong property is applied.

Is there a way to fix this behavior?

[Jared Henderson]

this is most often caused by failure to connect the tw function to the source of runtime device information as described in the readme here:

https://github.com/jaredh159/tailwind-react-native-classnames#enabling-device-context-prefixes

Did you do that step as described?

Also, fwiw, this library does not aim to support RN web, so I can't really promise you'll get it working correctly in web context, but it should work fine for RN native.

[Thibault Friedrich]

I added a file utils/tailwind.ts:

import { create } from 'twrnc'

// create the customized version...
const tw = create(require(`../../tailwind.config.js`)) // <- your path may differ

// ... and then this becomes the main function your app uses
export default tw

Then in the file App.tsx

import tw from 'utils/tailwind'
const App = () => {
  useDeviceContext(tw)
 // ...

Then finally in my component:

import tw from 'utils/tailwind'

//...

      <View
        style={tw.style(
          `flex-1 md:flex-initial flex flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-20 xl:px-24`
        )}
/...

And the breakpoint is only used when I restart the app.

I am using expo if it helps.

[Thibault Friedrich]

In fact if I add the hook directly to my component it works. If I add it to the main component App, it doesn't work.

[Jared Henderson]

hmmm... i'm wondering if you're using something that memoizes, check out this thread for more, the basic thought is that if you have something in your component tree that is memoizing and preventing re-renders, then you won't see re-renders from the device context hook at the top level:

#112

[nikkwong]

Didn't you state that this doesn't work out of the box in this discussion item?
#217

[Jared Henderson]

yeah, I don't know that i stated categorically and positively that it doesn't work, just that it's not a goal for this library to support rn web, so i'm not considering it a bug. it appears to not work, i've not tried it myself. my guess is that it has to do with the viewport changing and the tw function not listening for that change. the current functionality is wired up to listen to RN natives window dimensions object, which perhaps is not leveraged at all in a web context. i'm not sure, because again, i've never worked with rn web.

[Charles Watson]

For what it's worth, I'm using non-Expo ReactNativeWeb and the breakpoints work well! Might be an expo-only issue