Responsive dimensions (Dimensions API) in React Native - Mini App: Build & Ship

Build: Responsive Box Screen

This screen shows a colored box that adjusts its size based on the device screen width using the Dimensions API.

Target UI

-------------------------
|                       |
|                       |
|      [  BOX  ]        |
|                       |
|                       |
-------------------------

Use React Native Dimensions API to get screen width

Create a square box whose width and height are 50% of screen width

Center the box horizontally and vertically

Box background color should be blue

Add a text inside the box that says 'Responsive Box' centered

Starter Code

React Native

import React from 'react';
import { View, Text, StyleSheet, Dimensions } from 'react-native';

export default function ResponsiveBoxScreen() {
  // TODO: Get screen width using Dimensions API

  // TODO: Calculate box size as 50% of screen width

  return (
    <View style={styles.container}>
      {/* TODO: Add a blue box with responsive size and centered text */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
});

Task 1

Task 2

Task 3

Task 4

Solution

React Native

import React from 'react';
import { View, Text, StyleSheet, Dimensions } from 'react-native';

export default function ResponsiveBoxScreen() {
  const screenWidth = Dimensions.get('window').width;
  const boxSize = screenWidth * 0.5;

  return (
    <View style={styles.container}>
      <View style={[styles.box, { width: boxSize, height: boxSize }]}> 
        <Text style={styles.boxText}>Responsive Box</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  box: {
    backgroundColor: 'blue',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8
  },
  boxText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold'
  }
});

We use Dimensions.get('window').width to get the current screen width. Then we calculate boxSize as half of that width to keep the box square and responsive.

The box is styled with a blue background and centered text. We use flexbox properties justifyContent and alignItems to center the box and the text inside it.

This approach ensures the box size changes automatically on different screen sizes, making the UI responsive.

Final Result

Completed Screen

-------------------------
|                       |
|                       |
|     +-------------+   |
|     | Responsive  |   |
|     |    Box      |   |
|     +-------------+   |
|                       |
-------------------------

The blue box is always centered on the screen.

The box size changes if the device screen width changes (e.g., rotating device).

Stretch Goal

Make the box size update dynamically when the device orientation changes.

💡 Hint

Use the Dimensions.addEventListener('change', callback) to listen for screen size changes and update state.

Practice

1. What does Dimensions.get('window') return in React Native?

easy

A. An object with screen width and height

B. A function to change screen size

C. A string describing device type

D. A boolean indicating orientation

Solution

1. Step 1: Understand Dimensions API purpose

   The Dimensions API provides device screen information.

2. Step 2: Identify what get('window') returns

   It returns an object containing width and height of the window.

3. Final Answer:

   An object with screen width and height -> Option A

4. Quick Check:

   Dimensions.get('window') = object with width and height [OK]

Hint: Remember: get('window') gives width and height object [OK]

Common Mistakes:

• Thinking it returns a function
• Confusing it with device type string
• Assuming it returns orientation boolean

2. Which of the following is the correct syntax to import the Dimensions API in React Native?

easy

A. import { Dimensions } from 'react-native';

B. import { Dimensions } from 'Dimensions';

C. import Dimensions from 'Dimensions';

D. import Dimensions from 'react-native';

Solution

1. Step 1: Recall React Native import style

   React Native exports Dimensions as a named export.

2. Step 2: Choose correct import syntax

   Correct syntax is: import { Dimensions } from 'react-native';

3. Final Answer:

   import { Dimensions } from 'react-native'; -> Option A

4. Quick Check:

   Named import from 'react-native' = import { Dimensions } from 'react-native'; [OK]

Hint: Use curly braces for named imports from react-native [OK]

Common Mistakes:

• Using default import without braces
• Importing from wrong module name
• Confusing named and default imports

3. Given the code snippet:

const { width, height } = Dimensions.get('window');
const boxWidth = width * 0.5;
console.log(boxWidth);

If the device screen width is 360 pixels, what will be logged?

medium

A. 0.5

B. 720

C. 360

D. 180

Solution

1. Step 1: Extract width from Dimensions

   width is 360 pixels as given.

2. Step 2: Calculate boxWidth as half of width

   boxWidth = 360 * 0.5 = 180 pixels.

3. Final Answer:

   180 -> Option D

4. Quick Check:

   360 * 0.5 = 180 [OK]

Hint: Multiply width by fraction to get responsive size [OK]

Common Mistakes:

• Confusing multiplication with addition
• Using height instead of width
• Misreading 0.5 as 5

4. What is wrong with this code snippet?

import { Dimensions } from 'react-native';
const { width, height } = Dimensions.get('screen');
const boxHeight = width * 0.3;
console.log(boxHeight);

medium

A. Missing semicolon after import statement

B. Using 'screen' instead of 'window' may cause unexpected layout issues

C. Cannot destructure width and height from Dimensions.get()

D. Multiplying width by 0.3 is invalid

Solution

1. Step 1: Understand difference between 'screen' and 'window'

   'screen' includes status bar and navigation, 'window' excludes them.

2. Step 2: Identify impact on layout

   Using 'screen' may cause layout to not fit visible area properly.

3. Final Answer:

   Using 'screen' instead of 'window' may cause unexpected layout issues -> Option B

4. Quick Check:

   'screen' vs 'window' affects layout size [OK]

Hint: Use 'window' for layout size, not 'screen' [OK]

Common Mistakes:

• Thinking 'screen' and 'window' are the same
• Ignoring layout issues from status bar
• Assuming destructuring is invalid

5. You want a square box that always fills 40% of the screen width and adjusts height accordingly on device rotation. Which approach is best?

hard

A. Use fixed width and height values in styles

B. Use Dimensions.get('window') once at app start

C. Use useWindowDimensions hook to get width and set height equal to width * 0.4

D. Use Dimensions.get('screen') and hardcode height

Solution

1. Step 1: Understand requirement for dynamic size on rotation

   Fixed values or one-time get won't update on rotation.

2. Step 2: Choose hook that updates on dimension changes

   useWindowDimensions hook updates width and height on rotation.

3. Step 3: Calculate height based on current width

   Set height = width * 0.4 to keep square shape responsive.

4. Final Answer:

   Use useWindowDimensions hook to get width and set height equal to width * 0.4 -> Option C

5. Quick Check:

   Dynamic hook + calculation = responsive square [OK]

Hint: Use useWindowDimensions for responsive updates on rotation [OK]

Common Mistakes:

• Using fixed sizes that don't update
• Using Dimensions.get only once
• Confusing 'screen' with 'window' for layout