Nativebase: Support <Header /> with only one button icon on the right

Created on 18 Sep 2016  路  14Comments  路  Source: GeekyAnts/NativeBase

Currently I use this workaround:

        <Header>
          <Button transparent>
            <Icon name='ios-search' style={{ width: 0, height: 0 }}/>
          </Button>
          <Title>Header</Title>
          <Button transparent>
            <Icon name='ios-search' />
          </Button>
        </Header>

Cheers.

picture wan54

Most helpful comment

screen shot 2016-10-14 at 2 05 06 pm
@SupriyaKalghatgi

picture sankhadeeproy007 on 14 Oct 2016
👍3

All 14 comments

@wan54 Can you share an example snippet for same?

SupriyaKalghatgi picture SupriyaKalghatgi on 12 Oct 2016

iconRight prop with header should do it @SupriyaKalghatgi

sankhadeeproy007 picture sankhadeeproy007 on 12 Oct 2016

screen shot 2016-10-14 at 2 05 06 pm
@SupriyaKalghatgi

sankhadeeproy007 picture sankhadeeproy007 on 14 Oct 2016
👍3

@sankhadeeproy007 iconRight is not working

devanshsadhotra picture devanshsadhotra on 24 Jul 2017

@devanshsadhotra With NativeBase v2.x, the use case has changed. Check the docs for the latest.

shivrajkumar picture shivrajkumar on 24 Jul 2017

@shivrajkumar ur link is not working

devanshsadhotra picture devanshsadhotra on 24 Jul 2017

Ah! my bad check this

shivrajkumar picture shivrajkumar on 24 Jul 2017

i have referred to this and have customized accordingly , but my icons are there at the center , no customization in theme is working !! @shivrajkumar if u can suggest something ?

devanshsadhotra picture devanshsadhotra on 24 Jul 2017

@devanshsadhotra Your code snippet and a screenshot of your output will be helpful here.

shivrajkumar picture shivrajkumar on 24 Jul 2017

<Header hasTabs style={{backgroundColor:'#32A1FE'}} > <Body> </Body> <Right> <Button transparent> <Icon name='search' /> </Button> </Right> <Right> <Button transparent> <Icon name='person' /> </Button> </Right> <Right> <Button transparent> <Icon name='notifications' /> </Button> </Right>

i am having an issue of decreasing gap in between these icons and introducing an image in

devanshsadhotra picture devanshsadhotra on 24 Jul 2017

screenshot_1500906735

devanshsadhotra picture devanshsadhotra on 24 Jul 2017

@devanshsadhotra It should be something like this

<Header>
     <Left> //Buttons that you need on Left </Left>
     <Body> //Buttons that you need on Center </Body>
     <Right> //Buttons that you need on Right </Right>
</Header>
shivrajkumar picture shivrajkumar on 24 Jul 2017

@shivrajkumar this is exactly i have done , but the gap between buttons is way too much and i am not finding a way to decrease it

devanshsadhotra picture devanshsadhotra on 25 Jul 2017

@devanshsadhotra You can just use flex properties for that

shivrajkumar picture shivrajkumar on 25 Jul 2017
Was this page helpful?
0 / 5 - 0 ratings

Related issues

georgemickael-b picture georgemickael-b  路  3Comments
maphongba008 picture maphongba008  路  3Comments
sihemhssine picture sihemhssine  路  3Comments
eggybot picture eggybot  路  3Comments
Bundas picture Bundas  路  3Comments