Responsiveness

[alexluong]

Hi, it seems like this library doesn't deal with responsiveness. I wrote a small helper function to help with it. Would love to hear what you think! Would this be something you'd be interested in including in this library?

import { useDimensions } from "react-native-web-hooks";

const screenWidths = [640, 768, 1024, 1280];

export function useResponsive() {
  const {
    window: { width },
  } = useDimensions();

  return (values: Array<any>) => {
    for (let i = 0; i < values.length; i++) {
      if (screenWidths[i] > width) {
        return values[i];
      }
    }
    return values[values.length - 1];
  };
}

const r = useResponsive();

<View
  style={[
     r([t.bgWhite, t.bgYellow100, t.bgBlue100, t.bgGreen100]),
  ]}
>

[TVke]

Hi @alexluong

I wrote this styling system to easily style react native code in the way I was using tailwindcss in the browser. One of the first things I removed were the screen sizes as react native uses flex-box and is easily styled to match any screen without media queries of some sort. I think it is a nice piece of code you wrote but for now I don't think I will include it.

greetings Thomas

[alexluong]

Thanks for the response. That makes sense. I'm trying to use react-native-web, so maybe my requirements are beyond the scope of your library. Thanks for explaining where you're coming from.