How to Get Screen Width in React Native?


Share:
 | Published By: Admin | Published On: May 20, 2022 | Category: React Native

Hi Guys,

This tutorial will give you example of react native get screen width example. step by step explain screen width in react native. we will help you to give example of how to get screen width in react native. This tutorial will give you simple example of react native dimensions example.

To get the screen width in React Native, we can use the Dimension object.Then we can use the width and height properties to get the width and height of the screen.

Step 1: Download Project

In the first step run the following command to create a project.

expo init ScreenWidth
Step 2: App.js

In this step, You will open the App.js file and put the code.

import React from 'react';
import { StyleSheet, Text, View, Dimensions} from 'react-native';

const Width = Dimensions.get("screen").width;

const App = () => {
    return (
        <View style={styles.container}>
            <Text style={styles.width}>Screen Width: {Width} </Text>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    width: {
        fontSize:22,
        backgroundColor:'green',
        padding:10,
        color:'white',
        borderRadius:10,
    }
});

export default App;
Run Project

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

Output :

It will help you...

Share: