Width, height, and flex in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the width of the View to 100.

React Native

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

export default function Box() {
  return <View style={{ width: [1] }} />;
}

Drag options to blanks, or click blank then click option'

Aflex: 1

B'100%'

Cheight: 100

D100

Attempts:

3 left

💡 Hint

Common Mistakes

Using '100%' as a string for width in React Native does not work.

Confusing width with height or flex properties.

The width property expects a number for fixed width in pixels. So 100 sets width to 100 pixels.

2fill in blank

medium

Complete the code to make the View fill all available vertical space using flex.

React Native

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

export default function FullHeightBox() {
  return <View style={{ [1]: 1 }} />;
}

Drag options to blanks, or click blank then click option'

Aflex

Bheight

Cwidth

Dmargin

Attempts:

3 left

💡 Hint

Common Mistakes

Using height: 1 does not fill space, it sets height to 1 pixel.

Using width instead of flex for vertical expansion.

Setting flex: 1 makes the View expand to fill available space in its container.

3fill in blank

hard

Fix the error in the style to set height to 200 pixels.

React Native

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

export default function TallBox() {
  return <View style={{ height: [1] }} />;
}

Drag options to blanks, or click blank then click option'

A'200'

B'200px'

C200

Dheight: 200

Attempts:

3 left

💡 Hint

Common Mistakes

Using strings with units like '200px' causes errors.

Writing 'height: 200' inside the value instead of just 200.

In React Native, height is a number without units. So 200 sets height to 200 pixels.

4fill in blank

hard

Fill both blanks to create a View with width 150 and height 100.

React Native

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

export default function SizedBox() {
  return <View style={{ width: [1], height: [2] }} />;
}

Drag options to blanks, or click blank then click option'

A150

B100

C'100%'

D'150px'

Attempts:

3 left

💡 Hint

Common Mistakes

Using strings with units causes errors.

Mixing up width and height values.

Width and height should be numbers without quotes to set fixed sizes in pixels.

5fill in blank

hard

Fill all three blanks to create a View that fills space with flex, has width 200, and height 300.

React Native

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

export default function FlexibleBox() {
  return <View style={{ [1]: 1, width: [2], height: [3] }} />;
}

Drag options to blanks, or click blank then click option'

Aflex

B200

C300

Dheight

Attempts:

3 left

💡 Hint

Common Mistakes

Using strings with units for width or height.

Using height instead of flex for the first blank.

Use flex: 1 to fill space, and numbers for width and height in pixels.

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