Sometimes, we want to get the size of a View in React Native.

In this article, we’ll look at how to get the size of a View in React Native.

How to get the size of a View in React Native?

To get the size of a View in React Native, we can get them from the parameter of the onLayout callback.

For instance, we write:

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

const MyComponent = () => {
  const [dims, setDims] = React.useState({});
  return (
    <View
      onLayout={(event) => {
        const { x, y, width, height } = event.nativeEvent.layout;
        setDims({ x, y, width, height });
      }}>
      <Text>{JSON.stringify(dims)}</Text>
    </View>
  );
};

export default MyComponent;

to set onLayout prop of the View to a function that gets the x, y, width and height properties from event.nativeEvent.layout.

x and y are the coordinates of the top left corner of the View.

width and height are its width and height.

Conclusion

To get the size of a View in React Native, we can get them from the parameter of the onLayout callback.