Nativebase: Search Bar without button (full width)

Created on 3 Feb 2017 · 7Comments · Source: GeekyAnts/NativeBase

How to make search bar, the full width of header without button search.
<Button transparent> Search </Button>
If I remove the button search, search bar displayed incorrectly.

rns

"react-native": "0.35.0"
"native-base": "0.5.11"

Thx.

Source

joinjoohny

👍1

All 7 comments

manfredxu99 on 25 Feb 2017

bgdavidx on 25 Feb 2017

@manfredxu99 @bgdavidx @joinjoohny you guys can try

<Header searchBar rounded>
   <Item>
          <Icon name="ios-search" />
          <Input placeholder="Search"  />
          <Icon name="ios-people" />
  </Item>
</Header>

the above will work for you .

GeekRishabh on 14 Apr 2017

not working for me too. Same issue.
"native-base": "^2.1.1",
"react-native": "0.43.2",

nikunjbansal on 14 Apr 2017

@nixalite if you have ejected NB theme, you need to merge it with the new theme as the older theme doesn't have input component theme . you can add input.js in your ejected theme and include it in theme index.js this way

GeekRishabh on 14 Apr 2017

Closing this as the above should resolve the issue in v2.x
Let me know if it doesn't

shivrajkumar on 19 Apr 2017

👎1 👍1

name="camera"
style={{color:'#fff'}}
/>

      <Body style={{flex:5}}>
         <Item >
         <Icon name="search"  style={{color:'#fff'}} />
         <Input placeholder="Search Items Here..."  placeholderTextColor="#fff" style={{width:300}}/>
         <Icon name="people"  style={{color:'#fff'}} />
       </Item>
      </Body>
      <Right style={{flex:1}}>
            <Icon name="home"  style={{color:'#fff'}}/>
          </Right>
    </Header>