Width, height, and flex in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

How does flex affect component size?

Consider a parent View with two child Views. The first child has style { flex: 1 }, the second child has style { flex: 2 }. How will their widths compare if the parent is a row container?

React Native

import React from 'react';
import { View } from 'react-native';

export default function App() {
  return (
    <View style={{ flexDirection: 'row', width: 300, height: 100 }}>
      <View style={{ flex: 1, backgroundColor: 'red' }} />
      <View style={{ flex: 2, backgroundColor: 'blue' }} />
    </View>
  );
}

A The red view will be 100px wide, and the blue view will be 200px wide.

B Both views will be 150px wide.

C Both views will be 300px wide.

D The red view will be 200px wide, and the blue view will be 100px wide.

💡 Hint

Flex values determine the ratio of space each child takes inside a flex container.

The parent has width 300. The first child with flex 1 takes 1 part, the second child with flex 2 takes 2 parts. Total parts = 3. So widths are 300 * 1/3 = 100 and 300 * 2/3 = 200.

📝 Syntax

intermediate

Which style correctly sets fixed height and flexible width?

You want a View that is always 100 pixels tall but stretches horizontally to fill available space. Which style achieves this?

A { height: 100, flexDirection: 'row' }

B { height: 100, flex: 1 }

C { width: 100, flex: 1 }

D { height: 100, flexGrow: 0 }

💡 Hint

Flex controls how much space a component takes in the flex direction.

Setting height fixes vertical size. Setting flex:1 makes the component expand to fill available space horizontally in a flex container.

❓ lifecycle

advanced

What happens if you set both width and flex on a View?

If a View has style { width: 100, flex: 1 } inside a flex container, what will be its width?

A The width will be the minimum of 100 pixels and available space.

B The width will expand to fill available space ignoring the 100 pixels.

C The width will be 100 pixels, flex is ignored for width.

D The width will be 100 pixels plus extra space from flex.

💡 Hint

Explicit width overrides flex sizing in React Native.

When width is set explicitly, it takes priority over flex for that dimension. Flex only affects size if width or height is not fixed.

❓ navigation

advanced

How does flex affect nested Views in navigation header?

In a navigation header with flexDirection 'row', you have three Views: left, center, right. Center has flex: 1, left and right have fixed widths. What happens to the center View when screen width changes?

A Left and right Views shrink, center View stays fixed.

B Center View stays fixed size, left and right Views expand.

C All three Views keep fixed widths regardless of screen size.

D Center View expands or shrinks to fill space between left and right Views.

💡 Hint

Flex allows a View to take remaining space after fixed sizes.

The center View with flex:1 fills the space left by fixed width left and right Views, adjusting as screen width changes.

🔧 Debug

expert

Why does this View not fill the screen height?

You have a View with style { flex: 1 } inside a parent View without flex. The screen height is 800 pixels. What is the height of the child View?

React Native

import React from 'react';
import { View } from 'react-native';

export default function App() {
  return (
    <View style={{ height: 800 }}>
      <View style={{ flex: 1, backgroundColor: 'green' }} />
    </View>
  );
}

A The child View height is 800 pixels, filling the parent.

B The child View height is 0 because parent has fixed height but no flex.

C The child View height is undefined and causes an error.

D The child View height is less than 800 because flex needs parent flex to work.

💡 Hint

Flex:1 on a child fills the parent's defined height since every View is a flex container.

The parent View with height: 800 is a flex container (default flexDirection: 'column'). The child with flex: 1 grows to fill the entire available space of 800px.

Practice

1. What does the flex property do in React Native layout?

easy

A. It changes the font size of text.

B. It sets a fixed width in pixels.

C. It makes the component grow or shrink to fill available space.

D. It sets a fixed height in pixels.

Solution

1. Step 1: Understand the role of flex

   The flex property controls how a component grows or shrinks to fill space in its container.

2. Step 2: Compare with fixed sizes

   Unlike fixed width or height, flex is flexible and adapts to screen size.

