Width, height, and flex in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the flex property do in React Native layout?

The flex property tells a component how much space it should take relative to its siblings inside a container. A higher flex value means the component grows more to fill available space.

beginner

How do you set a fixed width and height for a component in React Native?

You set fixed width and height by adding width and height properties in the style, for example: { width: 100, height: 50 } sets the component to 100 units wide and 50 units tall.

beginner

What happens if you set flex: 1 on a component inside a container?

The component will expand to fill all available space in the container, sharing space equally if siblings also have flex: 1.

intermediate

Can you use both fixed width/height and flex on the same component? What happens?

Yes, but fixed width and height take priority. The flex property will only affect the component if width or height is not fixed or set to auto.

beginner

Why is using flex often better than fixed sizes for mobile layouts?

Because mobile screens vary in size, using flex helps components adjust and fill space proportionally, making the app look good on different devices without hardcoded sizes.

In React Native, what does flex: 2 mean compared to flex: 1 on sibling components?

A The component with <code>flex: 2</code> takes half the space of the one with <code>flex: 1</code>.

B Both components take equal space regardless of flex values.

C The component with <code>flex: 2</code> takes twice as much space as the one with <code>flex: 1</code>.

D <code>flex</code> only affects height, not width.

flex defines proportional space. flex: 2 means twice the space compared to flex: 1.

If you want a component to be exactly 150 units wide and 100 units tall, which style should you use?

A { width: 150, height: 100 }

B { flexGrow: 150, flexShrink: 100 }

C { flex: 1 }

D { flexBasis: 150 }

Setting width and height directly fixes the size.

What is the default value of flex in React Native if not specified?

A undefined

B 1

C auto

D 0

The default flex is 0, meaning the component does not grow to fill space.

Which property controls how a component grows to fill available space in React Native?

A height

B flex

C width

D margin

flex controls growth inside a flex container.

If a container has two children with styles { flex: 1 } and { flex: 3 }, how is space divided?

A First child gets 1/4, second child gets 3/4 of space

B Equal space for both

C First child gets 3/4, second child gets 1/4 of space

D Space division depends on width property

Space is divided in ratio 1:3, so first child gets 1/4 and second child 3/4.

Explain how flex, width, and height work together to control layout in React Native.

Think about how space is shared inside a container.

Describe why using flex is important for mobile app layouts compared to fixed sizes.

Imagine your app on small and large phones.