@raahimkhan23/react-native-responsive-utils

A lightweight utility package for making React Native apps responsive across different screen sizes. It allows you to scale widths, heights, fonts, and images based on a configurable base screen size, enabling consistent layouts on different devices. The package includes both percentage based helpers as well as pixel based scaling functions for flexible UI design. It also supports listening to orientation changes and updating screen dimensions in real time. The utilities are designed to be minimal, easy to integrate, and highly effective for maintaining visual balance across screen types.

Contents

• Screenshots
• Installation
• Usage
• Exports
• Tips
• Contributing
• License

Screenshots

iOS portrait view

iOS landscape view

Android portrait view

Android landscape view

Installation

npm install @raahimkhan23/react-native-responsive-utils

Usage

Import the required utilities directly from the package:

import {
  BASE_SCREEN_WIDTH,
  BASE_SCREEN_HEIGHT,
  CURRENT_SCREEN_WIDTH,
  CURRENT_SCREEN_HEIGHT,
  MIN_FONT_SCALE,
  MAX_FONT_SCALE,
  setBaseScreenSize,
  listenOrientationChange,
  removeOrientationListener,
  scaleWidth,
  scaleHeight,
  scaleImageWidth,
  scaleImageHeight,
  setFontScaleLimits,
  scaleFont,
  isIphoneModel,
  wp,
  hp,
} from '@raahimkhan23/react-native-responsive-utils';

For a complete working demo, refer to the example app.

Exports

The following variables and utility functions are available for use, helping with responsive layout, scaling, and orientation handling.

| Name | Type | Description | |--------------------------|----------|-----------------------------------------------------------------------------| | BASE_SCREEN_WIDTH | Variable | Base width used for scaling (defaults to iPhone 16 Pro width) | | BASE_SCREEN_HEIGHT | Variable | Base height used for scaling (defaults to iPhone 16 Pro height) | | CURRENT_SCREEN_WIDTH | Variable | Current device screen width. It is updated on orientation change if the listenOrientationChange function has been called | | CURRENT_SCREEN_HEIGHT | Variable | Current device screen height. It is updated on orientation change if the listenOrientationChange function has been called | | MIN_FONT_SCALE | Variable | Minimum font scale clamp value. Defaults to 0 | | MAX_FONT_SCALE | Variable | Maximum font scale clamp value. Defaults to 0 | | setBaseScreenSize | Function | Updates the base screen width and height | | listenOrientationChange | Function | Subscribes to orientation changes and updates screen dimensions | | removeOrientationListener| Function | Removes the orientation change listener if it exists | | scaleWidth | Function | Scales a given width relative to current and base screen width | | scaleHeight | Function | Scales a given height relative to current and base screen height | | scaleImageWidth | Function | Scales image width and rounds to nearest pixel | | scaleImageHeight | Function | Scales image height while maintaining aspect ratio, rounded to nearest px | | setFontScaleLimits | Function | Updates the minimum and maximum limits for font scaling clamp values | | scaleFont | Function | Scales font size based on screen dimensions, with optional clamping | | isIphoneModel | Function | Checks if current device matches the dimensions of a known iPhone model | | wp | Function | Converts width percentage to device independent pixels (dp) | | hp | Function | Converts height percentage to device independent pixels (dp) |

Tips

• Remember to set the base device width and height using the setBaseScreenSize function. If not set, the default base device is treated as iPhone 16 Pro (402 × 874).
• Use scaleWidth and scaleHeight for scaling elements like containers, cards, and other layout blocks. However, scaling needs vary based on design choices, company guidelines, or Figma specifications. You may also choose to use wp and hp for fixed percentage based dimensions where appropriate.
• Utilise wp and hp for applying consistent paddings and margins that adapt across screen sizes.
• Use scaleFont for text sizes that need to stay readable across devices. Clamp values if needed to avoid too small or large fonts. However, this also depends on your design choices, company typography guidelines, or Figma specs, i.e., not every text element needs to be scaled. Alternatively, you can use wp to make font size a fixed percentage of the screen width, which also adjusts dynamically across devices. Decide based on need and context.
• Avoid unnecessary scaling for simple spacings or minor paddings; using fixed values or percentages is often sufficient.
• For displaying images responsively, use scaleImageWidth and scaleImageHeight together to maintain the original aspect ratio.
• Test your layout in both portrait and landscape modes (if landscape mode is supported by your app), especially on devices with extreme aspect ratios.
• I, the author of this library, have been using these functions in all of my React Native apps and consistently achieve over 90% responsiveness. Any remaining edge case devices, like very small phones or large tablets, are handled manually if needed.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT