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.