Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Header not up to Material Design spec? #1550

Closed
yarian opened this issue Jan 29, 2018 · 8 comments
Closed

Header not up to Material Design spec? #1550

yarian opened this issue Jan 29, 2018 · 8 comments
Labels
android

Comments

@yarian
Copy link

yarian commented Jan 29, 2018

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

screen shot 2018-01-29 at 10 55 18 am

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
@yarian
Copy link
Author

yarian commented Jan 29, 2018

Looked like a relevant issue–not sure why it was closed: #795

@SupriyaKalghatgi
Copy link
Contributor

@yarian What is the tool you used to measure this?

@yarian
Copy link
Author

yarian commented Feb 8, 2018

I copied a screenshot unto Sketch.

I ended up getting the correct guidelines by adding the following styles to different components in the Header:

{flex: 0, paddingLeft: 6, width: 62}

To the Left component.

{flex: 1}

To Body

{flex: 0}

To Right

I add paddingLeft: 6 because Header by default comes with 10dp of padding on both sides, which seems a bit weird.

@rohithramachandran
Copy link

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

@sanyesz123
Copy link

@yarian Add block attribute too.

@wedneyyuri
Copy link

@yarian I also can't understand why the issue #795 was closed. The expected behavior is to follow material design specs without any additional customization.

@wedneyyuri
Copy link

wedneyyuri commented Apr 7, 2018 •
edited
Loading

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>

image
image

Removing <Left /> still works.

image

@akhil-ga akhil-ga mentioned this issue Apr 16, 2018
Merged
@SupriyaKalghatgi
Copy link
Contributor

Fixed with 2.4.3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
android
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@yarian @rohithramachandran @sanyesz123 @wedneyyuri @SupriyaKalghatgi