- Read Tutorial
- Watch Guide Video
Whenever you're building out an application, you are typically gonna have a style guide or a design that you're gonna have to implement and color is a very important component with that, and so because of that, we wanna make sure that we are able to call the exact set of colors from anywhere in the application whether it's a text link in one component like a button component or if it's in the rest of our set of style sheets, and we want them to all match up.
For example in our bottom tab styles, let's imagine that we had some kind of hexadecimal color here for the background, so I'm gonna use one of them that we'll eventually be using which is gonna be #33363a. So if I hit Save here, you can see this is a nice kind of charcoalish blue color,
and this would be very hard to memorize, so any time that you wanted to use that color which is gonna be common throughout our application, you'd have to go back and reference that.
That's really a bad idea. We can do a much better job of that by using variables and exporting and importing them properly. So let's walk through how to do that and as we do, hopefully you're gonna get some additional insight on how the importing process works with tools like JavaScript and Webpack and Yarn and those kinds of things. So you may learn something about that, not just how to build out this color palette.
So I'm gonna open up the side here and inside of our styles directory, I am going to create a new file and for this one, I'm just gonna call it colors.ts. Now, inside of here, what I can do is a series of export statements. So let's use this one as an example. We know we want to get this variable or we wanna store this in a variable and we want this to be available from any part of the application that needs it. So the way you can do that is by saying export const and then I'm gonna call this variable primary and I'm just gonna set it equal to that string I just copied.
Now, up until this point, every time we've said export, we always followed it up with export default. But by saying export const, what we are gonna be able to do is we're gonna be able to put a full list of variables here, and then any part of our application can import this file and then extract out the variable that we wanna work with. This is exactly the same way that it works with code libraries like React Native.
So the same way that we pull in the style sheet, what that means is that in some spot, in the React Native code base, there's a statement that says export style sheet, and that's how we are able to import it, just like we are doing right here. So I'm gonna save this file here, this colors file, and now inside of this bottom tab styles, let's say I want to import but now I'm not going to say something like primary, not by itself. I'm gonna wrap it up in curly brackets. So now I can say import primary from and then inside of a string say dot dot slash colors and that's it.
bottomTabStyles.ts
import { primary } from "../colors";
And now, I can call primary, just like a normal variable here. So hit Save, you can see everything there is still working, so this is really cool. You will be able to put all of the colors and anything like that that you need right here in this file and obviously you can do this in any file, so anytime you have a shared library, so a great example that I do in a lot applications is say that I have some helpful text formatting function, so these don't have to be variables that are equal to a string, you can do this with functions or components or anything like that.
I will place those all in one file, and then I can import them just like we did right here. So we're gonna be doing this throughout the course. So while we are doing this, I'm gonna swap over to GitHub here and I'm gonna pull in the set of colors, all of the colors that we're gonna be using.
So you can get these inside of the source code and I'll provide a link to that and so now you'll have all of these variables. So you'll see we can call primary, where we can go dark, warning, highlight, or light gray, so we can test this out.
So say we wanted to see what highlight look like, we can pull that in just to our list. So now we can also bring in primary, or highlight in addition to primary. Hit Save, and you can see that gets swapped out for this highlight color.
So we now have a full style guide for our colors that we can use anywhere in this application and we will be using this as we build it out.
So great job if you went through that. I definitely recommend that you pull down each one of these colors, experiment with pulling them in here, and also I'd like you to take a little bit of time and play around with creating other files or other components and importing these colors, and follow the same pattern and then use those in other components, just so you can get used to and get practice doing it yourself.
In the next guide, we're going to start building out and implementing the styles for this bottom tab bar, so it can start to appear down here below all of the content and it'll look like a traditional mobile type of tab bar.