CODEWITHSUNDEEP
javascriptreactjsreact-native
marahman
marahman

Reputation: 297

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

Upvotes: 4

Views: 11029

Answers (2)

A G
A G

Reputation: 22617

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>

Upvotes: 7

Aniket K
Aniket K

Reputation: 434

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

Upvotes: 3

Related Questions