npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-responsive-dimensions

v3.1.1

Published

Resposive fontSize, height and width for your react-native components.

Downloads

202,417

Readme

📐📱 React Native Responsive Dimensions 🌐📏

Responsive height, width and responsive fontSize for your react native components!

The dimensions auto adjust based on the window size (view port) or the screen size of the device 🙌🏽

Support for responsive dimension hooks to help auto-adjust dimensions for devices whose display or screen sizes may change such as foldable phones or browser windows! 😎

Build Status Maintainability Test Coverage

Version Downloads Bundlephobia

Star on GitHub Watch on GitHub Twitter Follow


Compatible with Expo & React Native Web 🚀

PRs Welcome 👍✨

Installation

#npm
npm install --save react-native-responsive-dimensions

#yarn
yarn add react-native-responsive-dimensions

Usage

While working with mobile devices, there are two kinds of dimensions you will have to focus on

  • Window Dimensions ﹣ which is the size of the window / view port on which your app is being displayed
  • Screen Dimensions ﹣ this is the total screen dimensions of your device (your app may occupy the entire screen or only a portion of the screen)

Working with Window Dimensions

import { StyleSheet } from "react-native";
import {
  responsiveHeight,
  responsiveWidth,
  responsiveFontSize
} from "react-native-responsive-dimensions";

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    height: responsiveHeight(50), // 50% of window height
    width: responsiveWidth(50), // 50% of window width
    alignItems: "center"
  },
  sampleText: {
    fontSize: responsiveFontSize(2) // 2% of total window size
  }
});

Working with Screen Dimensions

import { StyleSheet } from "react-native";
import {
  responsiveScreenHeight,
  responsiveScreenWidth,
  responsiveScreenFontSize
} from "react-native-responsive-dimensions";

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    height: responsiveScreenHeight(50), // 50% of Screen height
    width: responsiveScreenWidth(50), // 50% of Screen width
    alignItems: "center"
  },
  sampleText: {
    fontSize: responsiveScreenFontSize(2) // 2% of total screen size
  }
});

Responsive hooks

The above responsive dimension methods do not auto update once the value is set. They are suitable for using within StyleSheet.create method as the values don't change once set. However, you might want your views to respond to dimension changes such as screen rotation, device folding (in foldable devices) & browser window resizing (react-native-web).

The values set by these hooks auto respond to changes. The following hooks are available for use ﹣

  • useResponsiveHeight
  • useResponsiveWidth
  • useResponsiveFontSize
  • useResponsiveScreenHeight
  • useResponsiveScreenWidth
  • useResponsiveScreenFontSize
  • useDimensionsChange

Sample Usage

import React from "react";
import { View } from "react-native";
import {
  useResponsiveHeight,
  useResponsiveWidth
} from "react-native-responsive-dimensions";

const App = () => {
  const height = useResponsiveHeight(25);
  const width = useResponsiveWidth(25);

  return <View style={{ height, width }} />;
};

Reacting to dimension changes with useDimensionsChange

useDimensionsChange basically calls a function whenever the dimensions update with new window & screen dimensions as arguments. This is a good place to include your layout animations if your UI layout reacts to dimension updates and you want to make the transitions smooth.

import React, { useCallback } from "react";
import { View, LayoutAnimation } from "react-native";
import {
  useResponsiveHeight,
  useResponsiveWidth,
  useDimensionsChange
} from "react-native-responsive-dimensions";

const App = () => {
  const height = useResponsiveHeight(25);
  const width = useResponsiveWidth(25);

  useDimensionsChange(
    useCallback(({ window, screen }) => {
      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    }, [])
  );

  return <View style={{ height, width }} />;
};

Examples

Why Responsive Dimensions

I built responsive dimensions as a personal tool to tackle some of my problems I face during my everyday app development. You might want to use it if your usecase comes under one of the following scenarios.

  • While working with React Native UI (especially animations) there are lots of scenarios that require calculating a certain percentage of the display area.

  • If your app supports tablets then you might want to scale some of your fonts & UI Components based on the display size.

  • If you are using react-native-web or targetting foldable devices your UI needs to react to the changes in the window dimensions.