Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Header not up to Material Design spec?

See original GitHub issue

react-native, react and native-base version

react-native 0.52.0 react 16.2.0 native-base ^2.3.3

Reproduction

      <Header>
        <Left>
          <Button onPress={this.toggleHamburger} transparent>
            <Icon name="menu" />
          </Button>
        </Left>
        <Body>
          <Title>Settings</Title>
        </Body>
        <Right></Right>
      </Header>

I am getting results that don’t line up with Material UI Guidelines on headers.

Actual Behavior

Expected behaviour

I expect Left to not be so large and Title to line up with the 72dp guideline.

Is the bug present in both ios and android or in any one of them?

Android

Issue Analytics

State:
Created 6 years ago
Reactions:3
Comments:8 (2 by maintainers)

Top GitHub Comments

1reaction

SupriyaKalghatgicommented, Apr 27, 2018

Fixed with 2.4.3

0reactions

wedneyyuricommented, Apr 7, 2018

Same happening for me too. @yarian s solution is not working for me . Any other fixes for this @SupriyaKalghatgi ?

@rohithramachandran Are you sure? It’s working for me (using v2.4.1).

<Root>
    <Container>
        <Header style={styles.topMargin}>
            <Left style={{ backgroundColor: "green", flex: 0, flexBasis: 48 }}>
                <Button transparent>
                    <Icon name="more" />
                </Button>
            </Left>
            <Body style={{ backgroundColor: "#00adef", flex: 1 }}>
                <Title>Awesome App With Very Very Long Title</Title>
            </Body>
            <Right style={{ backgroundColor: "green", flex: 0, flexBasis: 48 }}>
                <Button transparent>
                    <Icon name="more" />
                </Button>
            </Right>
        </Header>
    </Container>
</Root>

Removing <Left /> still works.

Top Results From Across the Web

Guidelines - Material Design

Platform guidance helps you make detailed decisions about what conventions are proper for each platform. Up next. Material Theming. Theming overview ...

material design not recognize - angular - Stack Overflow

According to the comments for Lys's answer, you need to import MainHeaderModule in app.module.ts. Then you will get the error you mentioned

mdl-layout__header--scroll not working in small screen #4180

Having scrollable header is not an MD spec indeed but since you provide that option, just wondering if we can make the effect...

Customizing Typography - Angular Material

To use Roboto, your application must load the font, which is not included with ... of the Material Design specification, outlined in the...

Google Material Design Tutorial for iOS: Getting Started

In this tutorial, you'll get a primer on Material Design and build a simple app ... Now add the following properties to HomeHeaderView...