Upgrading Expo Dependencies
Before we continue to build out the rest of our authentication system, I wanna take a quick aside in this guide and show you how to fix some warnings that you might see as you're building out your applications.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

These are gonna be pretty standard whenever you are starting to run the server. You may have already seen them depending on the version of Expo and React that you're using. I'm gonna show you right here If I type expo start, which will start up the simulator or it'll start up the server, you'll see right here that we have a few warning messages.

large

So I'm going to stop the server and I'm gonna scroll up and you can see and read what it says. It says some of your project's dependencies are not compatible with currently installed expo package version. This isn't a huge issue, this is just expo giving us a little bit of guidance to know that it'd be a good idea to upgrade some of these packages.

If you don't do it, some of the side effects might be your app accidentally crashing at times when it doesn't really even make sense, just because there's a version conflict. You also would run into an issue depending on the type of package that's being used where Apple or Android might even reject or at least, send a warning when you try to upload your app to the App Store because they're recognizing a package that's out of date.

So let's fix that right here and it tells us exactly what we need to do. It tells us the list of the three components or the three libraries we need to install and it says to fix this, just run expo install and then the package-name. We can actually run all three of these at the same time. So I'm just going to copy this first one which is react-native-gesture-handler. So I'll say expo install.

I'll paste that in and then separate this by a space. Then next, I'm gonna copy this react-native-safe-area-context. I'm gonna paste that in. And then lastly, the react-native-community/masked-view and make sure you also include the @ symbol at the beginning, and let's install this.

Terminal

expo install react-native-gesture-handler react-native-safe-area-context @react-native-community/masked-view

The way this works is expo's gonna go out, it's gonna find each one of those packages, which we already have and it's gonna find the correct version that the rest of our application needs; and so it looks like everything there worked properly.

large

Now if I run expo start once again, now you're gonna see that those warnings are not happening anymore, so that means that our dependencies are now up to date. So I wanted to have this video just to kinda be a warning whenever you see that, it's a good idea to upgrade those and let me also start up the simulator, just to make sure that any of those updates didn't break anything.

So this is gonna open up the iOS simulator here. Since the last video, I've actually switched. I've been testing out a few of the other devices. So right now, I've an iPhone 8 and as I go through the course, you'll see I use quite a few different options.

If you happen to be using a Mac, then you can go up here in the simulator, click on Hardware, Device and then you can see here that you can actually pick any of these devices.

large

So as you're going through and say you're building out your own iPhone applications, then this is a great way not only to see what your screens are gonna look like and run it in a completely different device, like an iPad but it's also a great way of being able to get screenshots.

So if you're creating an App Store listing and you wanna get a great looking screenshot, you could do it from your device but the problem with that is when you're creating an App Store listing, you need to create multiple screenshots on multiple devices which is hard to do unless you own a lot of phones. Here, you can switch to any of these other devices and then you can take a screenshot.

So I'll show you how to do it. And this is all Mac specific, so I apologize if you're following along on Windows 'cause it's different there but if I just hit Command + S, this is gonna grab a screenshot of the entire simulator so I can even show you what that would look like. So here, it saves it for me to the desktop and now I have a great screenshot of whatever screen it is that I'm looking at.

So that was a little bit of an aside, we didn't do anything with authentication in this video but we covered a few things. We covered how to update some of the dependencies to fix warnings and then we also talked a little bit about devices. So now with all of this in place, in the next guide, we're going to build a API utility function.

Resources