React Native Responsive Screen (Updated)

A drop-in replacement for react-native-responsive-screen that fixes a major bug: dimensions now update dynamically when the device rotates.

Why This Package?

The original react-native-responsive-screen has a critical issue: it calculates dimensions only once when the app starts. If your app launches in portrait mode and then rotates to landscape (or vice versa), the dimensions remain stuck at the initial values.

This package solves that problem by listening to dimension changes and recalculating responsive values in real-time.

Key Benefits

• ✅ Dynamic dimension updates on screen rotation
• ✅ TypeScript support with full type definitions and JSDoc comments
• ✅ Zero external dependencies - only uses React Native's built-in APIs
• ✅ Lightweight - minimal bundle size impact
• ✅ Drop-in replacement - same API as the original package

Installation

npm install react-native-responsive-screen-updated

Requirements

• React Native: >= 0.59.0

Note: This package has no external dependencies and works with any React Native version >= 0.59.0. Any npm warnings you see during installation (like EBADENGINE or ERESOLVE) are from your project's other dependencies, not from this package.

Usage

import { wp, hp, wpPortrait, hpPortrait, sp } from 'react-native-responsive-screen-updated';

// Width percentage
const width = wp('50%'); // or wp(50)

// Height percentage
const height = hp('30%'); // or hp(30)

// Portrait-normalized width (based on screen's shortest side)
const pWidth = wpPortrait(50);

// Portrait-normalized height (based on screen's longest side)
const pHeight = hpPortrait(20);

// Scalable font size (ignores system font scaling if desired)
const fontSize = sp(14); // 14% of height, adjusted for font scale

Migrating from react-native-responsive-screen:

Simply change the package name - the API is identical:

import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen-updated';
import { View, Text, StyleSheet } from 'react-native';

const MyComponent = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome!</Text>
      <View style={styles.box} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: wp('100%'),    // 100% of screen width
    height: hp('100%'),   // 100% of screen height
    padding: wp('5%'),    // 5% of screen width
  },
  title: {
    fontSize: hp('3%'),   // 3% of screen height
    marginBottom: hp('2%'),
  },
  box: {
    width: wp('80%'),     // 80% of screen width
    height: hp('40%'),    // 40% of screen height
    backgroundColor: '#3498db',
    borderRadius: wp('2%'),
  },
});

API

• wp(percent): Width percentage based on current screen width.
• hp(percent): Height percentage based on current screen height.
• wpPortrait(percent): Width percentage based on the screen's shortest dimension (consistent across orientation).
• hpPortrait(percent): Height percentage based on the screen's longest dimension.
• sp(percent): Scalable pixel for fonts.
• getWidth(): Get current width.
• getHeight(): Get current height.
• isPortrait(): Check if device is in portrait mode.

Troubleshooting

npm Warnings During Installation

You may see warnings like EBADENGINE or ERESOLVE when installing this package. Here's what they mean:

EBADENGINE Warnings

These warnings indicate that your Node.js version doesn't meet the requirements of React Native (not this package). For example:

npm warn EBADENGINE Unsupported engine {
npm warn EBADENGINE   package: '[email protected]',
npm warn EBADENGINE   required: { node: '>= 20.19.4' },
npm warn EBADENGINE   current: { node: 'v20.15.1', npm: '10.7.0' }
npm warn EBADENGINE }

Solution: Update your Node.js to version 20.19.4 or higher:

nvm install 20.19.4
nvm use 20.19.4

ERESOLVE Peer Dependency Warnings

These occur when different packages in your project require different versions of the same dependency (e.g., @react-native-async-storage/async-storage).

Solutions:

1. Use --legacy-peer-deps flag:

   npm install --legacy-peer-deps

2. Or downgrade conflicting packages to compatible versions

These warnings typically don't prevent the package from working correctly, but it's best to resolve them for long-term stability.

License

MIT