Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to get height of react-native component?

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>
    )
  }
}
like image 667
marahman Avatar asked Nov 15 '25 04:11

marahman


1 Answers

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>

like image 110
Aseem Gautam Avatar answered Nov 17 '25 17:11

Aseem Gautam



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!