CODEWITHSUNDEEP
react-native
Denis Kulagin
Denis Kulagin

Reputation: 8906

How to obtain current component's height?

Is there a way to get the current Component dimension?

class CustomHeader extends Component {
    componentDidMount() {
        // ???
    }

    render() {
        // ???

        return (
            ...
        );
    }
}

P.S. The more general problem that I am trying to solve is to syncronize height between headers across different screens in the stack navigator. If there is a more simple way to do so than programmatically copy-pasting the height I would be thankful for a hint.

Upvotes: 0

Views: 49

Answers (1)

SDushan
SDushan

Reputation: 4631

According to the requirement, you can get the height of a View using onLayout.

class CustomHeader extends Component {

  findDimesions = event => {
    const { height } = event.nativeEvent.layout;
    console.log(height);
  };

  render() {
    return (
      <View onLayout={this.findDimesions}>
        <Text>Custom Header</Text>
        {/* place your custom header content */}
      </View>
    );
  }

}

Hope this helps you. Feel free for doubts.

Upvotes: 1

Related Questions