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.
|
|
import React, { useState } from “react”; import ReactNative, { View, StyleSheet, Text, Button, SafeAreaView } from ‘react-native’; |
2. Creating our main App component.
|
|
export default function App() { } |
3. Creating 4 States. Each one is used to store a unique value. You can understand their purpose by reading their names.
|
|
const [width, setWidth] = useState(”); const [height, setHeight] = useState(”); const [parent_reference, setParent_Reference] = useState(null); const [child_reference, setChild_Reference] = useState(null); |
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.
|
|
const getView_Width_Height = () => { child_reference.measureLayout( ReactNative.findNodeHandle (parent_reference), (X, Y, Width, Height) => { setWidth(Width + ‘px’); setHeight(Height + ‘px’); }); } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
return ( <SafeAreaView style={{flex: 1}}> <View style={styleSheet.MainContainer} ref={(ref) => { setParent_Reference(ref) }}> <View style={styleSheet.childView} ref={(ref) => { setChild_Reference(ref) }} > <Text style={styleSheet.text}>View Width = {width}</Text> <Text style={styleSheet.text}>View Height = {height}</Text> </View> <Button onPress={getView_Width_Height} title=‘Get View Width Height’ /> </View> </SafeAreaView> ); |
6. Creating Style.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, padding: 10, alignItems: ‘center’ }, childView: { width: 300, height: 240, backgroundColor: ‘green’, marginBottom: 20, justifyContent: ‘center’, alignItems: ‘center’ }, text: { fontSize: 28, textAlign: ‘center’, color: ‘white’, padding: 10 } }); |
7. Complete Source Code for App.js file :-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
import React, { useState } from “react”; import ReactNative, { View, StyleSheet, Text, Button, SafeAreaView } from ‘react-native’; export default function App() { const [width, setWidth] = useState(”); const [height, setHeight] = useState(”); const [parent_reference, setParent_Reference] = useState(null); const [child_reference, setChild_Reference] = useState(null); const getView_Width_Height = () => { child_reference.measureLayout( ReactNative.findNodeHandle (parent_reference), (X, Y, Width, Height) => { setWidth(Width + ‘px’); setHeight(Height + ‘px’); }); } return ( <SafeAreaView style={{flex: 1}}> <View style={styleSheet.MainContainer} ref={(ref) => { setParent_Reference(ref) }}> <View style={styleSheet.childView} ref={(ref) => { setChild_Reference(ref) }} > <Text style={styleSheet.text}>View Width = {width}</Text> <Text style={styleSheet.text}>View Height = {height}</Text> </View> <Button onPress={getView_Width_Height} title=‘Get View Width Height’ /> </View> </SafeAreaView> ); } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, padding: 10, alignItems: ‘center’ }, childView: { width: 300, height: 240, backgroundColor: ‘green’, marginBottom: 20, justifyContent: ‘center’, alignItems: ‘center’ }, text: { fontSize: 28, textAlign: ‘center’, color: ‘white’, padding: 10 } }); |
Screenshots :-
