React Native Tutorial #25 - Custom Header Component

okay that my friends so now we have this kind of setup with our draw and we can go between these two pages the hole and the about screen now at the minute we have to kind of slide that out to see it and the user might not necessarily know about that instead what I'd like is a little icon in the top left over here somewhere so that when we click it on either the home screen or the about screen that opens the draw instead of us just having to swipe like that which is a bit tricky okay so what we're going to do to accomplish this is our own header components will create a whole component for the header which is going to replace the content inside here now currently what we're doing is just passing in a title right here into the navigation options but instead we're going to replace this with a whole component so first of all let's create the component and to do that I'm going to place it in a new folder called shared so this shared folder is going to contain anything that might be shared between different files common components and the header is one of those because we're going to use it in the about stack and also in the home stack so let me create a new file now called header is and inside the header the first thing I want to do is just paste in a few imports so these things here are just react and style sheet text and view which we're going to use to make up our components and also material icons because we're going to use material icons for the little icon in the top left the burgh enough so first of all down here let's create the component export default and it's a function the function is header and inside we need to return some JSX okay so first of all we'll return a view and we'll apply styles to these as we go forward and then just create the style sheet at the end so the styles are going to be Styles header and this should be style not styles and then inside that view will now do another view and this is going to contain the text and this text is going to have a style prop and the style is going to be styles dots header text now up here I want to create now some kind of icon for the menu so the burger can have icon so that's what we're going to place here in the future for now we'll just leave it okay so now we have this basic components we can go ahead and create the styles so Const Styles is equal to stylesheet and then dot creates plus in an object and now let's create those styles so first of all the header itself which is the view surrounding all of the header and that is going to have a width of 100% it's also going to have a height oops yeah that's right of 100% so that means it's going to fill out all of the default header that the stack Navigator gives us remember we get this by default so we're not replacing the whole header here we already have that and we specified a height for that if we go to the home stack for example we can see down here we have the header style and height is 60 pixels so that comes as standard all we're doing is placing something inside it this thing and we're saying that this view should take up a hundred percent of the width and a hundred percent of the height of that default header that we get okay so the Flex direction now is going to be wrote because we're going to have things going from left to right in this at some point probably all right so now I want to align items to the center and remember a line items works in the cross axis direction now this right here is the main axis so a line items works in the column direction that means that whatever we place inside this right here is going to be centered vertically and we're going to do the same thing for the justify content property and that is going to be centered as well so it appears centrally horizontal as well okay so we have those styles now let's do the header text so what I'm going to do is actually just copy this from my repo and paste it in and go through these so header text then we have a font weight of bold font size of 20 a color of 333 which is a deep gray and let spacing of 1 so between the letters it just adds one pixel of space that's all stores okay so that's the basic head and component for now very simple we're just showing the header text for now except there's no text in here so let's just output game zone for now and what I need to do is figure out a way to show this header components instead of just showing the text which we see up here so the way we can do that is by going to the home stack first of all and right now we have this title property on both of these two different screens now I'm only going to concern myself with the home screen right here and also the about screen okay we don't need to have the header components on the review detail screen because we're going to keep that as it is and we're gonna have this little arrow at the top we don't want to replace any of that so we're just making a custom header component for the home screen and the about screen where we need that little icon to open the menu in the top left the first thing I'm going to do is get rid of these comments because they're just in the way a little bit and now instead of just placing a title in the home screen header like this instead what I want to do is replace this with the whole header component now the first thing I need to do to do this is import a few things I need to import the header so import header from and it's dots come out of the routes folder then into shared then I want the header so we've imported the header component the next thing I need to import is react because if we're going to render some kind of component here we need the react library to help us do that so import from react okay so we have those two things imported now essentially what I'd like to do is return some kind of component here so a function right that returns a header component the thing we just imported now we can't do this because the title expects a string not a function that returns a component but a string but what we can do is replace this title prop with a different prop and that prop is header title so this can be a function which can return a component so we've got rid of the title prop we no longer just want to put a string up here and instead we replace that with a header title that can take a function as a value which returns a component the header component we just created so now if I save this I'm gonna check it out over here cross my fingers and hope this works and now we can see the new title or the new header because it's in the center now okay so this here is this component right here and I can demo that by giving this a background color so let's say background color is now going to be I don't know red and save that and we should see a red block up here in the header now okay cool so now we have this component which is the header we also want to apply this header to the about screen because at the minute it's not going to work if I bring out the navigation and go to about then we still get the default header up there so now I'm going to go to the about stack in fact let me just copy these imports go to the about stack and paste those in because we need them in here as well then I'm going to replace this with header title which is a function and that function returns the header component so save this now and hopefully when we go to the about screen now it is going to show that custom header again so zoom out the draw go to abouts and now we see the custom header awesome so halfway there the next thing we need to do is add an icon over here which when pressed opens up this menu yeah so let's do that let's now go to the header again and to do that we need to use material icons now we already imported material icons at the top so all we need to do is place an icon right here so let us do a material icons component and in here the name of this component is going to be menu I found this on the x-bow Docs remember I showed you the website before where we could search for different icons and I found this from there so that is the name of the icon the size is going to be a little bit bigger than the default size I'll say about 28 and then we also need an on press Handler and we'll create a function to do this in a second I'm also going to give this a style property so style is equal to Styles dots icon okay so let's create some kind of on press Handler so up here I'm going to create a constant and that's called open menu since that's what it's going to do we could call this press Handler if you want to it really doesn't matter it's going to do the same thing inside don't know what this is okay so inside this function we need to use the navigation object which we've seen before right we've seen this to navigate to different screens in the app we're using the same navigation object here and we use a method on that called open draw now that opens up this draw right here but there is a problem with this at the minute and that problem is that we don't have access to this navigation object inside this component we don't get it by default inside this component remember we only get access to this object inside components that are registered as screens inside our navigation stacks so we don't get it in header because this is not a screen instead we need to figure out a way to pass that in and we're going to do that in a second before we do that let me actually just comment this out and we're going to style up this icon down here so let's go down here and say icon and this is going to be on the very left now I'm going to give this a position of absolutes so that we can position it on the very left and then from the left it's going to be 16 pixels let me just save this so we can see how it looks and okay we can't do that yet because something's not quite working okay so it's the on press Handler we have here we need to actually pass in this function to it because it's empty at the minute even though the functions not doing anything let's save that hopefully now we should see that icon and there it is and it should also be on the about screen as well there it is now at the pin hip it's not doing anything because like I said this open menu function is not currently doing anything and we need a way to figure out how to bring in this navigation object into the header now the way we can do that is by this right here being a function which returns this object instead of it just being an object directly and you'll see exactly why we do that in a second for now let me just grab this and what I'm going to do is make this into a function like so and that is going to return an object the object we just copied this thing right here okay now this function can now take in the navigation object we can destructor it from the value that we automatically get passed into this function so when navigation options is a function as a value it automatically gets access to this and now we have that navigation object we can pass it in as a prop to the header component so I can say the navigation is equal to the navigation object okay so now we've done that let me also copy this and go to the about stack as well and we'll place it in there okay so same again the value of navigation options is now a function we can D structure the navigation object from the value automatically passed into this function and then we can return this object with the header title and pass in the navigation as a prop so now we have that sorted we can now accept the navigation in here so it's on the props which we can D structure from so navigation like so and now this thing should work so let me save that and we'll preview this on the right in a second so now when I click this it should run this function use the navigation object to open the draw try that awesome works and try that again and it works now we go to the other screens there are a few details we don't get the header because we've not replaced that header with a custom component instead we still get the arrow so that still works it's just these two headers that we've replaced now there's one more little thing I want to do and that is the title up here it's the same on both screens at the minute I want to change that so that this shows game zone and this one shows about now how do we do that because we're hard coding that in right here well again what we could do is pass in ignore the prop so for the home screen the title could be game zone we want that to be the title and if I copy this and go to the about stuck we can paste that in there but change it to about games so it makes sense so now we're passing in a title prop as well so we can extract that up here like so and the title can be output dynamically or right here okay so now if we save we should get a dynamic title and both of those two different screens or let's hold our breath and hope there we go about game zone and game zone awesome so now we have our custom header sorted we are going to add more to this in the future to make it look a bit better but for now I want to move on and start to work on the design of this bit down here because currently it doesn't look great and to do that we're going to create a custom card component

Channel: The Net Ninja

Views: 92,261

Keywords: react native, react, react native tutorial, tutorial, react native for beginners, react tutorial, react native tutorial for beginners, beginners, react vs react native, custom header, header component

Id: C3oDJdlrEKE

Length: 14min 57sec (897 seconds)

Published: Mon Jan 06 2020