React native elements header background image - react-native

Question

I made a header using react native elements, and I want to add background image into it. Is there anyway to do it?
I am using react-native-elements: "^0.19.1"
Here is my header code
render() {
return (
<View style={{ paddingTop: Constants.statusBarHeight, backgroundColor: color.light_grey }}>
<Header
leftComponent={this.props.left ? this.props.left : <IconWrapper name='menu' color='black' size={28} style={styles.icon} onPress={() => Actions.drawerOpen()} />}
centerComponent={<Text style={styles.headerText}>{this.props.title}</Text>}
rightComponent={this.props.right ? this.props.right : <IconWrapper name='handbag' type='simple-line-icon' color='black' size={28} style={styles.icon} onPress={() => Actions.BagContents()} />}
outerContainerStyles={[styles.headerOuterContainer, { height: 0.08 * windowHeight() }]}
/>
</View>
)
}
}

Answer 1

You can always create your own <Header/> component, probably will take you more time but you will be able to understand it and edit it as you like. I created a simple Header component to show you how you can accomplish adding a background image to your header. See the snack #abranhe/stackoverflow-56729412
Header.js
import React, { Component } from 'react';
import { View, TouchableOpacity, StyleSheet, Dimensions, ImageBackground } from 'react-native';
export default class Header extends Component {
renderContent() {
return (
<View style={styles.content}>
<View style={styles.left}>{this.props.left}</View>
<View style={styles.center}>{this.props.center}</View>
<View style={styles.right}>{this.props.right}</View>
</View>
);
}
renderHeaderWithImage() {
return (
<ImageBackground style={styles.container} source={this.props.imageSource}>
{this.renderContent()}
</ImageBackground>
);
}
renderHeaderWithoutImage() {
return (
<View style={[{ backgroundColor: '#f8f8f8' }, styles.container]}>
{this.renderContent()}
</View>
);
}
render() {
return this.props.image
? this.renderHeaderWithImage()
: this.renderHeaderWithoutImage();
}
}
const styles = StyleSheet.create({
container: {
top: 0,
position: 'absolute',
width: Dimensions.get('window').width,
backgroundColor: '#f8f8f8',
borderBottom: 1,
borderColor: '#f8f8f8',
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.5,
},
content: {
width: '100%',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginTop: Dimensions.get('window').height * 0.03,
height: Dimensions.get('window').height * 0.045,
},
left: {
marginHorizontal: 5,
},
center: {
marginHorizontal: 5,
},
right: {
marginHorizontal: 5,
},
});
and then on when you want to use the Header component you can set the image prop to true, eg:
import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Ionicons } from '#expo/vector-icons';
import Header from './components/Header';
export default () => {
return (
<View>
<Header
image
imageSource={{ uri: 'https://yourimage.png' }}
left={<Ionicons name="md-arrow-round-back" size={25} />}
center={<Text>Projects</Text>}
right={<Ionicons name="ios-camera" size={25} />}
/>
</View>
);
};
and then if you set the image prop to false you will remove the image from the background.
<Header
image={false}
imageSource={{ uri: 'https://yourimage.png' }}
left={<Ionicons name="md-arrow-round-back" size={25} />}
center={<Text>Projects</Text>}
right={<Ionicons name="ios-camera" size={25} />}
/>

Answer 2

There is ReactNative's component ImageBackground you can use it.
like this,
<ImageBackground source={...} style={{width: '100%', height: '100%'}}>
<Header
leftComponent={this.props.left ? this.props.left : <IconWrapper name='menu' color='black' size={28} style={styles.icon} onPress={() => Actions.drawerOpen()} />}
centerComponent={<Text style={styles.headerText}>{this.props.title}</Text>}
rightComponent={this.props.right ? this.props.right : <IconWrapper name='handbag' type='simple-line-icon' color='black' size={28} style={styles.icon} onPress={() => Actions.BagContents()} />}
outerContainerStyles={[styles.headerOuterContainer, { height: 0.08 * windowHeight() }]}
/>
</ImageBackground>
You can always style it your way.

Answer 3

assuming you are using react-navigation
You need to add a custon header component in navigationOptions,
import { Header } from 'react-navigation';
static navigationOptions = ({ navigation }) => {
return {
header: (props) => <View >
<LinearGradient
style={{ height: '100%', width: '100%', position: 'absolute' }}
start={{ x: 0, y: 1 }} end={{ x: 1, y: 0 }} colors={['#1A9EAE', '#4EAE7C']}
/>
<Header {...props} style={{ backgroundColor: Colors.transparent }} />
</View>,
}
}

Answer 4

This works for me.
<Header
backgroundImage={require("../../assets/images/btn-header-background.png")}
centerComponent={{
text: i18n.t("stats.title"),
style: { fontFamily: "FunctionLH", fontSize: 30, color: "#fff" }
}}
containerStyle={{
backgroundColor: "transparent",
justifyContent: "space-around"
}}
statusBarProps={{ barStyle: "light-content" }}
/>