CODEWITHSUNDEEP
react-native
Zygro
Zygro

Reputation: 7119

Screen width in React Native

How do I get screen width in React native? I need it because I use some absolute components that overlap and their position on screen changes with different devices.

Upvotes: 147

Views: 201447

Answers (15)

Avinash Aryan
Avinash Aryan

Reputation: 91

    import {useWindowDimensions, Dimensions} from 'react-native'


let width1= useWindowDimensions().width // Hook can be called only inside functional component, tthis is dynamic
let width2=Dimensions.get("screen").width

Upvotes: 1

MUKESH BUWADE
MUKESH BUWADE

Reputation: 1

you can get device width and height in React Native, by the following code:

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

docs: https://reactnative.dev/docs/dimensions

Upvotes: 0

Guillermo Mata
Guillermo Mata

Reputation: 11

First, you must import Dimensions from 'react-native'

import { View, StyleSheet, Dimensions  } from "react-native";

after that, you can save width and height in variables:

const windowsWidth  = Dimensions.get('window').width

const windowsHeight = Dimensions.get('window').height

them you could use both as you need, i.e. in styles:

 flexDirection: windowsWidth<400 ? 'column' : 'row',

Remember this, your object styles is outside your component, so the cariable declaration must be outside your component too. But if you need it inside your component, no problem, can use it:

<Text> Width: { windowsWidth  }</Text>

<Text> Height: { windowsHeight }</Text>

Upvotes: 0

Zeeshan Ali Khan
Zeeshan Ali Khan

Reputation: 141

You can achieve this by creating a component and using it by importing it into the file you need.

import {Dimensions, PixelRatio} from "react-native";

const {width, height} = Dimensions.get("window");

const wp = (number) => {
    let givenWidth = typeof number === "number" ? number : parseFloat(number);
    return PixelRatio.roundToNearestPixel((width * givenWidth) / 100);
};

const hp = (number) => {
    let givenHeight = typeof number === "number" ? number : parseFloat(number);
    return PixelRatio.roundToNearestPixel((height * givenHeight) / 100);
};

export {wp, hp};

Now, you should use it.

import { hp, wp } from "../<YOUR PATH>";

  buttonContainer: {
    marginTop: hp("2%"),
    height: hp("7%"),
    justifyContent: "center",
    alignSelf: "center",
    width: wp("70%"),
    backgroundColor: "#1C6AFD",
    borderRadius: 5,
  },
  buttonText: {
    fontSize: wp("3.5%"),
    color: "#dddddd",
    textAlign: "center",
    fontFamily: "Spartan-Bold",
  }

That way, you will make your design responsive. I suggest using simple pixels in the styling of circle things like avatar images, etc.

In other cases, the above code wraps components according to the density pixels of the screen.

If you have any better solution, please comment.

Upvotes: 0

HItesh V
HItesh V

Reputation: 11

The latest method from 2020 is to use useWindowDimensions

the way i implemented it-

  1. make a global.js file and set window width and height as global variables
    const WindowDimensions= (()=>{
    global.windowWidth = useWindowDimensions().width;
    global.windowHeight = useWindowDimensions().height;
    return (<></>);
    })

  1. in App.js file,import window dimensions and add it to return block

  2. use width and height everywhere as global.windowHeight and global.windowWidth

using global variables is not a good design pattern. but this thing works

Upvotes: 1

samran
samran

Reputation: 723

First get Dimensions from react-native

import { Dimensions } from 'react-native';

then

const windowWidth = Dimensions.get('window').width;

const windowHeight = Dimensions.get('window').height;

in windowWidth you will find the width of the screen while in windowHeight you will find the height of the screen.

Upvotes: 1

mcnk
mcnk

Reputation: 2331

I think using react-native-responsive-dimensions might help you a little better on your case.

You can still get:

device-width by using and responsiveScreenWidth(100)

and

device-height by using and responsiveScreenHeight(100)

You also can more easily arrange the locations of your absolute components by setting margins and position values with proportioning it over 100% of the width and height

Upvotes: 0

micnguyen
micnguyen

Reputation: 1449

April 10th 2020 Answer:

The suggested answer using Dimensions is now discouraged. See: https://reactnative.dev/docs/dimensions

The recommended approach is using the useWindowDimensions hook in React; https://reactnative.dev/docs/usewindowdimensions which uses a hook based API and will also update your value when the screen value changes (on screen rotation for example):

import {useWindowDimensions} from 'react-native';

const windowWidth = useWindowDimensions().width;
const windowHeight = useWindowDimensions().height;

Note: useWindowDimensions is only available from React Native 0.61.0: https://reactnative.dev/blog/2019/09/18/version-0.61

Upvotes: 38

Dhruvil Shah
Dhruvil Shah

Reputation: 416

Only two simple steps.

  1. import { Dimensions } from 'react-native' at top of your file.
  2. const { height } = Dimensions.get('window');

now the window screen height is stored in the height variable.

Upvotes: 4

Swetank Subham
Swetank Subham

Reputation: 169

React Native comes with "Dimensions" api which we need to import from 'react-native'

import { Dimensions } from 'react-native';

Then,

<Image source={pic} style={{width: Dimensions.get('window').width, height: Dimensions.get('window').height}}></Image>

Upvotes: 10

jfunk
jfunk

Reputation: 8142

Just discovered react-native-responsive-screen repo here. Found it very handy.

react-native-responsive-screen is a small library that provides 2 simple methods so that React Native developers can code their UI elements fully responsive. No media queries needed.

It also provides an optional third method for screen orienation detection and automatic rerendering according to new dimensions.

Upvotes: 2

NJensen
NJensen

Reputation: 271

React Native Dimensions is only a partial answer to this question, I came here looking for the actual pixel size of the screen, and the Dimensions actually gives you density independent layout size.

You can use React Native Pixel Ratio to get the actual pixel size of the screen.

You need the import statement for both Dimenions and PixelRatio

import { Dimensions, PixelRatio } from 'react-native';

You can use object destructuring to create width and height globals or put it in stylesheets as others suggest, but beware this won't update on device reorientation.

const { width, height } = Dimensions.get('window');

From React Native Dimension Docs:

Note: Although dimensions are available immediately, they may change (e.g due to >device rotation) so any rendering logic or styles that depend on these constants >should try to call this function on every render, rather than caching the value >(for example, using inline styles rather than setting a value in a StyleSheet).

PixelRatio Docs link for those who are curious, but not much more there.

To actually get the screen size use:

PixelRatio.getPixelSizeForLayoutSize(width);

or if you don't want width and height to be globals you can use it anywhere like this

PixelRatio.getPixelSizeForLayoutSize(Dimensions.get('window').width);

Upvotes: 26

Aneesh P V
Aneesh P V

Reputation: 1390

Simply declare this code to get device width

let deviceWidth = Dimensions.get('window').width

Maybe it's obviously but, Dimensions is an react-native import

import { Dimensions } from 'react-native'

Dimensions will not work without that

Upvotes: 107

Pramod Mg
Pramod Mg

Reputation: 2320

In React-Native we have an Option called Dimensions

Include Dimensions at the top var where you have include the Image,and Text and other components.

Then in your Stylesheets you can use as below,

ex: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
}

In this way you can get the device window and height.

Upvotes: 211

Tom Hanson
Tom Hanson

Reputation: 663

If you have a Style component that you can require from your Component, then you could have something like this at the top of the file:

const Dimensions = require('Dimensions');

const window = Dimensions.get('window');

And then you could provide fulscreen: {width: window.width, height: window.height}, in your Style component. Hope this helps

Upvotes: 25

Related Questions