Complete React Native Tutorial #11 - Safe Area View

Key Takeaways

All right then my friends. In this lesson I want to talk about something called the safe area within the device screen real estate if you like and also look at how we can make sure content remains inside that safe area. So then what do I mean by safe area? Well let me demo this on one of the pages the books page within the dashboard. And let's also navigate to that page on the device as well so we can see it. Now, currently, as with all other pages we've made so far, we've centered the content in the dead middle of the screen using styles down here. So, naturally, it's always going to be within a safe area of the screen. But if we come to those styles, and it's this one right here, the justify content one, and we comment that out and we save the file, then the text won't be in the center anymore. And instead, it's shot right up to the top. And notice this, it's going behind the little phone heading section where the camera is and the time and the battery and all that other stuff. Also, we've got a spacer component above this text, pushing it further down. So, if we comment that out as well and save it, you're going to see the text riding even further up hidden. So, all this is considered not in the safe content area of the screen up here. And we shouldn't be putting content there for the most part. So, the safe area would be anywhere on the screen that's not hidden by device features or built-in device UI elements like the clock or battery. And sometimes those could be at the bottom of the screen as well. It varies from phone to phone. So, we need a way to ensure that the content always sits within the safe area without having to justify it to the dead center using styles all the time. And that's where components like the safe area view which is built into React Native come into play because the safe area view component automatically assesses where the safe areas of the screen are and it keeps content within those safe areas by pushing it inwards and it essentially does this by adding some padding around the edges where it needs to. So we always use a theme view at the moment to make sure that the color is correct for the view right according to the light or dark mode. But within that uh themed view component, we just use a plain native view component under the hood which we style. Now these native view components, they don't figure out the safe areas on their own. But we could use instead a safe area view component from React Native instead of this regular view. And that one would figure out the safe area so that whatever content the view wraps, it would be in that safe area. So then let's turn this view component into a safe area view instead. First of all, by importing the safe area view component from React Native. And once we've done that, we could replace the standard view that we have down here with a safe area view. And then just save the file. Now remember, if you don't see live updates on your device, you might need to reload it by shaking your phone. But hopefully then you should see that the content now drops down a little bit below the top section where the camera and device UI is. So, the safe area figures out the space needed for the view based on the device and it applies padding around it to adjust where the content goes. And this is good, but there's two things I want to highlight. First of all, I've noticed that when I'm using this safe area view component, it can cause kind of choppiness in the display when you're navigating between pages. So, we're actually going to use an alternative approach to this, which I'm going to show you shortly. And secondly, we don't actually want it to be that every time we use a themed view component, it's going to be using a safe area view or some alternative of that under the hood because we don't always need the view to be safe, right? It doesn't always need to be in that safe area. For example, we might be making some UI component or small sections on the page that doesn't require the extra padding around it. So we need this to be a choice, an option that we pass into the theme view component which tells us whether to use the safe area or not. So then let's start with that second point first of all. To do this we're going to accept a prop called safe which we're going to give a default value to of false. But if we pass the safe prop in to the component when we use it and we set it to be true, it overrides that. And when that safe value is true, it means we want to use the safe area view. If it's false, like by default, it means we don't. So all we have to do inside this component template then is first of all check um or rather change this back to a regular view first of all. And then I'm going to add a little if check before we return this regular view to make sure that we've not passed in a safe value. So if we say up here if not safe we can return this template right here. So now we're returning the normal view if the safe prop is false which it is by default. Underneath this then we need to return a different template which incorporates the safe area. All right then. So down here I'm going to make another return to return a different template for when the safe prop is true. And we're actually going to return a standard view again just like the other template up here. So I'm just going to copy that and I will paste it into the second template down here. Now a moment ago I said that the safe area view component can be a little bit janky or choppy when we use it with the expo router and navigate between pages and that's why I'm using a regular view here instead. But we are going to take a different approach to make this view a safe area view by manually adding some insert padding with the help of a package called react native safe area context. And we actually installed that package already back at the start of this series when we manually installed the expo router package as well. So we're going to say right here just before we return this view const insets is equal to a hook called use safe area insets. And if you click on this option here it's going to import that hook for us from the safe area context package that I just mentioned. All right. So this hawk a bit like the safe area view component figures out the space needed around the edge to bring the content into a safe area on the screen and it returns that space as properties called top, bottom, left and right on this inset variable we've just made. So now we can just manually use those values to apply padding to the top and bottom of this view to bring the content within it into a safe area. I'm going to do that now by coming down here and I'm going to expand this style object so we can add extra styles on each line. Now, first I'm going to add the padding top property and we'll set that equal to insets top and after that we can add the padding bottom property and we want to set that equal to insets.bottom. And now this is essentially a safe area view using a different technique or different approach which I found to be less junky. So, let's try this out. So, then let's go back to this books file over here. And by the way, after I saved that, you could see that this title went back to the top again behind this little device feature. And that's because when we're using the themed view, we're not passing in the safe prop and setting it to be true. So, when we don't do that, it just returns the standard view, just colored. So, what we need to do then is come over here and add the safe prop and set it to be true. And that makes it a safe area view kind of using those insets. So let's save it. And yeah, now we see this comes down again. Awesome. So anytime we want to use a safe area view, all we have to do is use this thing right here, this themed view, and we just set the safe prop to be true.