Responsive layout doesn't react to changing viewport size

[nikkwong]

Hi, I'm not sure if I'm doing something wrong or if there is some trick to get this working. It seems that the CSS does not respond to changing the size of the view port, for example in the case of using a browser. This is fairly critical because on browsers, a user may change the size of the view port and want to enable other media queries that are present in the source CSS. Is there anyway to do this? Thanks

[jaredh159]

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?

[nikkwong]

Thanks for the reply. Unfortunately I did, in the Expo root as shown below:

import { createRoot } from "react-dom/client";
import { registerRootComponent } from "expo";
import { StatusBar } from "expo-status-bar";
import { ExpoRoot } from "expo-router";
import { createElement } from "react";
import { useDeviceContext } from "twrnc";
import tw from "src/config/twrnc";

export function App() {
  useDeviceContext(tw);
  const ctx = require.context("./app");

  return (
    <>
      <StatusBar style="auto" />
      <ExpoRoot context={ctx} />
    </>
  );
}

// @see https://github.com/expo/expo/issues/18485
if ("web" === Platform.OS)
  createRoot(
    document.getElementById("root") ?? document.getElementById("main")
  ).render(createElement(App));
else registerRootComponent(App);

I've also thrown it in the root _layout file to no avail. I am using expo-router. Am I missing anything? Thanks for the help.

[jaredh159]

are you targeting web or native?

[nikkwong]

Both—but the problem occurs in web. It may also occur in native (like switching from vert to horizontal mode) but I haven't witnessed that yet.

[jaredh159]

yeah, sorry, currently this library only claims to support RN Native, not RN web. some people use it with a decent amount of success targeting web, but i'm not currently working on any web features or compat, and so wouldn't consider this a bug. if you had a desire to look into it and possibly submit a PR (assuming the fix was fairly simple), i'd be open to looking at it and merging it.