React native elements header background image

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>
        ) 
    }
}

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.