Strange header height

Question

For some strange reason, the header has a height of 667. I have copy pasted the code from an example page. See screenshot:

Code:

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

export default class HeaderIconTextExample extends Component {
  render() {
    return (
      <Container>
        <Header style={{backgroundColor:'red'}}>
          <Left>
            <Button transparent>
              <Icon style={{color:'white'}} name='menu' />
            </Button>
          </Left>
          <Body>
            <Title style={{color:'white'}}>{this.props.headerText}</Title>
          </Body>
          <Right>
            <Button transparent>
              <Icon style={{color:'white'}} name='ios-add' />
            </Button>
          </Right>
        </Header>
      </Container>
    );
  }
}

I have tried to apply a height to the container (e.g. 100 pixels) but that does not change anything.

Update

I have realised, that if I remove ScrollView, then the content is in the very top, in front of the header, like this:

Code:

import React, {
    Component
} from 'react';

import {
    ScrollView, View
} from 'react-native';

import KeyDetail from './KeyDetail'

import axios from 'axios';

class KeyList extends Component {
    state = {
        keys: []
    };

    componentWillMount() {
        axios.get('https://rallycoding.herokuapp.com/api/music_albums')
            .then(response => this.setState({ keys: response.data }));
    }

    renderKeys() {
        return this.state.keys.map(key => 
            <KeyDetail thekey={key} key={key.title} />
        );
    }

    render() {

        return (
            <ScrollView>
                { this.renderKeys() }
            </ScrollView>
        );
    }
}

export default KeyList;

index.ios.js

/**
 * Import a library to help create a component
 */

    import React from 'react';

    import {
        AppRegistry,
        View
    } from 'react-native';

    import Header from './src/components/Header';
    import KeyList from './src/components/KeyList';

/**
 * Create a component
 */

    const App = () => (
        <View style={{ flex: 1 }}>
            <Header headerText={'Your Keys'} />
            <KeyList />
        </View>
    );

/**
 * Render to device
 */

    AppRegistry.registerComponent('myapp', () => App);

Could you share the component where `HeaderIconTextExample` is being rendered? — Dan, Jul 27 '17 at 09:45

score 0 · Answer 1 · answered Jul 27 '17 at 10:07

Hmm. The solution (although not as pretty), is to wrap KeyList in index.ios.js inside a View, and then add marginBottom to prevent content from floating inside header.

index.ios.js

/**
 * Import a library to help create a component
 */

    import React from 'react';

    import {
        AppRegistry,
        View
    } from 'react-native';

    import Header from './src/components/Header';
    import KeyList from './src/components/KeyList';

/**
 * Create a component
 */

    const App = () => (
        <View style={{ flex: 1 }}>

            <Header headerText={'Your Keys'} />

            <View>
                <KeyList />
            </View>
        </View>
    );

/**
 * Render to device
 */

    AppRegistry.registerComponent('uniqkey', () => App);

Header.js

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

export default class HeaderIconTextExample extends Component {
  render() {
    return (
      <Container style={{marginBottom:64}}>
        <Header style={{backgroundColor:'red'}}>
          <Left>
            <Button transparent>
              <Icon style={{color:'white'}} name='menu' />
            </Button>
          </Left>
          <Body>
            <Title style={{color:'white'}}>{this.props.headerText}</Title>
          </Body>
          <Right>
            <Button transparent>
              <Icon style={{color:'white'}} name='ios-add' />
            </Button>
          </Right>
        </Header>
      </Container>
    );
  }
}

score 0 · Answer 2 · answered Jul 27 '17 at 10:08

In your HeaderIconTextExample component you haven't specify the height for the header. Add this style in HeaderIconTextExample component.

const Styles = StyleSheet.create({
  viewStyle: {
    backgroundColor: '#F8F8F8',
    justifyContent: 'center',
    alignItems: 'center',
    height: 60,
    paddingTop: 15,
 },
});
const { viewStyle } = Styles;

Update this line:

<Header style={{backgroundColor:'red'}}>

to this:

<Header style={viewStyle}>

It will work fine.

You can check my complete github repo code of this Albums react native App.

Strange header height

Update

index.ios.js

2 Answers2