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.

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

expo init ScreenWidth

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;

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

expo start

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

It will help you...