Navigate back to the homepage

React Native Dimensions Example

React Native
June 24th, 2021 · 1 min read

Hello Friends,

Welcome To Infinitbility!

This article will help you to get screen width and height in react native, in react native for responsiveness we need many times screen with and heght.

Let’s start today’s article React Native Dimensions Example

React Native provide Dimensions component to get and manage screen width and height.

React Native Dimensions Example article will clear your below topics.

  1. How to get screen width and height in react native
  2. How to get updated width and height when device rotate in react native or other cases.

How to get screen width and height in react native

React Native Dimensions will provide both height and width of screen and also window, then what’s diffrance between window and screen in react native dimensions?

  1. window - Size of the visible Application window
  2. screen - Size of the device’s screen

You wil get screen width and height like below example

1import { Dimensions } from 'react-native';
4const windowWidth = Dimensions.get('window').width;
5const windowHeight = Dimensions.get('window').height;

How to get updated width and height when device rotate in react native or other cases ( foldable devices ).

If you are targeting foldable devices or devices which can change the screen size or app window size, you can use the event listener available in the Dimensions module as shown in the below example.

React Native Dimensions EventListener will update width and height value if it change. you will try like below.

1import React, { Component } from "react";
2import { View, StyleSheet, Text, Dimensions } from "react-native";
4const window = Dimensions.get("window");
5const screen = Dimensions.get("screen");
7class App extends Component {
8 state = {
9 dimensions: {
10 window,
11 screen
12 }
13 };
15 onChange = ({ window, screen }) => {
16 this.setState({ dimensions: { window, screen } });
17 };
19 componentDidMount() {
20 Dimensions.addEventListener("change", this.onChange);
21 }
23 componentWillUnmount() {
24 Dimensions.removeEventListener("change", this.onChange);
25 }
27 render() {
28 const { dimensions } = this.state;
30 return (
31 <View style={styles.container}>
32 <Text>{`Window Dimensions: height - ${dimensions.window.height}, width - ${dimensions.window.width}`}</Text>
33 <Text>{`Screen Dimensions: height - ${dimensions.screen.height}, width - ${dimensions.screen.width}`}</Text>
34 </View>
35 );
36 }
39const styles = StyleSheet.create({
40 container: {
41 flex: 1,
42 justifyContent: "center",
43 alignItems: "center"
44 }
47export default App;

Thanks for reading…

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide



More articles from Infinitbility

How to delete file in react native

React Native file delete example

June 20th, 2021 · 1 min read

How to check file is exist or not in react native

React Native file exists example

June 19th, 2021 · 1 min read
© 2020–2022 Infinitbility
Link to $ to $ to $ to $ to $ to $mailto:[email protected]