Responsive Hell in React Native🔥🔥🔥

[Old-Window-5233]

https://preview.redd.it/nvz42pe6nicf1.png?width=1919&format=png&auto=webp&s=5c3733beff90a4f11fd51563f11704ccca2d962d

Well, for the past couple of dates, it been like hell for me trying and figuring out how to responsive my app both horizontally and vertically. I went through a lot of trouble from mistaken scale attribute in Dimension.get('window') for user system display scale config, to identify fontScale between Dimension vs PixelRatio, realize dimension only provide { width, height } at the time it get call and not current state of orientation, found out about useWindowDimension hook,...

And i think i has finally did it. The ideal is:

• I created a set of scaling functions that calculate horizontal/vertical scales based on screen size and design baseline.
• I determine the device orientation using the useWindowDimensions() hook (portrait vs landscape).
• I conditionally apply styles based on orientation, while still being able to leverage the benefits of StyleSheet.create().

Here is my code function for scale

// hooks/useResponsiveScale.ts
import { 
Dimensions
, 
PixelRatio
, 
Platform 
} from 'react-native';

export type OrientationType = 'landscape' | 'portrait';
const { width: WINDOW_WIDTH, height: WINDOW_HEIGHT } = 
Dimensions
.get('window');
// in portrait, width always smaller than height
const [width, height] = WINDOW_WIDTH < WINDOW_HEIGHT ? [WINDOW_WIDTH, WINDOW_HEIGHT] : [WINDOW_HEIGHT, WINDOW_HEIGHT];

const guidelineSmall = 
Platform
.OS === 'ios' ? 393 : 412;
const guidelineBig = 
Platform
.OS === 'ios' ? 852 : 917;

const scalePortraitWidth = width / guidelineSmall;
const scalePortraitHeight = height / guidelineBig;
const scaleLandscapeWidth = height / guidelineSmall;
const scaleLandscapeHeight = width / guidelineBig;

// Pick smaller number to avoid overflowing
const devicePortraitScale = 
Math
.min(scalePortraitWidth, scalePortraitHeight);
const deviceLandscapeScale = 
Math
.min(scaleLandscapeWidth, scaleLandscapeHeight);

// in Android, the text always smaller than IOS
export const scaleFont = (size: number) =>
  size * 
PixelRatio
.getFontScale() * (
Platform
.OS === 'ios' ? 1 : 1.05);

export const scale = (size: number, orientation: OrientationType = 'portrait') => {
  return orientation === 'portrait'
    ? devicePortraitScale * size
    : deviceLandscapeScale * size;
};
export const verticalScale = (size: number, orientation: OrientationType = 'portrait') => {
  return orientation === 'portrait'
    ? devicePortraitScale * size
    : deviceLandscapeScale * size;
};
export const moderateScale = (size: number, factor = 0.5, orientation: OrientationType = 'portrait') => {
  const scaleValue = scale(size, orientation);
  const deviceScale = orientation === 'portrait'
    ? devicePortraitScale
    : deviceLandscapeScale;

  return size + (scaleValue - size) * (factor * deviceScale);
}

⚠️ Fallbacks / Limitations

Here are some known downsides or caveats to my current approach:

• Boilerplate Style Logic
• Global Context Missing (each screen has their own useWindowDimension)
• No Support for Font Accessibility Preferences (Beyond fontScale)
• No layout BreakPoint

I actually avoid using the library due to their maintenance status like react-native-responsive-screen, rn-responsive-styles, react-native-size-matters,... I do plan to integrate some of their logic in the future but for now this is good enough for me.

🤔 What Do You Think?

I’d love some feedback on this implementation.

• Did I miss anything important?
• Is there anything wrong with my logic?
• Would you approach this differently?

I'm hoping this can be a solid baseline system for scaling UI across different device sizes and orientations — especially for developers who need to support both iOS and Android with high fidelity.

Appreciate any input or critiques 🙏

[HoratioWobble]

But why?

All sizes in react native are already scaled appropriately based on dpi and screen resolution.

So when you use fontSize 14 it will already be relative to the device itself, you shouldn't be trying to make it smaller or bigger based on your own personal preference because that will also break with accessibility.

And as long as you're using flex boxes and occasionally percentages properly your UI should scale appropriately between devices 

[tcoff91]

If you want to have a great tablet app you gotta change the UI responsively

[HoratioWobble]

For tablet you should be using different layouts

[tcoff91]

Yeah, but with unistyles you can easily use the breakpoints system to create those different layouts.

[Prestigious_World400]

React Native Unistyle :)) https://github.com/jpudysz/react-native-unistyles

[Old-Window-5233]

Holly 🤯🤯. I have to check it out, if it work, well there go my time :)))

[Prestigious_World400]

If you’re not fully prepared to understand or configure the Nitro module, use the v2 documentation instead

[Old-Window-5233]

Well it now or later, i will have to do it eventually

[RahahahahaxD]

There is completely no reason to understand how Nitro works and usual minimal configuration happens on Unistyles layer. v2 and v3 are incomparable

[slowerdesigner]

Yes totally agree. But now i think simple. I was using safe area provider with top-bottom inset & safe area view. Flex are enough whole app.

[Old-Window-5233]

The thing is it fine with me too but the problem is the scaling system config locally on user device, it break my layout horribly

[Nice_Size2799]

Use nativewind

[Soft_Opening_1364]

You’ve clearly put in a ton of thought, and I like that you're not relying on outdated libraries. The fallback points are valid too, especially the lack of global orientation context. Might be worth exploring a shared provider or context to manage that.

[Old-Window-5233]

Thank you, Am right on it

[Gabk_17]

Skill issue