Customize Header Background Image

[rickardinho]

I am using React-Navigation for routing in a React Native app and was wondering how I can show a background image in the header as opposed to a background color. For a colour I can use the header object on NavigationOptions, but how can I nest an image in here?

[ghost]

React-Navigation doesn't support this, as you have to wrap your content in an <Image> tag to accomplish this, thus, you'll probably need a complete custom header component to accomplish this.

[rickardinho]

Do you have an example of how to do this? I'm finding the docs difficult to follow.

Thanks

[cstoddart]

I also would like to know how to add a header background image.

[DjangoGG]

+1

[23tux]

I'd also like to see an example of a custom header +1

[koenpunt]

Creating a custom header with an image is actually really simple.

By wrapping the Header with a view and placing an absolute positioned image in that view, the image will scale to its parent size.

Important is to set the backgroundColor of the default header to transparent.

const ImageHeader = props => (
  <View style={{ backgroundColor: '#eee' }}>
    <Image
      style={StyleSheet.absoluteFill}
      source={{ uri: 'https://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg' }}
    />
    <Header {...props} style={{ backgroundColor: 'transparent' }}/>
  </View>
);

And then use that component as header:

const SimpleStack = StackNavigator({
  Home: {
    screen: MyHomeScreen,
  },
}, {
  navigationOptions: {
    headerTitleStyle: { color: '#fff' },
    header: (props) => <ImageHeader {...props} />,
  }
});

Which would result in:

[bondanherumurti]

const Header = props => (
  <View style={{justifyContent: 'flex-end'}}>
    <Text style={{fontFamily: 'dosis-bold', color: 'white', fontSize: 25}}>COMPANY LOGO</Text>
  </View>
);

const ImageHeader = props => {
  console.log('ImageHeader props', props);
  return(
    <View style={{height: 10*vh, justifyContent: 'flex-end', padding: 5, backgroundColor: 'transparent'}}>
      <Image
        style={{width, height: 10*vh, position: 'absolute', top: 0, left: 0}}
        source={require('./assets/images/bg-header.png')}
        resizeMode="cover"
      />
      <Header {...props} style={{ backgroundColor: 'transparent' }}/>
    </View>
  );
}

 Home: {
      screen: Home,
      navigationOptions: {
        header: props => <ImageHeader {...props} />,
        title: 'Welcome',
        headerRight: <View><Text>Test</Text></View>
      }

This is my header it seems the tittle and headerRight is not working when i put custom header

[koenpunt]

Try removing the styles from the container view in the ImageHeader and see if it works then.

[petersuwara]

Can anyone advise on how to simple replace the headerTitle text with an Image. For us there is no need to fully replace the entire header, we just want to add an image instead of a title text for the header.

Thanks.

[koenpunt]

You can supply a React component as headerTitle which should do the trick.

See this issue for a bit more info; #1302

[florinpop17]

@koenpunt How does your Header component look like? Do we need to create a custom Header component ourself or we could somehow get the header component react-navigation uses?

Edited:
Got it... you've taken the Header component from 'react-navigation'. Didn't know they have that. Awesome. Thanks @koenpunt!

[mkraina]

Is there a way to have image in header and header to be partly transparent?
What I'm trying to do is to have gradient semi transparent header over a screen content (something like facebook app has), it should be the same as with image, only using LinearGradient component instead...
but I end up with this and don't know how to move the screen "under" the header

[angryBearLX]

@koenpunt Thanks for your solution. But it doesn't work well at V1.0.0-beta.19.
I add a headerStyle to resolve it.
like this:

[lfdantoni]

Hi @angryBearLX , I have the same problem, do you find a solution for that?
Thanks

[psyanite]

@angryBearLX You saved my life.

[fahadhaq]

EDIT

Have it working now. I needed to import Header from react-navigation. For some reason I was creating another const variable called Header and using that. Silly me. Thanks everyone :)

[brentvatne]

moved to website repo as this belongs in documentation: react-navigation/react-navigation.github.io#8

[gwl002]

There is a prop named headerBackground can do the work.
` LoginWithPincode:{
screen: LoginWithPincodeScreen
},
Test:{
screen: TestScreen
},
Onboarding:{
screen: OnboardingScreen,
},
ActivationStack:{
screen: ActivationStack,
navigationOptions:{
header:null
}
}
},{
initialRouteName: "Onboarding",
//initialRouteName: "VeryCode",
mode:"card",
navigationOptions:{
headerStyle: {
elevation: 0,
backgroundColor: 'rgb(86,215,198)',
...Platform.OS === "android"?{ paddingTop: StatusBar_HEIGHT+10,height: HEADER_HEIGHT}:{},
},
headerTintColor: '#fff',
headerTitleStyle:{
textAlign: 'center',
flex:1,
alignItems:'center',
fontSize:18,
fontWeight:'100'
},
headerBackground:<Image source={require("../../images/btn_header.png")} style={{resizeMode:"cover",height:HEADER_HEIGHT}} />
}

})`