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

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.

Answer 2

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

Answer 3

Step 1:- Import "Dimensions" api from 'react-native'

import { Dimensions } from 'react-native';

Step 2:- Get Dimensions (Window width/height)

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

Step 3:- Use width and height variable.

<View style={{width:width,height:height/20}>
<Text>test<Text/>               
</View>

Answer 4

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.