Responsive dimensions (Dimensions API) in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Dimensions API from React Native.

React Native

import [1] from 'react-native';

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

AStyleSheet

BView

CDimensions

DText

Attempts:

3 left

💡 Hint

Common Mistakes

Importing View or Text instead of Dimensions.

Forgetting to import Dimensions before using it.

The Dimensions API is imported from 'react-native' to access screen size information.

2fill in blank

medium

Complete the code to get the screen width using Dimensions.

React Native

const screenWidth = Dimensions.[1]('window').width;

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

AgetSize

BgetDimensions

CgetWindow

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using a method name that does not exist like getSize or getWindow.

Confusing the method with other APIs.

The get method of Dimensions returns an object with width and height of the screen.

3fill in blank

hard

Fix the error in the code to correctly get the screen height.

React Native

const screenHeight = Dimensions.get('window').[1];

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

Aheight

Bheightt

Cheigth

Dheigh

Attempts:

3 left

💡 Hint

Common Mistakes

Misspelling the property name causing undefined values.

Using similar but incorrect spellings.

The correct property name is height to get the screen height.

4fill in blank

hard

Fill both blanks to create a style that sets width and height to half the screen size.

React Native

const styles = StyleSheet.create({
  box: {
    width: screenWidth [1] 2,
    height: screenHeight [2] 2
  }
});

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

A/

B*

C-

D+

Attempts:

3 left

💡 Hint

Common Mistakes

Using multiplication or addition instead of division.

Using subtraction which would reduce size incorrectly.

To get half the screen size, divide the width and height by 2 using the / operator.

5fill in blank

hard

Fill all three blanks to create a responsive square view with side length equal to screen width minus 40.

React Native

const boxSize = screenWidth [1] 40;
const styles = StyleSheet.create({
  square: {
    width: boxSize,
    height: [2],
    backgroundColor: 'skyblue'
  }
});

// Use <View style=[3] /> to render

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

A-

BboxSize

Cstyles.square

D+

Attempts:

3 left

💡 Hint

Common Mistakes

Using addition instead of subtraction for size calculation.

Setting height to a wrong variable or number.

Not applying the style correctly to the View.

Subtract 40 from screenWidth to get boxSize. Set height equal to boxSize for a square. Use styles.square to style the View.