React Native Tutorial #28 - Background Images

Hey gang, in this React Native tutorial I'll be showing you how we can add a background image to the header component we created earlier.
----------------------------------------

🐱‍💻 🐱‍💻 Course Links:

🐱‍💻 🐱‍💻 Other Related Courses:

[rishabsharma]

Hey Shaun! Your tutorials are awesome. I love them. Can you please make tutorials on Material-UI

[asddd]

YOOO not even CHATGPT could help me and I watched this vid and got it in a sec, you goated

[MrXXxPainxXx]

For navigation v5, I use headerBackground to match the height and width of the app bar but it also occupies status bar.

1. headerBg.js
import React from 'react';
import { StyleSheet, ImageBackground, } from 'react-native';

export default function HeaderBg() {
return(
<ImageBackground source={ style={ styles.container }>

</ImageBackground>
)
}

const styles = StyleSheet.create({
container: {
flex: 1,
elevation: 3,
borderRadius: 1,
},
})

2. stack.js
import HeaderBg from '../shared/headerBg'


options={{
headerTitle: () => <Header navigation={ navigation } title='Gamezone'/>,
headerBackground: () => <HeaderBG/>
}}

*header.js - just replace ImageBackground with View

[MustafaAgaDev]

Since it wasn't working with my packages this is how i solved. Maybe someone else can need it too:
import React from 'react'
import { View, StyleSheet, Text, Dimensions, Image, ImageBackground } from 'react-native';

export default function Header({navigation, title}) {
const openMenu =()=>{
navigation.openDrawer();
}

return (
<ImageBackground
style={styles.header}

>
<MaterialIcons name="menu" size={28} onPress={openMenu} style={styles.icon}/>
<View style={styles.headerTitle}>
<Image style={styles.headerImage} source={require(
'../assets/heart_logo.png'
)} />
<Text style = {styles.headerText}>
{title}
</Text>
</View>
</ImageBackground>
)
}


const styles = StyleSheet.create({
header: {
width:Dimensions.get('screen').width,
height: '125%',
marginTop:-15,
marginLeft:-15,
flexDirection: 'row',
flex:1,
alignItems: 'center',
},
headerText: {
fontWeight: 'bold',
fontSize: 20,
color: '#333',
marginTop:15,
letterSpacing: 1,
height: '100%',
alignItems:"center",
},
icon: {
position: 'relative',
flexDirection:'column',
flex:0.5,
marginTop:15,
},
headerImage:{
width: 26,
height: 26,
marginHorizontal:10,
marginTop:15,
},
headerTitle: {
flexDirection:'row'
}
});

[silviovieira]

Hi! Because of the problem in lecture 25, we had another problem in this lecture. The background image does not apply properly. Could you please help us? Thanks a lot!

[samudrafaris]

I tried this as a solution for the background image for not taking 100% of the height. (React Navigation v5)
In the homeStack and aboutStack, change the headerTitle into header :
<Stack.Screen
name="Home"
component={Home}
options={({ navigation }) => ({
header: () => <Header navigation={navigation} title="GameZone" />,
})}
/>
In the header.js :
Do some styling for the header :
import React from "react";
import { StyleSheet, Text, View, Image, ImageBackground } from "react-native";
const header = ({ navigation, title }) => {
const openMenu = () => {
navigation.openDrawer();
};
return (
<ImageBackground

style={styles.header}
>
<MaterialIcons
name="menu"
size={24}
color="black"
style={styles.icon}
onPress={openMenu}
/>
<View style={styles.headerTitle}>
<Image

style={styles.headerImage}
/>
<Text
</View>
</ImageBackground>
);
};
export default header;
const styles = StyleSheet.create({
header: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
height: 80, //must specify the height
elevation: 3, //add elevation for shadow effect
},
headerText: {
color: "#444",
letterSpacing: 1,
fontSize: 20,
fontWeight: "bold",
},
icon: {
position: "absolute",
left: 16,
paddingTop: 10, //put some padding to push the icon a little bit
},
headerTitle: {
flexDirection: "row",
alignItems: "center",
paddingTop: 10, //same as icon
},
headerImage: {
height: 20,
width: 20,
marginHorizontal: 10,
},
});

[Fleshlight_Reviewer]

anyone else having issues with the image not fitting the entire width and height of the header?

[ankitvishwakarma]

Hey I have been following you for a while and loved your tutorial since I want to learn cross platform which is best flutter or react native please reply me ninja luv from India ♥

[ali.programmer]

Anyone having issue in background not having full width and height
Solution:
in homeStack.js and aboutStack.js, replace "headerTitle" with "header"
in Header.js change height from "100%" to 70

[franciscocorvalan]

Hello, where can I find such images, do they have a specific name?

[lanreadedara]

is there a way to use SVG as a background image?

[mifzeena]

How to add an image to a flat List from a different folder?

[poshiyaraj]

Whats your website, or something i can gets note from? I need notes for css styling, i watched all your css video, liked them, but i need something from which i can read, if you can help me with that i would really appreciate it.

[tanzimibthesam]

Sir a request to make some Tailwind CSS tutorial. I also have another request for you to make a node Js with express course in future.