for the problem of heigth and witdht 100% just had in header.js : import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { MaterialIcons } from '@expo/vector-icons'; import { Dimensions } from 'react-native'; export default function Header() { return (
i added "width:Dimensions.get('screen').width" , but the position of header title appeared has a left padding on Android simulator. Then i fixed it by adding " headerTitleAlign: 'center' " for Home Screen navigationOptions.
Amazing advices, just a doubt, how can I change the side of the default arrow on the top? change the side of the arrow to go back to the previous page ...
Your level of kungfu to break web concepts is more than awesome, am watching your tutorial while smiling, you deserve trillion subscribers. Be blessed man.
Hey gang, here is a solution I implemented for React Navigation 5 import React from 'react'; import { createStackNavigator } from '@react-navigation/stack'; import Home from '../screens/home'; import ReviewDetails from '../screens/reviewDetails'; import Header from '../shared/header'; const homeStack = ({ navigation }) => { const Stack = createStackNavigator(); return ( , }} />
width: '100%' and height: '100%' not Working in the new version of React Navigation. But i manage to fix it , add -- headerTitleAlign: "center" in "Home" Screen options (homeStack.js) then add height: '100%' this will fix height. {you can give a custom height value instead of these}. and width: Dimensions.get('window').width . Don't forget to import Dimensions from 'react-native' Note: this is a fix not a solution . This could break other thing . Share the real solution if you get it.
Has this been fixed in newer versions of react navigator? Because I am using version 6 and having the issue that my whole custom nav component inside header is shifted towards the right by about 5-10 pixels and I have no idea why because I have the same exact component outside my header as comparison and it shows as it should, no styling difference. So I think that it must come from some defaults in header styles that I don't understand yet.
You can use the HOC withNavigation. This HOC "inject" the navigation prop from the nearest parent. import {withNavigation} from "react-navigation"; function Header({navigation}) {} export default withNavigation(MyHeader); You don't need pass the navigation prop for every child or grandson
Welcome back, Shaun! Question for you: where can we find more info about this solution (and maybe other solutions) for giving the custom header access to navigation? Also, would this have worked by using withNavigation somehow?
i like this tutorial, but please mention the version of package you install so that we can still create app as mentioned in course without any version issues in future. :)
Here is my workaround about the header style: import React from 'react' import { View, StyleSheet, Text, Dimensions } from 'react-native'; import {MaterialIcons} from '@expo/vector-icons'; export default function Header({navigation, title}) { const openMenu =()=>{ navigation.openDrawer(); } return (
i added "width:Dimensions.get('screen').width" , but the position of header title appeared has a left padding on Android simulator. Then i fixed it by adding " headerTitleAlign: 'center' " for Home Screen navigationOptions.
By any chance do you have the code for homeStack.js? I'm having problems opening the drawer function with the icon, and I think it has something to do with headerTitle:
Amazing advices, just a doubt, how can I change the side of the default arrow on the top? change the side of the arrow to go back to the previous page ...
if header background color not fill ..then check you have already set background color in homeStack.js defaultNavigationOptions:{ headerTintColor:'#444', headerStyle: { backgroundColor:'red', height:60 } }
header won't be centered, but at least the icon and header won't be stacked and the solution is a lot simpler. just remove several styling rules: const styles = StyleSheet.create({ header: { flexDirection: 'row' }, headerText: { fontWeight: 'bold', fontSize: 20, color: '#333', letterSpacing: 1 } })
In react navigation V.6 it automatically adds the menu icon and there's no need to go all this long way just to open drawer with a button. Though it's understandable that this video is for almost 3 years ago and so, I don't mean that it's Mr Shaun's fault!
If you want to center the headerText, you should go to homeStack.js and after headerStyle you put this headerTitleAlign: "center" (do as the same in aboutStack.js). But I don't know how to put the hamburger icon to left of the screen. Until now, I haven't solved the 100% dimensions problem :/
@@ImranSheikh-kg4qd Yes. I think the problem isn't related to the code, It has something to do with installed packages, because I cloned his Github link, and It works perfectly fine.
If someone have problems with configuration, try to stick using lib versions same as the course, like expo 35 e etc. I'm having to fix some major problems on actual versions.
hello guys , maybe for you who just watching this recently will find that your title and icon are not on the right place , so i've been looking for the answer and i finally fix this . First i will copy Mykhailo Stepanov comment , you should change your navigationOptions on your home/aboutStack with this navigationOptions: ({ navigation }) => { return { header: () => } } and the second is , move your styles.header into your inner view , don't put styles.header as a wrapper(outer view) . Just adjust the rest , Goodluck #note ,you should add background color on your wrapper
I have the same problem, seems like it's because some things were added to the later versions of the libraries since this video has come out/was filmed. I still haven't found a fix working yet.
adding ´´ headerTitleAlign: "center" ´´ to defaultNavigationOptions in both aboutStack and homeStack seems to have fixed the centering of the title text for some.
@Rex Otavotoma Just wanted to add that Rex's solution worked for me. Also, I forget to import { Dimensions } from 'react-native'. After I did this everything worked.
The header's height and width do not behave normal. I used [header] instead of [headerTitle] in homeStack.js? Is it correct? const screen={ Home:{ screen:Home, navigationOptions:({navigation})=>({ header:()=> }) } }
LATEST VERSION CODE 01/06/2022 --------->>>>>>>> THIS IS THE ABOUTSTACK FILE , JUST DO THE SAME IN HOMESTACK FILE import { createNativeStackNavigator } from '@react-navigation/native-stack' import Header from '../shared/Header' import About from '../screens/About' const Stack = createNativeStackNavigator() const AboutStack = ({ navigation }) => { return ( , }} />
) } export default AboutStack AND THIS IS THE HEADER COMPONENT----------->>>>>>>>>> import React from 'react' import { View, Text, StyleSheet } from 'react-native' import { MaterialIcons } from '@expo/vector-icons' const Header = ({ navigation ,title}) => { const openMenu = () => { navigation.openDrawer() } return (
Can you please explain when you said "DO ThE SAME FOR HOMESTACK"? Also, could you please post the code for App.js and Drawer.js. I'm having too much trouble getting the icon for opening to get to work.
@@uicubes headerText:{ fontWeight:'bold', fontSize:20, color:'#333', letterSpacing:1, marginLeft:60 } try with this .Atleast u may get somewhat better result.Keep MarginLeft:60
flexDirection:'row', alignItems:'center', justifyContent:'center', // background color already set in defaultNavigationOptions no need here //backgroundColor:'red', }, headerText:{ fontWeight:'bold', fontSize:20, color:'#333', letterSpacing:1, } });
not judging but I think you are making it less readable by passing objects instead of just using const DrawerName and then making a componenet, its much more presentable that way, Im learning React and most people probably look into docs, docs stick with the convention I stated the way you do it is just confusing for someone trying to learn it
If anyone has successfully implemented the project till here, can you provide your GitHub/code link. My drawer closes itself as soon as I leave the screen and the hamburger is also not working.
Hello sir. I want to learn android development. But which will be best for android: flutter or react native. I am very confused. Thank you for your suggestion.
I know react previously .... I haven't find anything difficult still now. So if you absolutely new then try to find-out . if know react then react-native could be your choice.
Plz sir can you do a modern react native tutorial with react-native cli..?? I learned a lot with the help of your tutorials. please be kind enough to consider my request.
JUNE 2020 FIX: (I didn't get any of the other suggestions to work for me). To align the menu icon and the title correctly, I simply dropped all styling on the header and added textAlign: 'center' to the headerText. Icon style should stay the same with absolute positioning but I added zIndex: 1, since otherwise it is left under the title and is untouchable : const styles = StyleSheet.create({ header: { // width: Dimensions.get('screen').width, // height: '100%', // flexDirection: 'row', // alignItems: 'center', // justifyContent: 'center' }, headerText: { fontWeight: 'bold', fontSize: 20, color: '#333', letterSpacing: 1, textAlign: 'center' }, icon: { position: 'absolute', left: 16 , zIndex: 1 } });
here is how to pass navigation prop to custom Header in React Navigation v5 export default Navigator = (props) => { const { navigation } = props; return (
for the problem of heigth and witdht 100% just had in header.js :
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';
import { Dimensions } from 'react-native';
export default function Header() {
return (
{/* icon for the menu */}
GameZone
)
}
const styles = StyleSheet.create({
header: {
width:Dimensions.get('screen').width,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
headerText: {
fontWeight: 'bold',
fontSize: 20,
color: '#333',
letterSpacing: 1,
}
});
I left height: '100%' and this worked perfectly. Thank you!
Perfect
i added "width:Dimensions.get('screen').width" , but the position of header title appeared has a left padding on Android simulator. Then i fixed it by adding " headerTitleAlign: 'center' " for Home Screen navigationOptions.
Obrigado!,
Amazing advices, just a doubt, how can I change the side of the default arrow on the top? change the side of the arrow to go back to the previous page ...
Your level of kungfu to break web concepts is more than awesome, am watching your tutorial while smiling, you deserve trillion subscribers. Be blessed man.
Hey gang, here is a solution I implemented for React Navigation 5
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import Home from '../screens/home';
import ReviewDetails from '../screens/reviewDetails';
import Header from '../shared/header';
const homeStack = ({ navigation }) => {
const Stack = createStackNavigator();
return (
,
}}
/>
);
};
export default homeStack;
Excellent, thank you!
This works, thank you!
ahh thanks man ^_^
Thank you so much , it works!
Thank you dude. I mean really. THANK YOUUUUUUUU :-*
width: '100%' and height: '100%' not Working in the new version of React Navigation.
But i manage to fix it ,
add -- headerTitleAlign: "center" in "Home" Screen options (homeStack.js)
then add height: '100%' this will fix height. {you can give a custom height value instead of these}.
and width: Dimensions.get('window').width . Don't forget to import Dimensions from 'react-native'
Note: this is a fix not a solution . This could break other thing . Share the real solution if you get it.
I love you
Your method solves the issue, there are obviously many methods but yours was the simplest and it Works!
@@ruset-dewss4698 Obrigado!
yes exactly, i have created special component for width and height, and i exported them wherever i required it
Has this been fixed in newer versions of react navigator? Because I am using version 6 and having the issue that my whole custom nav component inside header is shifted towards the right by about 5-10 pixels and I have no idea why because I have the same exact component outside my header as comparison and it shows as it should, no styling difference. So I think that it must come from some defaults in header styles that I don't understand yet.
For those of you doing this in React Navigation 5 here is the way I used the Header component on the homeStack: }} />
reactnavigation.org/docs/headers/#setting-the-header-title here is the link to the documentation in case anyone wants to read it.
Thank you, I was look for this
I can actually create a production grade mobile app from here! Thanks man!
You can use the HOC withNavigation. This HOC "inject" the navigation prop from the nearest parent.
import {withNavigation} from "react-navigation";
function Header({navigation}) {}
export default withNavigation(MyHeader);
You don't need pass the navigation prop for every child or grandson
Thanks 😊. Need to install another package for v5.
Welcome back, Shaun!
Question for you: where can we find more info about this solution (and maybe other solutions) for giving the custom header access to navigation?
Also, would this have worked by using withNavigation somehow?
The latest version of DrawerNavigator already comes with a header and a burger menu icon.
i like this tutorial, but please mention the version of package you install so that we can still create app as mentioned in course without any version issues in future. :)
Finally! I've been waiting for this since last year. Thanks and you are awesome!
Here is my workaround about the header style:
import React from 'react'
import { View, StyleSheet, Text, Dimensions } 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: '100%',
flexDirection: 'row',
flex:1,
alignItems: 'center',
},
headerText: {
fontWeight: 'bold',
fontSize: 20,
color: '#333',
letterSpacing: 1,
height: '100%',
alignItems:"center",
},
icon: {
position: 'relative',
flexDirection:'column',
flex:0.5
}
});
i added "width:Dimensions.get('screen').width" , but the position of header title appeared has a left padding on Android simulator. Then i fixed it by adding " headerTitleAlign: 'center' " for Home Screen navigationOptions.
By any chance do you have the code for homeStack.js? I'm having problems opening the drawer function with the icon, and I think it has something to do with headerTitle:
This worked for me for my iPhone 11 expo UI .. Thanks ..
Amazing advices, just a doubt, how can I change the side of the default arrow on the top? change the side of the arrow to go back to the previous page ...
if header background color not fill ..then check you have already set background color in
homeStack.js
defaultNavigationOptions:{
headerTintColor:'#444',
headerStyle:
{ backgroundColor:'red', height:60 }
}
Does your app crash? changing `width:100%, height:100%` to `flex:1` fixed it for me.
What if u already have a burger icon for the drawer? The new React navigation has both the stack and drawer header on top of each other! Please help!
hi, were you able to find your way around this.....kindly assist if you can
@@ojitelikenechukwu3895 you need to add screenOptions={{ headerShown: false }}
@@filankzahmoul3494 thank you, il try this out and revert🙌
it worked....thanks
bro, where were you? missed your tuts, glad you're back
header won't be centered, but at least the icon and header won't be stacked and the solution is
a lot simpler. just remove several styling rules:
const styles = StyleSheet.create({
header: {
flexDirection: 'row'
},
headerText: {
fontWeight: 'bold',
fontSize: 20,
color: '#333',
letterSpacing: 1
}
})
hey thanks alot ,i have solved my navigation issue ...12:10 good explaination...
full solution with React Navigation 5, and hooks:
github.com/Paulius11/reactNativeTutorial/tree/lesson-25
Not all hero's wear capes!
Pls kindly help me paulius plssss
In react navigation V.6 it automatically adds the menu icon and there's no need to go all this long way just to open drawer with a button. Though it's understandable that this video is for almost 3 years ago and so, I don't mean that it's Mr Shaun's fault!
I like this one "we are going to do that in a second".
setting width and height to 100% does not make header to take all the space. does anyone have the same problem? expo sdk-36
I have the same problem :( anyone got a solution for this?
And I have the same issue
@@skomsdungeon It is possible to add left margin to the headerText style, for example marginLeft: 60
If you want to center the headerText, you should go to homeStack.js and after headerStyle you put this headerTitleAlign: "center" (do as the same in aboutStack.js). But I don't know how to put the hamburger icon to left of the screen. Until now, I haven't solved the 100% dimensions problem :/
windows or mac os ?
at 3:27 set { flex:1 } to make it fill the header instead of { height:'100%' , width:'100%' }
still doesn't work, the header doesn't take the whole space.
can You send snippet of the code?
@@osamagamal495 flex:1 - - not working for me also
@@ImranSheikh-kg4qd Yes. I think the problem isn't related to the code, It has something to do with installed packages, because I cloned his Github link, and It works perfectly fine.
@@osamagamal495 yes,Its happening for the New Version of React Navigation
Please, sir, show us what is the best way to solve the width/heigh problem.
If someone have problems with configuration, try to stick using lib versions same as the course, like expo 35 e etc. I'm having to fix some major problems on actual versions.
hello guys , maybe for you who just watching this recently will find that your title and icon are not on the right place , so i've been looking for the answer and i finally fix this . First i will copy Mykhailo Stepanov comment , you should change your navigationOptions on your home/aboutStack with this navigationOptions: ({ navigation }) => {
return {
header: () =>
}
}
and the second is , move your styles.header into your inner view , don't put styles.header as a wrapper(outer view) . Just adjust the rest , Goodluck
#note ,you should add background color on your wrapper
My header is not going to the center.???
The same happens to me. Please help me, how do I fix it?
I have the same problem, seems like it's because some things were added to the later versions of the libraries since this video has come out/was filmed.
I still haven't found a fix working yet.
adding ´´ headerTitleAlign: "center" ´´ to defaultNavigationOptions in both aboutStack and homeStack seems to have fixed the centering of the title text for some.
@Rex Otavotoma Just wanted to add that Rex's solution worked for me. Also, I forget to import { Dimensions } from 'react-native'. After I did this everything worked.
instead of passing navigation object as props to Header, i use useNavigation() hook in Header Component, it still work perfectly. Does it make sense ?
You r a Savior Ninja....you are on the top on many famous instructors at UDEMY ....Trust me
T H A N K S
What if I want the header to appear above the content, in a way I can see it through a transparent color, like a glass. Can I achieve such thing?
My screen freezes when going from DrawerNavigation to About and back to Home. Is there any solution?
The header's height and width do not behave normal.
I used [header] instead of [headerTitle] in homeStack.js? Is it correct?
const screen={
Home:{
screen:Home,
navigationOptions:({navigation})=>({
header:()=>
})
}
}
React-navigation V5 will not work with this, unfortunately. Great tutorial though!
LATEST VERSION CODE 01/06/2022 --------->>>>>>>>
THIS IS THE ABOUTSTACK FILE , JUST DO THE SAME IN HOMESTACK FILE
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import Header from '../shared/Header'
import About from '../screens/About'
const Stack = createNativeStackNavigator()
const AboutStack = ({ navigation }) => {
return (
,
}}
/>
)
}
export default AboutStack
AND THIS IS THE HEADER COMPONENT----------->>>>>>>>>>
import React from 'react'
import { View, Text, StyleSheet } from 'react-native'
import { MaterialIcons } from '@expo/vector-icons'
const Header = ({ navigation ,title}) => {
const openMenu = () => {
navigation.openDrawer()
}
return (
{title}
)
}
const styles = StyleSheet.create({
header: {
height: '100%',
width: '100%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
headerText: {
fontWeight: 'bold',
fontSize: 20,
letterSpacing: 1,
color: 'white',
},
icon: {
position: 'absolute',
left: 10,
color: '#fff',
},
})
export default Header
ya a life saver
Can you please explain when you said "DO ThE SAME FOR HOMESTACK"? Also, could you please post the code for App.js and Drawer.js. I'm having too much trouble getting the icon for opening to get to work.
When I click 3 desh icon then left side show my component but my home component up thake mobile time then I don’t show properly how can solved it
Finally......you are back again :)
still can do that, combine drawer and stack navigation in latest version?
yes, the similar like in the tutorial
No matter what I still do not get the openDrawer() to work. I am getting openDrawer from navigation in props, but still can not toggle it,.
Brilliant job!!!
2020 First Ninja Video. 😀
In On Press hamburger it is not working and The alignment of header text not in the center.Please help me
the alignment doesn't work with me
@@uicubes headerText:{
fontWeight:'bold',
fontSize:20,
color:'#333',
letterSpacing:1,
marginLeft:60
}
try with this .Atleast u may get somewhat better result.Keep MarginLeft:60
how to change the color of the drawer background
Thank you so much!
in header Stylesheet width:'100%', height:100%' work fine ' for react-native cli version v4
code is below
const styles=StyleSheet.create({
header:{
width:'100%',
// width:Dimensions.get('screen').width,
height:'100%',
flexDirection:'row',
alignItems:'center',
justifyContent:'center',
// background color already set in defaultNavigationOptions no need here
//backgroundColor:'red',
},
headerText:{
fontWeight:'bold',
fontSize:20,
color:'#333',
letterSpacing:1,
}
});
The same happens to me that Asad Abdul. Please help me, how do I fix them?
Thanks
MaterialIcons didnt work for me (I dont know why) but I tried it with SimpleLineIcons and it worked
how can i change the color of the header?
not judging but I think you are making it less readable by passing objects instead of just using const DrawerName and then making a componenet, its much more presentable that way, Im learning React and most people probably look into docs, docs stick with the convention I stated the way you do it is just confusing for someone trying to learn it
🔥🔥🔥
you are the best
please make a video on expo eject
Where do you live in UK?
If anyone has successfully implemented the project till here, can you provide your GitHub/code link.
My drawer closes itself as soon as I leave the screen and the hamburger is also not working.
The good tutorial but I have a problem. I have a mistake about auto alignItem center header "GameZone" so icon menu can't be on the left :(
I met a problem too. My title 'GameZone' on the left with a menu icon.
Hello sir. I want to learn android development. But which will be best for android: flutter or react native. I am very confused. Thank you for your suggestion.
@@okradze thank you sir.For your suggestion.
I know react previously .... I haven't find anything difficult still now.
So if you absolutely new then try to find-out .
if know react then react-native could be your choice.
@@ImranSheikh-kg4qd Thank you bro. I am trying to learn flutter for android development. Thank you.
thank you
Plz sir can you do a modern react native tutorial with react-native cli..?? I learned a lot with the help of your tutorials. please be kind enough to consider my request.
wont work with ios iphone notch though
import React from 'react';
import { StyleSheet, Text, View} from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';
import { Dimensions } from 'react-native';
export default function Header( {title,navigation} ) {
const openMenu = () => {
navigation.openDrawer();
}
return (
{title}
);
}
const styles = StyleSheet.create({
header: {
width:Dimensions.get('screen').width,
height: '100%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
headerText: {
fontWeight: 'bold',
fontSize: 20,
color: '#fff',
letterSpacing: 1,
},
icon: {
position: 'absolute',
left: 16,
}
});
({
headerTitle: () => ,
})}
You are amazing thanks
React Navigation v5.x
// Changes in routes/homeStack.js
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { MaterialIcons } from '@expo/vector-icons';
import Home from '../screens/home';
import ReviewDetails from '../screens/reviewDetails';
const { Navigator, Screen } = createStackNavigator();
export const HomeStack = ({ navigation }) => {
const openMenu = () => {
navigation.openDrawer();
}
return (
(
),
headerLeftContainerStyle: {
paddingHorizontal: 20,
}
}}
/>
);
};
export default HomeStack;
// Similar changes in routes/aboutStack.js
Thanks my guy
Thanks Vijay! This also worked in RN v6.x. I think is a great way of doing this custom header, as you don't need to create a new component.
Welcome !!
I am getting [X] icon instead of humburger icon
👏
Thanks
V5?
🙂🙂
谢谢
reactnavigation.org/docs/headers/#setting-the-header-title here is an link to v5 just in case you want to documentation.
JUNE 2020 FIX: (I didn't get any of the other suggestions to work for me). To align the menu icon and the title correctly, I simply dropped all styling on the header and added textAlign: 'center' to the headerText. Icon style should stay the same with absolute positioning but I added zIndex: 1, since otherwise it is left under the title and is untouchable :
const styles = StyleSheet.create({
header: {
// width: Dimensions.get('screen').width,
// height: '100%',
// flexDirection: 'row',
// alignItems: 'center',
// justifyContent: 'center'
},
headerText: {
fontWeight: 'bold',
fontSize: 20,
color: '#333',
letterSpacing: 1,
textAlign: 'center'
},
icon: {
position: 'absolute',
left: 16
,
zIndex: 1
}
});
That worked, thanks
Gu ohg
Any one plz help me
here is how to pass navigation prop to custom Header in React Navigation v5
export default Navigator = (props) => {
const { navigation } = props;
return (
}} />
)
}
this fucking navigation does not work