CODEWITHSUNDEEP
cssreact-native
Samiksha Jagtap
Samiksha Jagtap

Reputation: 603

How do I put a view on top of Header, with part of it lying outside the bounds of the header behind?

I have a header at my component with the back icon at the left and search icon at right. At the center of a header, i want to put view box such that its part lying outside the bounds of a header. Please look at the image I have uploaded.enter image description here

render() {
return (
  <Conatiner>
  <Header style={{backgroundColor: '#009688'}}>
      <Left>
          <Button transparent onPress={Actions.pop}>
              <Icon name='arrow-back' style={{color: '#ffffff'}}/>
          </Button>
      </Left>
      <Body>
      <View style={{width: 20, height: 100, backgroundColor: 'red')}}/>
      </Body>
      <Right>
          <Button transparent>
          <Icon name='md-search' style={{color: '#ffffff'}}/>
          </Button>
      </Right>
  </Header>
  <View>// other code</View>
  </Container>
);}

Please suggest me the solution. Thanks in advance

Upvotes: 1

Views: 669

Answers (2)

Dimpurr Cheny
Dimpurr Cheny

Reputation: 1

Try like this:

HTML:

<header>
     <back></back>
     <logo></logo>
     <search></search>
<header>

CSS:

/* let logo display in center, and other use float */
/* for alternative way, use flex box and justify-content: space-between */
header { overflow: visible; text-align: center; }
back { float: left; }
/* decrease logo high and overflow it */
logo { margin-bottom: -20px; }
search { float: right; }

Upvotes: 0

miqueloi
miqueloi

Reputation: 698

I think you should do something like this inside your header component:

.container {
 overflow: visible;
}

.center-logo {
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 height: 150px; (or more)
}

Upvotes: 1

Related Questions