There are a lot of different screen sizes and shapes for mobile apps. The screens can also “change shape” by rotating the device. It’s important to make your app responsive because of these changing factors.
When defining your layout, you can use different techniques and units to make your app responsive. Some elements don’t have to be responsive in size, like buttons. Other elements can be made responsive with percentage values.
The best way to make your layout responsive is by using Flexbox. It’s similar to the web variant, with some minor differences.
- All elements are flexboxes; you don’t have to specify
- Some default values are changed to better suit mobile apps.
In these exercises we are refactoring a non-responsive layout to a more responsive version, using the
First, we will use hardcoded pixels, try percentages, and finally learn why flexbox is more powerful.
Let’s start by refactoring a non-responsive layout to a responsive layout.
We are rendering a flexbox containing 2 boxes - a red and green box. It uses fixed dimensions using the Dimensions API. This example is only responsive on the first render. Click Run to find out why.
At first, this layout looks responsive, but if you try to resize your screen you can see that it’s not responsive at all. If you decrease the height of your window, you can see that the boxes are scrolled out of view.
In our code, we used fixed dimensions, based on the maximum width and height of the screen. That means we still use fixed dimensions, making our layout unresponsive when rotating screens. Let’s try to improve that by using percentage values instead.
Change the layout styling to a width and height of
100%. On our box, we want to use a width of
100% and a height of
50%. The height is
50% because we want to distribute the space evenly over two boxes.
Great! That’s better - when you resize your window the boxes are not scrolled out of view. But even percentage values have their limitations compared to flexbox.
In our box, we use a height of
Unfortunately, this value changes when we change the number of boxes rendered.
The height has to be changed to
33.3% to evenly distribute the available space.
If your styling needs to be aware of the content rendered, it’s not exactly responsive.
Instead of percentage, let’s try to solve this with a flexbox.
height styling rules with
flex: 1 on both the layout and box styling.
Awesome! This should produce the same result as our previous attempt with percentages. The only difference now is that the styling isn’t coupled to the number of boxes rendered.
We can test that behavior by adding another box. Add a 3rd blue box to our app.
By adding the
flex property with a factor number, we tell React Native to distribute the available space by the factor provided.
The height for each of our boxes is calculated by dividing the available space by the sum of factors used.
In our case, that would be
height / (1 + 1 + 1) * factor.
You can also change the factor for one or two child elements. Doing so will increase the height of that element, and decrease the height of others.
This happens because we increase the factor for that element.
flex: 1child elements will receive
height / (1 + 2 + 1) * 1, which is
25%of the available space.
flex: 2child element will receive
height / (1 + 2 + 1) * 2, which is
50%of the available space.
Click Run to continue to the next exercise.