How to get the screen width in React Native?

Sometimes, we want to get the screen width in React Native.

In this article, we’ll look at how to get the screen width in React Native.

How to get the screen width in React Native?

To get the screen width in React Native, we can use the Dimension object.

For instance, we write:

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

import { Card } from 'react-native-paper';

const App = () => {
  const dims = {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  };

  return (
    <View>
      <Text>{JSON.stringify(dims)}</Text>
    </View>
  );
};
export default App;

We call Dimensions.get with 'window' to get the screen dimensions in an object.

Then we can use the width and height properties to get the width and height of the screen.

Conclusion

To get the screen width in React Native, we can use the Dimension object.