Screen width in React Native

Question

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 device

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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);

Answer 5

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>

Answer 6

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