how to get height of react-native component?

Question

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>
    )
  }
}

Does this answer your question? [Get size of a View in React Native](https://stackoverflow.com/questions/30203154/get-size-of-a-view-in-react-native) — glinda93, May 29 '21 at 14:55

score 6 · Answer 1 · answered May 29 '21 at 14:39

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>

score 2 · Answer 2 · answered May 29 '21 at 14:38

2

Here is how you can get height of a View in React-Native:

<View onLayout={(event) => {
  let {height} = event.nativeEvent.layout;
}} />

This should work for the Picker as well (if it is supported).

answered May 29 '21 at 14:38

Aniket Kolekar

383
6
19

always return 0?? – famfamfam Jan 12 '23 at 07:07

how to get height of react-native component?

2 Answers2