3. Final Answer:

   It makes the component grow or shrink to fill available space. -> Option C

4. Quick Check:

   Flex = flexible size [OK]

Hint: Flex means flexible size, not fixed pixels [OK]

Common Mistakes:

• Confusing flex with fixed width or height
• Thinking flex changes font size
• Assuming flex sets exact pixel size

2. Which of the following is the correct way to set a fixed width of 100 pixels in React Native style?

easy

A. { width: 100 }

B. { width: '100' }

C. { width: '100px' }

D. { flex: 100 }

Solution

1. Step 1: Check value type for width

   In React Native, fixed sizes are numbers without quotes, representing pixels.

2. Step 2: Identify correct syntax

   Only { width: 100 } uses a number correctly; strings or units like 'px' are invalid.

3. Final Answer:

   { width: 100 } -> Option A

4. Quick Check:

   Fixed size = number without quotes [OK]

Hint: Use numbers, not strings, for fixed sizes [OK]

Common Mistakes:

• Using strings instead of numbers for width
• Adding 'px' units which React Native does not use
• Confusing flex with fixed width

3. What will be the height of the red box in this code?

import React from 'react';
import { View } from 'react-native';

export default function App() {
  return (
    
      
      
    
  );
}

medium

A. The red box will have height equal to flex 1.

B. The red box will fill all available space.

C. The red box will have height 0.

D. The red box will have height 100 pixels.

Solution

1. Step 1: Analyze red box style

   The red box has height: 100, so it is fixed at 100 pixels tall.

2. Step 2: Understand flex on sibling

   The blue box uses flex: 1 to fill remaining space, but red box height stays fixed.

3. Final Answer:

   The red box will have height 100 pixels. -> Option D

4. Quick Check:

   Fixed height overrides flex for that box [OK]

Hint: Fixed height overrides flex size [OK]

Common Mistakes:

• Assuming flex affects fixed height components
• Thinking red box fills all space
• Confusing flex values with pixel sizes

4. Find the error in this React Native style code:

const styles = {
  container: {
    flex: '1',
    width: 200
  }
};

medium

A. flex should be a number, not a string.

B. width should be a string with 'px'.

C. flex cannot be used with width.

D. width must be less than 100.

Solution

1. Step 1: Check flex value type

   In React Native, flex must be a number, not a string.

2. Step 2: Validate width usage

   width: 200 is correct as a number; no 'px' needed.

3. Final Answer:

   flex should be a number, not a string. -> Option A

4. Quick Check:

   flex = number, not string [OK]

Hint: flex and width values must be numbers, not strings [OK]

Common Mistakes:

• Using strings for flex or width
• Adding 'px' units to width
• Thinking flex and width cannot coexist

5. You want a container with two boxes: the first box fixed width 100 pixels, the second box fills the rest of the screen width. Which style setup achieves this?

hard

A. Parent: { flexDirection: 'column' }, Box1: { width: 100 }, Box2: { flex: 1 }

B. Parent: { flexDirection: 'row' }, Box1: { width: 100 }, Box2: { flex: 1 }

C. Parent: { flexDirection: 'row' }, Box1: { flex: 1 }, Box2: { width: 100 }

D. Parent: { flexDirection: 'column' }, Box1: { flex: 1 }, Box2: { width: 100 }

Solution

1. Step 1: Set parent direction to row

   To place boxes side by side horizontally, use flexDirection: 'row'.

2. Step 2: Assign fixed width and flexible width

   Box1 gets fixed width: 100, Box2 uses flex: 1 to fill remaining space.

3. Final Answer:

   Parent: { flexDirection: 'row' }, Box1: { width: 100 }, Box2: { flex: 1 } -> Option B

4. Quick Check:

   Row + fixed width + flex fill = Parent: { flexDirection: 'row' }, Box1: { width: 100 }, Box2: { flex: 1 } [OK]

Hint: Use row direction for horizontal layout with fixed + flex [OK]

Common Mistakes:

• Using column direction for horizontal layout
• Swapping flex and width on boxes
• Forgetting flexDirection property