Nativebase: How to make a background image header

Created on 23 Jul 2017 · 3Comments · Source: GeekyAnts/NativeBase

Hi,
I try this code to define image as background header but i don"t get correct result :
<Image source={require('./images/bg-header.png')} > <Header> <Left> <Button transparent> <Icon name='arrow-back' /> </Button> </Left> <Body> <Title >Header</Title> </Body> <Right> <Button transparent> <Icon name='menu' /> </Button> </Right> </Header> </Image>
How can i fix it please

Source

sihemhssine

Most helpful comment

@Geeksihem Try this

<Image  source={require('./images/bg-header.png')}  style={{ height: (Platform.OS === ios) ? 64: 56, width: null }}>
  <Header  style={{ backgroundColor: "transparent" }}>
    ......
  </Header>
</Image>

shivrajkumar on 2 Aug 2017

👍3 ❤2

All 3 comments

@Geeksihem Try this

<Image  source={require('./images/bg-header.png')}  style={{ height: (Platform.OS === ios) ? 64: 56, width: null }}>
  <Header  style={{ backgroundColor: "transparent" }}>
    ......
  </Header>
</Image>

shivrajkumar on 2 Aug 2017

👍3 ❤2

@shivrajkumar
This code doesn't work.

<Image  source={require('./images/bg-header.png')}  style={{ height: (Platform.OS === ios) ? 64: 56, width: null }}>
  <Header  style={{ backgroundColor: "transparent" }}>
    ...
  </Header>
</Image>

I'm using ImageBackground and works properly:

<ImageBackground source={require("../../assets/head-bg.png")} style={{width: "100%", height: 90}}> 
 <Header style={{
    backgroundColor: 'transparent', 
    elevation: 0,             // Remove shadow on Android
    shadowOpacity: 0         // Remove shadow on iOS
   }}>
    ...
  </Header>
</Image>