I came for this feature, to add a background image, ended up starting from the first video because i like the way he explains everything... good job and you helped me a lot to understand a lot of things
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(
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'; import {MaterialIcons} from '@expo/vector-icons'; export default function Header({navigation, title}) { const openMenu =()=>{ navigation.openDrawer(); } return (
An idea to fix the white left corner not taking the background image: Add it on homeStack and aboutStack files on each Stack.Screen you want headerBackground: () =>
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!
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 : ({ header: () => , })} /> In the header.js : Do some styling for the header : import React from "react"; import { StyleSheet, Text, View, Image, ImageBackground } from "react-native"; import { MaterialIcons } from "@expo/vector-icons"; const header = ({ navigation, title }) => { const openMenu = () => { navigation.openDrawer(); }; return (
{title}
); }; 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, }, });
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 ♥
Issues with images, there seems to be too many parameters involved to adjust each and everything in display of components, images,. The message from Mustafa Aga, above helped me in understanding the various parameters and settings
I Love you dude! Could you make the plans of this series? I want to know when would that series ends and how am I progressing currently along the full series plan
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.
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
Hi Shaun. In the Lesson 25, some people including me couldn't setting the width and height 100% to the header. I don't know why this is happening. In this link prnt.sc/ql2570 I've printed my phone screen (it's an android). I've downloaded your project and the dimensions are right. Maybe your npm dependencies are "older" than nowadays and React updated some of them.
It might be too late but I found a post for a solution to the 100% problem github.com/react-navigation/react-navigation/issues/7010 , this is what I ended up with the styles for the header with something like this: import React from 'react'; import { Text, View, StyleSheet, Image, ImageBackground } from 'react-native'; import { MaterialIcons } from '@expo/vector-icons'; import { useRoute, useNavigation } from '@react-navigation/native'; export const Header = () => { const route = useRoute(); const navigation = useNavigation(); const params = route.params; const title = params ? params.title : 'Home'; const openDrawer = () => navigation.openDrawer(); return (
Shaun, are you currently in a project or working an office job or something? How do you manage your time in in producing such awesome tutorials?
I came for this feature, to add a background image, ended up starting from the first video because i like the way he explains everything... good job and you helped me a lot to understand a lot of things
You are the only person on the internet that actually knows how to do this lol
Muchas Gracias! Donde mucha gente decia que no se podia, usted explica de forma excelente y facil como hacerlo. 👍👍👍
YOOO not even CHATGPT could help me and I watched this vid and got it in a sec, you goated
Hey Shaun! Your tutorials are awesome. I love them. Can you please make tutorials on Material-UI
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(
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
elevation: 3,
borderRadius: 1,
},
})
2. stack.js
import HeaderBg from '../shared/headerBg'
options={{
headerTitle: () => ,
headerBackground: () =>
}}
*header.js - just replace ImageBackground with View
This is worked for latest react navigation version. Thanks
Hi!
Please send me drawer work of your's and Header for v5,, I am kinda lost after Drawer
SO HELPFUL. I WAS STRUGGLING WITH THIS SO MUCH THANK YOU THANK YOU THANK, YOU'RE SUCH A BLESSING
That's brilliant to hear, glad it was helpful Leo!
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';
import {MaterialIcons} from '@expo/vector-icons';
export default function Header({navigation, title}) {
const openMenu =()=>{
navigation.openDrawer();
}
return (
{title}
)
}
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'
}
});
I too had some problems with images and bkg images, Thanks for putting the full 'Header' coding on line. It works .Thanks a lot
the header image is fucked here, it should be smaller but it's gigantic
Thank u
@@feliciaf8 If you want I can send you the whole repository cause I think later it needs some other edits.
For those who are facing issue with headerBackground.
const HomeStack = createStackNavigator(screens, {
defaultNavigationOptions: {
headerTintColor: "teal",
headerStyle: {
backgroundColor: "#eee",
height: 80
},
headerBackground: (
)
}
});
An idea to fix the white left corner not taking the background image:
Add it on homeStack and aboutStack files on each Stack.Screen you want
headerBackground: () =>
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!
same issue with me
ALRIGHT THEN GANG 🔥🔥
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 :
({
header: () => ,
})}
/>
In the header.js :
Do some styling for the header :
import React from "react";
import { StyleSheet, Text, View, Image, ImageBackground } from "react-native";
import { MaterialIcons } from "@expo/vector-icons";
const header = ({ navigation, title }) => {
const openMenu = () => {
navigation.openDrawer();
};
return (
{title}
);
};
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,
},
});
Thank uu🌟❤️
You’re welcome 😊
Great tutorial!!!!
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 ♥
The best of the best, keep going 😍
ok Gang!! so funny . First time heard Gang !
Hello, where can I find such images, do they have a specific name?
anyone else having issues with the image not fitting the entire width and height of the header?
Issues with images, there seems to be too many parameters involved to adjust each and everything in display of components, images,. The message from Mustafa Aga, above helped me in understanding the various parameters and settings
I Love you dude! Could you make the plans of this series? I want to know when would that series ends and how am I progressing currently along the full series plan
Hey, thanks :). There are another 7 videos in total after this one! Should all be up within a week.
@@NetNinja Yeahhh!!!!
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.
I have a question, can i add borderRadius on this imageBackground? i tried but i didnt get
Awesome...thankx Ninja..!!
is there a way to use SVG as a background image?
tqsm for this
How to add an image to a flat List from a different folder?
🔥🔥🔥
yeahhh thanks!! 2021 febrary
thank you
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
I had, but I m having issue in the icon too
I dare you to explain animation / sprites with images.... ;-)
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.
Hi Shaun. In the Lesson 25, some people including me couldn't setting the width and height 100% to the header. I don't know why this is happening. In this link prnt.sc/ql2570 I've printed my phone screen (it's an android). I've downloaded your project and the dimensions are right. Maybe your npm dependencies are "older" than nowadays and React updated some of them.
I've upload the entire project until now as well -> github.com/raphabarreto/gamezone/ - Thanks for your patience 🙏
I've published a workaround to that if you are interested, it's in Lesson 25 comments
It might be too late but I found a post for a solution to the 100% problem github.com/react-navigation/react-navigation/issues/7010 , this is what I ended up with the styles for the header with something like this:
import React from 'react';
import { Text, View, StyleSheet, Image, ImageBackground } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';
import { useRoute, useNavigation } from '@react-navigation/native';
export const Header = () => {
const route = useRoute();
const navigation = useNavigation();
const params = route.params;
const title = params ? params.title : 'Home';
const openDrawer = () => navigation.openDrawer();
return (
{title}
);
};
const styles = StyleSheet.create({
headerContainer: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: 'white',
width: '100%',
height: 70,
paddingTop: 25,
paddingHorizontal: 25
},
texHeader: {
},
headerContent: {
flex: 4,
justifyContent: 'center',
flexDirection: 'row'
},
drawer: {
},
headerLogo: {
height: 28,
width: 28,
marginRight: 10
}
});
@@VictorRivas_vctr This still doesn't resolve issue in my Env. Can you help?
@@harshalthakre825 Do you have a github repo or a gist? Disclaimer I am fairly new to React Native but yes, I will be willing to help :)