In the next few guides, we're going to start styling some more elements inside of our auth strings. But we before we do that, I want to take a quick aside and talk about a very helpful library that you're going to see in quite a bit of the Expo documentation called expo-constants. So right here on the screen, I have the expo-constants library documentation and I want to kinda point out to you a few of the key elements that you're going to see in quite a bit of documentation and that's the reason why I wanted to have a guide dedicated to this library.

So we first have the command to install it, which we will run momentarily and then also, here you'll see a list of all of the properties. Now, there're quite a few here. I'll say that you're only going to use a couple of them on a regular basis.

The first one that you're going to see used quite a bit and in fact, we're going to use this in the next guide is the Expo Constants.statusBarHeight. This is really helpful because as you know, there are all kinds of different types of phones that your app needs to run on. So if your app is running on a, say a Android device, then the statusBarHeight is different than if it was running on say a iPhone and even the different iPhones have different status bar heights and so it's very important to be able to make that dynamic and that is incredibly difficult to do programmatically. So the nice thing that we have here is if you call Constants.statusBarHeight here, then what you're going to be able to do is actually get the status bar height and that is going to be a number. So on some phones, that might be say 20. On others, it might be 50. It really just depends on the device that you're having to work with. But the nice thing is in our current app, so on our auth screen, we simply want to have that status bar height to be our top padding or our top margin and we don't want it to look weird or different on different devices and so because of that, we're able, because of this library, we're able to make that dynamic.

One of the other things that you'll see used quite a bit is the platform. So with the platform, what you can do is you can call the platform and then your code can know if it's running on Android or if it's running on iOS because there are times, especially when you get into more advanced features, that you might want to know and have some different behavior if the system is working on iOS. A few examples are when you're working with permissions. Android and iOS manage their permissions quite a bit differently. So Android preloads all of the permissions. So when you install the app, it says this app wants to upload images, it wants to have access to your camera, it wants to know about your location and you just hit Accept and you go on. iOS is completely different. You have to be declarative and you have to tell the app when you want the user to say yes, I want to allow the camera to be used and those kinds of things and we're going to get into that later on in this course but the nice thing is, when you have this Constants.platform, your app can actually know the device it's running on.

So I would definitely recommend taking a look at this documentation. For right now, let's just copy this command here and go back to Visual Studio Code, open up the terminal and run that. So that's going to go grab that expo-constants library and it's going to install it with yarn, we're going to make sure we have the right versions and then once we do that, in the next guide, we're going to be able to actually use that constant in our styles.

Code

expo install expo-constants

Resources

• Constants Documentation
• Source code