Learn

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 display: flex.
  • 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 flex property. First, we will use hardcoded pixels, try percentages, and finally learn why flexbox is more powerful.

Instructions

1.

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.

2.

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.

3.

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 50%. 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. Replace the width and height styling rules with flex: 1 on both the layout and box styling.

4.

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.

5.

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.

flexboxes divided by 1-1-1

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.

flexboxes divided by 1-2-1

This happens because we increase the factor for that element.

  • The flex: 1 child elements will receive height / (1 + 2 + 1) * 1, which is 25% of the available space.
  • The flex: 2 child element will receive height / (1 + 2 + 1) * 2, which is 50% of the available space.

Click Run to continue to the next exercise.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?