How to Set Global Styles in React Native

[00:00 - 00:21] Now that we have covered the atomic design pattern and the typography of the application, styles is the last piece before we start building the components as in the atoms, molecules, and the organisms. So styles will be based a lot on the typography, all the variables, the font size, the colors, everything that we use.

[00:22 - 00:33] We should have already defined in the typography. As we'll cover what we have seen earlier, it will cover styles for our default button, our secondary buttons, then how the input boxes are supposed to look.

[00:34 - 00:52] Additionally, it will also cover the paddings and the margins that we are supposed to add to a particular page or a component if a component has some margins inside and the space between the components. So all of this is going to be a part of styles.

[00:53 - 01:12] Now if you go back to the application and look into the styles folder, we have a global.tsx. And this is where we're going to define all the different styles, like we have styles for layout, the click to actions, fonts, the text boxes, the title subtitle in the paragraph and the text input.

[01:13 - 01:26] We'll start with these. And what we'll try to do is we'll use a lot of typography in this, like we are doing it here, but these values, ideally they should come from the typography.

[01:27 - 01:39] So we go and define those if they are not available or we'll use it. One thing what I've done is I've extended the typography a little to incorporate for most of these use cases.

[01:40 - 01:45] But as I said, this is supposed to be a base setup and we can build on top of it. So let's do that.

[01:46 - 01:47] And we move ahead. Let's define all of these.

[01:48 - 01:51] Let's get started with that. We have a layout and it's mostly correct.

[01:52 - 01:58] The background correct is set to default. That is white and the padding, the padding needs to come from typography.

[01:59 - 02:04] So let's do that typography dot. So I've defined this spacing dot page.

[02:05 - 02:13] So if you go to this, it says that at the page level, you need to have a spacing of 16. And for shadows, what I've done is I've declared a global shadow.

[02:14 - 02:31] So wherever we use shadows in the application for buttons or for icons or something else, they all need to be consistent. So we'll just extend it from that type of ref dot shadow.

[02:32 - 02:43] So as you see the global.tss, we'll start using the typography a lot more. So let's look at next CTA primary and hide again.

[02:44 - 02:55] This is supposed to come from typography dot. Parton dot primary dot hide.

[02:56 - 03:11] So that is the whole idea that we define everything in the typography and bare minimum supposed to come into the styles. Now in the application, these are all the global styles.

[03:12 - 03:23] I'll go ahead and change the rest of it. There's also styles along with the components, like this is a home component and there's a style file here of ID need.

[03:24 - 03:36] This file should be as many of possible and in a perfect scenario, there will be absolutely no styles and it is achievable. So that requires a cohesion between the design and development.

[03:37 - 03:49] There needs to be a few iteration before we can achieve this kind of clarity, but it is doable and we are going to do that in this particular application. One more thing.

[03:50 - 04:02] If you do have to put styles for some reason, I find them putting along with the component easier. Now in web applications generally, we put all the styles together and then bundle them, but that's not the case with react native.

[04:03 - 04:17] The styles go hand in hand with the component that we are building and generally, whenever we're trying to make any changes to the application, the styles are required at that time. So given that I kept the styles along with the components.

[04:18 - 04:22] So let's see what we have here. There's the button primary and button secondary.

[04:23 - 04:53] Let me just go ahead and add one to the home screen and be able to see that or maybe we just name this one as button secondary and once we save, we'll see the changes. If their content is not showing up in the middle and we can fix that, we'll just go to secondary and we'll say justify content center and that should do it.

[04:54 - 05:06] Yeah. Let's also define a few of these how the titles and the subrattled and the paragraphs that we had in the designs, if you recall.

[05:07 - 05:14] So we had these titles, subtitles and paragraph texts. So we should define styles for that.

[05:15 - 05:31] I have already added some text and let's just see how typography and styles are going to help us achieve this. So let's just add some style to it and we'll say global dot.

[05:32 - 05:49] This is a font dot title and let's save it. So yeah, that mostly does it actually what and if we go back to the definition, we have a font size and if we look at it, yeah, that's mostly that's it for the font size.

[05:50 - 05:55] It's a little bigger. So probably we can adjust that and you can see what's happening.

[05:56 - 06:02] Right. Ideally, if this definition would have come from the design team, it would have never have been incorrect and we're still not sure whether it's matching or not.

[06:03 - 06:08] So we put in 24, but let's just go ahead with that. Next, let's try to do the see all one.

[06:09 - 06:23] So I'll name that as a subtitle. So we'll say style equals global dot, fonts dot subtitle.

[06:24 - 06:26] Let's save that and let's see how that looks. Okay.

[06:27 - 06:32] Yeah, that is okay. The font size also looks okay to me.

[06:33 - 06:43] And finally, we have the paragraph. So I'll do a body.

[06:44 - 06:46] Just save it. Okay.

[06:47 - 06:49] So let's check for body. We have color as default.

[06:50 - 06:53] That's white. That's not correct.

[06:54 - 07:10] So for body, we have color this one. Let's just change it to that for body will change it to paragraph and once we save it, we have the right color.

[07:11 - 07:25] And the font size needs to change. So we just saw how defining these typography and global styles is going to really ease the process for us.

[07:26 - 07:37] Now when we build these screens, we'll start with atom the molecules. And when we build these screens, we already have a lot of typography defined for these elements when we use them.

[07:38 - 07:49] So for example, when we start building this carousel, we would already have the title for it for this product widget. We will know what element to use for particular title and text.

[07:50 - 07:53] And probably for price, we'll have to build something else. But we can do that.

[07:54 - 08:02] We already have a custom text and we'll have something for price to. We'll keep adding to typography wherever required.

[08:03 - 08:14] But over the time, the number of new attributes that we need to add should reduce drastically. Otherwise, we need to check if you're defining multiple primary or multiple secondary colors.

[08:15 - 08:25] And similarly for typography, we already have setups for text boxes and click to actions and fonts and text and text inputs. So that should mostly cover a lot in the application.

[08:26 - 08:31] What we probably need to add for is the page layouts. It's very basic right now.

[08:32 - 08:36] that should be it. Thank you and see you in the next module.