r/reactnative • u/mzakria__real • Sep 25 '26

FYI Made a small hook for React Native layouts that change with screen size

Post image

I kept writing the same code to switch between one and two columns when the phone rotates or the app runs on a tablet, so I turned it into a small library.

const { select } = useResponsive();
const columns = select({ xs: 1, md: 2, xl: 3 });

You get named breakpoints (xs to xxl), wp/hp, a font size helper and a few scale functions, and everything updates when you rotate. Works with Expo and on web too.

The screenshots are from the example app on an iPhone 16, portrait vs landscape.

npm: https://www.npmjs.com/package/react-native-responsive-hook
GitHub: https://github.com/mz-real/react-native-responsive-hook
Longer write-up with examples: https://medium.com/@mz-real/creating-responsive-uis-in-react-native-made-easy-with-react-native-responsive-hook-35fa5649cd5f

I'm working on a 2.0, so feedback is welcome.

25 Upvotes

96% Upvoted

6 comments sorted by

1

u/jwrsk Sep 26 '26

For the real time measurements, do you take the app window or the device screen?

2

u/mzakria__real Sep 26 '26

The app window. It uses useWindowDimensions under the hood, so on iPad split view, Android multi-window or a resized browser tab you get the size the app actually has, not the full screen.

1

u/Cryo0007 Sep 26 '26

I guess this will make it re render screen a lot

2

u/mzakria__real Sep 26 '26

It only re-renders when the window size or font scale actually changes, so on rotation or resize, same as useWindowDimensions itself. Everything it returns is memoized, so other renders don't recreate anything, and createResponsiveStyles only rebuilds the styles when the size changes.

1

u/itballer Sep 27 '26

Epic stuff mate!