React Native Tutorial #18 - Global Styles

Key Takeaways

okay let my friends so in the last video I showed you how we could use a custom fonts and we're now using that font right here inside the home components for the title text which is this and we can see that on the screen so this all works now say I wanted to use this font family and this title text style on each of these text components right here in each different component about and review details and home then that would mean copying this style stuff and pasting it here and here and anywhere else that we wanted to use it now to me that stinks of code duplication that we don't really need to do and when we come to update this in the future if we change the title text styles we'd have to change it in every place we'd copied it to so it would be better if we had one central place where we declare a lot of different global styles then we can tap into those from any component and use them rather than just duplicating our code over and over again in different components so that's what we're gonna do now we're gonna create some kind of global style sheet if you like it's not really a style sheet but you know what I mean one of these which is global and then we can import that into any component that needs it and use those Styles so let us first of all go to the root directory down here and create a new folder and I'm gonna call this style so you don't have to store it in a styles folder I'm just doing this to keep everything organized now in here I'm gonna create a new file and I'm gonna call this global dot J s so this global GS file is going to contain all of the different styles that we'll use in different components so we first of all need to import style sheet because we're gonna construct this the same way we'd construct this thing right here so let's import first of all style sheet from react - native now we still need to create a style sheet in exactly the same way so in fact I'm just gonna copy this and I'm gonna paste it over here and we have now our container and we have our title text now I'm not going to call these styles I'm going to call them global styles like this and I'm going to export this as well so export Const global styles which is equal to stylesheet creates and then these are going to be the global styles so the title text right here is font family you need to bold the font size is 18 I'm also going to apply a color property to this so color oops if I can spell it is going to be 3 3 3 which is a deepest gray now we also have the container we use that in several different components so it makes sense to have this inside the global stars as well the padding I'm going to reduce to 20 pixels and then I'm also going to apply a flex property to this as well of once so that all the time our container views are taking up all the available space on the screen so there's two global styles I'm gonna do one more and that is going to be for a paragraph text so I'm going to call this paragraph and inside I'm gonna say margin vertical is going to be 8 pixels and then also the line height is going to be 20 so if we have any paragraph text like an article or the text on the about screen then we can use this paragraph style right here so we have those styles now and we can just import them wherever we need them so I could go now to the home screen over here and import this at the top first of all so import and it's going to be global styles from and it's dot dot come out of the current folder which is the screens folder then forward slash and we want to go into the Styles folder forward slash global okay so we've imported that and that now means we can use global Styles which is this constant right here so instead of saying style container I could say global Styles dot container and instead of style title text global Styles title text and I could delete these styles down here because we don't need them in this component anymore so if I save this and it refreshes over here on the right hopefully it should look exactly the same and it does this works awesome so let's do the same thing now inside the other components let's go to about and paste in the import this we can change to global styles container and I can delete this thing right here we could apply the title text to this as well but we'll do that later when we come to the about screen and I'm going to go to the review details again I can paste in the export or the import rather and then change this to global styles like so and remove this now at the minute we're not rendering any of these different components but you could do if you wanted to you could go to app KS and replace the home component we'd add about or review details and test this but believe me it is going to work we don't need to test that all we've done is changed the local styles were created right here for the global styles we've created over here we've imported those and we're using those instead and that makes more sense to me because now if we change these we can just change them in one single place and we can use them in any component or screen that we want to