programmatically retrieve Header component height - React Native

Question

Using NativeBase, I added a Header component. Now, I want to programmatically retrieve the height of the header. How can I do this. The code for adding the Header is given below:

I tried using Dimensions.get('window') but it gives me the height of the entire view.

The code:

import React, {Component} from 'react-native';
import {Container, Header, Button, Title, Icon} from 'native-base';

export default class ThemeHeaderExample extends Component {
    render() {
        return (
                <Header>
                    <Button transparent />

                    <Title>Header</Title>

                </Header>
        );
    }
}

Facundo La Rocca · Accepted Answer · 2017-08-15 20:30:16Z

Sadly, NativeBase.Header does not expose Height.

I faced the same problem and I dove into the code, I realized Height is harcoded in this way:

toolbarHeight: platform === "ios" ? 64 : 56

Take a look here at line 155. You will end up there following Header Component at line 300.

Even though this might work, It does not seem to be something we might want to do, or at least, that fixed solution seems to be ugly.

So, what I did was to create my own Header, which is pretty straight forward and easy since it is just a wrapper, and used "refs measure" function that allows us to get position and size. You can see an example here.

Basically, It should look like this:

render() {
    return (
      <View style={styles.container} ref="yourComponent">
        <TouchableOpacity onPress={this.measureYourComponent}>
          <Text>Measure it</Text>
        </TouchableOpacity>
      </View>
    );
}

measureYourComponent() {
    this.refs.yourComponent.measure((ox, oy, width, height, px, py) => {
        console.log("ox: " + ox); //Relative position
        console.log("oy: " + oy); //Relative position
        console.log("width: " + width);
        console.log("height: " + height);
        console.log("px: " + px); //Absolute position
        console.log("py: " + py); //Absolute position
      });
}

In my case, I needed to react from some parent depending on a child's size, so replace the OnPress handler for a Handler provided by its parent.

In this way, despite you will need some more effort, you will have a solution more flexible and reusable.

Let me know if there is something to clarify.

Sagar H · Accepted Answer · 2020-02-04 04:36:33Z

4

I solved it by just importing the variable and using it.

import toolbarHeight from '../../native-base-theme/variables/platform'

edited Feb 4, 2020 at 4:36

Sagar H

5,5815 gold badges42 silver badges54 bronze badges

answered Nov 23, 2017 at 13:06

smith64fx

3372 silver badges10 bronze badges

Comments

astiefel · Accepted Answer · 2017-08-15 19:41:43Z

0

I don't use native base but you should be able to use onLayout props: https://facebook.github.io/react-native/docs/view.html#onlayout

answered Aug 15, 2017 at 19:41

astiefel

2,0382 gold badges18 silver badges22 bronze badges

Comments

Cassie · Accepted Answer · 2019-04-10 10:12:53Z

0

I faced the same problem and this is how I fixed it.

Give a styling with your desired height(e.g. 20) and paddingTop of 0.

<Header style={{height: 20, paddingTop:0}}>
    <Button transparent />

    <Title>Header</Title>

</Header>

Hope it helps :)

answered Apr 10, 2019 at 10:12

Cassie

1

Comments

Sagar H · Accepted Answer · 2020-02-04 04:37:14Z

0

I was having an issue with iPhone X my native base Header was adding padding from the top when I use SafeAreaView then I came with the following workaround, It may solve your problem.

I have tested it on iPhone X, 8 and android.

import {StatusBar, TouchableOpacity, View, SafeAreaView,platform,Dimensions} from "react-native";
const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;
const platformStyle = undefined;

const isIphoneX =
Platform.OS === 'ios' &&
(deviceHeight === 812 ||
deviceWidth === 812 ||
deviceHeight === 896 ||
deviceWidth === 896);

<Header style={{paddingTop: isIphoneX ? -10 : 15,maxHeight:50,minHeight:50}}>

edited Feb 4, 2020 at 4:37

answered Nov 20, 2019 at 13:02

Sagar H

5,5815 gold badges42 silver badges54 bronze badges

Collectives™ on Stack Overflow

programmatically retrieve Header component height - React Native

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related