Example of Get Size Width Height of View in React Native

Hello friends, In today’s tutorial we would learn about, How we can get size of a View component in react native. This is very simple but many of you didn’t find the solution properly, So here I am. Now this can be possible via Reference.measureLayout() function of react native. We can call this function with our Root View reference and Child View reference and it will return us The X and Y dimensions of View and Width and height of view. So in this tutorial we would learn about Example of Get Size Width Height of View in React Native.

Contents in this project Example of Get Size Width Height of View in React Native :-

1. Open your project’s main App.js file and import useState, ReactNative, View, StyleSheet, Text, Button and SafeAreaView component.

2. Creating our main App component.

3. Creating 4 States. Each one is used to store a unique value. You can understand their purpose by reading their names.

4. Creating a function named as getView_Width_Height(). In this function we would call measureLayout() function with Reference of Child View and Parent View. This function returns us the Width and Height of Child View.

5. Creating return() block, Here first we would make the SafeAreaView -> Root View then make the child View component. Here all we have to do is pass the ref(Reference) prop to store both View’s ref in the state. Because all this is depend on Reference.

6. Creating Style.

7. Complete Source Code for App.js file :-

Screenshots :-

Example of Get Size Width Height of View in React Native

Leave a Reply

Your email address will not be published.