how to get the height of react component? I want to use the height value of a component as padding's value of other component, how to do it in react native? for example, I made a picker component from
import { Picker } from '@react-native-picker/picker';
I want to make a <view> component with padding value padding:{Picker}.height, how to do it?
update
thanks to @Aseem Gautam and @Aniket Kolekar, I have tried the solution for Picker Component but its not working, it worked nicely when I try it with View Component. why that could happen? does it mean the Picker Component not inherits View props? here the code that I have tried
import React, { Component } from "react";
import { View, Text, SectionList } from "react-native";
import { Picker } from "@react-native-picker/picker";
export default class App extends Component {
find_dimension(layout){
const {x, y, width, height} = layout;
console.warn(x);
console.warn(y);
console.warn(width);
console.warn(height);
}
render(){
return(
<View>
<Picker onLayout={(event) => {this.find_dimension(event.nativeEvent.layout)}}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
</View>
)
}
}
The Picker inherits View props. You can use the onLayout event to get the height, width, x & y of the picker.
<Picker
onLayout={(event) => {
var {x, y, width, height} = event.nativeEvent.layout;
}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With