Complete React Native Tutorial #20 - Activity Indicators

Key Takeaways

All right, so we made a component in the last lesson called use only which we used to protect certain pages from unauthenticated users. Like all these pages right here in the dashboard group. And we did that by wrapping the layout within that group with the use only component. And we also did the opposite. We made a guest only component which wrapped the auth pages so that only users not logged in can view those pages. Now inside those two components that we made, we also output a little bit of loading text as the content to show while we kind of figured out if the user was logged in or not. And while we ran any redirect logic. And that loading text ends up showing on a blank unstyled white screen for just a second and it looks horrible. In fact, I'm going to show you this now. I'm currently on the profile page logged in. Now when I log out, we're going to see for just a split second that white screen with a bit of text in the top left. And it doesn't look nice at all, right? So in this lesson, we're going to make a better loading screen that we can show that fits in with the color scheme of the user's phone as well, light or dark. So to do this, we'll be making use of a native component called activity indicator which shows like a little spinner. And we'll be embedding that into a custom themed loader component that we make and that we can then use instead of this text right here. So before we make that themed loader component, let's see what this activity indicator looks like out of the box. To do that, I'm going to head to the login page and we're just going to output the activity indicator at the bottom down here somewhere. So then, let me come underneath this link at the bottom and I'm just going to start typing this component which is a native component comes to us from React Native. And it's called activity indicator. So if we click on this one, it should import it from React Native up here. Yep. And now if we go down here, we can customize this using a couple of different props. So let's close it off first of all. And the first prop is going to be the size and we could set that to be for example large or small. So I'll say large. And then the next one is the color and I'm going to set that to be just white so it shows up. All right, so if I save this now and look down here, we can see that activity indicator which is like a little loading ticker, right? Now this is good, but if I'm on the light mode, so let me come down here and let me change this to light. If I save it, I'm going to have to reload the app. So let me shake that reload. And then go to the login page. It's white so it doesn't really show properly, right? So instead of just using this standard activity indicator and giving it a hard color, what I'd like to do is make that component like I said before which is some kind of themed loader. Now it's going to use this under the hood, but inside there we can tap into the user's color scheme and we can dynamically apply a different color to this activity indicator then. Okay, so now let's go to the components folder and create this new file called themed loader .jsx. All right, so inside here then, I'm going to import a few things and I'm just going to paste those in. So it is the activity indicator component we just used on the login screen. In fact, let's get rid of these things over here, give us some room. And then also the use color scheme hook as well which will need to grab the user's color scheme. On top of that, we have the colors object being imported so we can use those colors as well. All right, so then down here, let's make the component by saying const themed loader is equal to a function and inside here, we need to first of all grab the color scheme. So we'll say const color scheme is equal to use color scheme. We've seen all this stuff before, right? In all the other theme components. And then we need to actually use that value to get a theme from the colors object. So we'll say const theme is equal to colors and then in square brackets, we're going to pass in the color scheme which remember is either going to be light or dark. So it's going to be either the dark property or the light property that we get access to from that colors object then. But it could sometimes be null and we need a fallback. So we'll say double question mark and the fallback is colors .light so the light theme. All right, so now we need to actually return a template. So let's do that. Return and inside this template, we want the activity indicator. Now for the size we'll say it's going to be large. I mean, you could accept this as a prop here as well if you wanted to and the user could then choose a large themed loader or a small one. I'm just going to keep it large for all of them. And then for the color, this is the dynamic part. It's going to be a theme .dots And what should we use? What color? Let's have a look at the colors object inside the constants folder. I think the text color. Because then it's going to be bright for the dark theme and it's going to be dark for the light theme, right? So let's use the text color. So theme.text like so. All right, so now what I'm going to do is come to the login page over here and instead of using the activity indicator, I'm going to use the themed loader which we will need to import up here. So let's do that as well. Duplicate that and we'll change this and this to themed loader. All right. And then we can also get rid of this one up here as well and the text import. And the pressable. Great. All right. So if I save this, hopefully we'll see the themed version of this now instead. So let's do that. And okay, an error. Let's have a look what that is. We'll scroll right down and then come back up a bit. Okay, so it says check the render method of login. Element type is invalid, expected a string. Okay, and it turns out I've just not exported it. So let's do that. Let's export default themed loader like so. Save this and then if we go to the login page now, yeah, there we see it. Awesome. So that looks good. And now if we go to the app.json file and change this to the dark mode again, hopefully the loader will be light. Currently it's dark, right? For the light theme. If I change this and then reload the app and then go to the login page. Yep, now the loader is light. So this is all working. This is good. But I want to do one more thing because this themed loader is actually going to be a loading page that I want to show instead of that current text that we're getting in the top left. If we open up those components, where are they? Use only for example. This thing right here. It's basically just a text component on a white background. Now I don't just want to show that little loading component up here in the top left instead. No, I want to show a whole kind of view which stretches across the whole screen with the activity indicator in the middle. So what I'm going to do then is wrap this with a themed view. So I will say themed view right here. Click on this to import it. And then I'm going to grab this and I'm going to paste it down here. And we nest the activity indicator in the middle. Now I also want to apply some styles to this. So we'll say style is equal to an object. We'll just do it in line and this is going to say flex is one. Then justify content to the center. And then finally, we want to align items to the center as well. And this is also the first of all with flex one, the view takes up the whole height of the screen. Justify content to bring the loader down into the middle vertically. Align items to do it horizontally as well. So we're going to get a big screen which uses the themed view so the same background color as whatever the theme is. And then in the middle, we're going to get that loader. All right, so if I save this now then over here, you can see it's taking up all the available room. It's pushed everything else up to the top. But we don't want to use it there on the login page anyway. So let's get rid of it and remove it from the imports as well. And we want to use it inside this thing right here so we can use the themed loader there instead. Click on that to import it. And then we'll get rid of the text import. And the same for the guest only one. So let's change this to be a themed loader and we can get rid of the text import like so. All right, so now what I'm going to do is I'm going to try logging into an account. So I think one of them was Bowser and that was at ninja .dev, right? I think. And then test 1 2 3 4. Login. All right, yeah. So now I'm logged in. Now before when we logged out, we saw that little white page. Now you're not going to see it for long, but just try and pay attention. When I click on log out in a second, you're going to see that loading screen instead, that themed one. So log out and you saw it very briefly, right? It just looks a little nicer. Now if the internet connection was bad and that request took a little bit longer, then you would see it for longer and that would be a better user experience I think showing that than just a little loading message in the top left. So then now we've created that themed loader and I think in the next lesson it's time to move on and we're going to set up the database so we can start storing book records.