- Read Tutorial
- Watch Guide Video
In this lesson, we'll see how we can add responsive font sizes to our application. So there is a beneficial library here called React Native responsive font size that does exactly what we're looking to do.
Now, this is a problem that you are not going to encounter unless you're using a very small or a very large device as you're going through this course, But if you're using the simulator, you're going to see your fonts come out, and they're all going to look perfect. However, if you're building an application that needs to work on different screen sizes, you're going to run into this issue. I have had this happen on almost every application I've worked on where I was working on the simulator, and everything looked great.
[Capture #1]
So I have the simulator open here, and I would see a title like this, and it looked perfect. It went exactly as far as I wanted it to go, and everything looked great, and then the client would look at the application, and then they would see that the name because say they were working on a tiny screen, this name would go all the way to the end and would be completely distorted, and it would not look good.
So I discovered this beneficial library that dynamically scales the font sizes based on the screen size. So that's what we're going to implement here. So you can copy this code here, and we're going to say yarn add and then the library's name.
So I'm going to open up. You can open up the terminal or Visual Studio code here and run that install command. While it's installing, I'll also open up the simulator, which is still running. You shouldn't have to restart your server when we're doing this, but we can always if it doesn't pick up the library.
So I'm going to now go to our postItemStyles here, and so if I go here, I'm going to the name text, and now we want this new style rule to apply to fontSize, So I'm going to import this, go up the top, and I'm going to say import RFValue, and it spelled out exactly like that And then that is from react-native-responsive fontSize, and that's all we need to do there And then and all of this, once again, is in the documentation.
So now we call this function, which is our RFValue, and it takes two arguments. The first is the font size, a starting font size, and the next is the standard screen height, which has worked for me in almost every application I built. So now, if you hit save, you'll see nothing changes here because we're working on the same type of screen size, but if you were testing this on a much smaller device, you would notice that this text would scale down And if you're working on an enormous device, this text would scale up This is something incredibly helpful and in just one line of code, you're able to have responsive font sizes, right inside of your application.
So as you're going to see, as we go throughout the rest of this course, we're going to be using this RFValue every time we are defining a fontSize So keep that in mind And next, let's just since that was pretty quick, let's fix a couple of issues in our application.
So first and foremost, you may have already noticed, but if you scroll down here, do you see how we do not have our bottom title? We don't have the name for the bottom unless you drag up, and the reason for that is because we are defining a screen size here that is from a hundred from top to bottom, but our bottom navbar takes up And so we need to take that into account.
So let's go and test this out. If we go to the FeedScreen here, we can go to the scroll view, and in the scroll view, what I can say here is I want to add some margin to the bottom, so I'll say style, and then margin-bottom, and then let's say for margin-bottom here, it's So let's see if that's all we need
So now, if I scroll to the bottom, that is working perfectly, so this is precisely what we want. So let's go and add one because this will be something we'll be using quite a bit throughout the rest of the course. So we don't want to call style margin-bottom every time we have the bottom navbar.
[Capture #2]
So let's go to our base styles, open that up, and create another type of container here.
So for this container.
[Capture #3]
I'm going to call this one, let's call it viewwithBottomTabBar, and that way, we know that anytime that we need to use a view that has the BottomTabBar, or you could also, if you want to and if it makes a little more sense to you, and I think it might is containerwithBottomTabBar
Now we can say margin-bottom and say that's going to be, so inside of our feed screen, let's import that, So come up all the way here doesn't look like we have any of those styles imported.
[Capture #4]
And also, notice that anytime you see an underlined component, it's not being used. Get rid of it, so we don't have a dead code laying around, and so now let's import that base style. So import baseStyles from dot dot slash styles, and then we want to go with familiar, and then baseStyles And if you copy that, and come all the way down to that scroll view, now inside of that style, get rid of margin-bottom and then make sure you don't have a typo like I just did There you go and now we can say baseStyles dot, and we want that container with the bottom tab bar Hit Save to confirm that this is working And that looks good.
[Capture #5]
So only one last issue that I want to address here Notice when the system gets refreshed, so whenever it gets refreshed, Notice how until the images load, the bottom tab bar is actually in the middle of the screen.
That's not exactly a great UI, and the reason for it is because this view tag right here is not actually taking up any height. It only remembers it only is going to take up the height that needs, and when there are no images there, then that's not going to work.
So we need this view tag to just be the screen height, so I'm going to add one more set of styles here. We have our container styles But let's create one that's called screen, and this is a very common convention; you're going to see this in many tutorials in a lot of documentation, where you have one style here called screen, and this simply has a height of a hundred percent.
And you know what, now that I'm looking at our container here, this may also be part of the issue. Let me test this out first. This should be a height of a hundred percent. Let's see. Oh, and look, that's fixed, so we don't even need to use a screen one here as my mistake. I was using width, which the width is always going to be a hundred percent. Now that we have the height there, then that's taking care of that little bug.
[Capture #6]
So that's working, and let me quickly take a look at this warning, and then we will continue on. Okay, it says warning cannot perform react state update on an unmounted component. This is a loop. We're not going to have to worry about this when this one is only coming up Because when you make a bunch of changes in a row, what's happening is react, as you can see, is reloading the component again and again, and in the FeedScreen, what that means is each time we hit refresh. It's got the whole system refreshing, It is calling this API call, and if we happen to make a couple of changes very quickly, then it's calling it in the middle while it's still waiting for the posts.
And so what React thinks is that we are trying multiple processes, trying to run multiple processes at the same time and canceling one out, and that's not working, so that's not an issue. That's only going to be something that happens during development. So all of that is looking great. I'm delighted with how this is coming along, and so now that we have all of this in place.
Now let's start with the next guide. We're going to start talking about how we can begin implementing the ability for our users to create an ad for their posts.